CODEWITHSUNDEEP
cssuser-interfacefirefoxnamespacescustomization
Amazon Dies In Darkness
Amazon Dies In Darkness

Reputation: 5823

What namespace should be defined in Firefox's userContent.css?

In Firefox's userChrome.css, it is necessary to define the XUL namespace:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

In userContent.css, what namespace should be defined if about:addons customizations are included in addition to website customizations?

Specifying only:

@namespace url(http://www.w3.org/1999/xhtml);

results in the about:addons customizations not getting applied.

(See Why are CSS declarations for about:addons placed in userContent and not userChrome, given that the namespace is XUL? for why about:addons customizations get placed in userContent.css.)

Upvotes: 0

Views: 1608

Answers (2)

user12638282
user12638282

Reputation: 109

According to Jefferson Scher, the XUL @namespace directive is no longer needed, and may cause unexpected glitches in newer versions of Firefox. Instead, it is now recommended to use @-moz-document:

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
  /* Your style rules for the user interface go here */
}

Upvotes: 1

Makyen
Makyen

Reputation: 33326

The userContent.css file is used for content that can be of any namespace. Most commonly it is used for both HTML and XUL. In addition, Firefox is transitioning to use more HTML namespace elements in the code which is used to define their chrome (i.e. everything that's not content). Thus, you will need to handle both HTML and XUL in both userChrome.css and userContent.css.

Given the mix of HTML and XUL used in Firefox Chrome, I find that I will often need to either look at the source code for the elements or use the DOM Inspector to see which namespace is being used for the elements I'm interested in.

There are many ways to do this with the @namespace directive. The following two approaches can both be used in the same file, if desired. If you do, you will need to pay attention to what you have defined as the current default namespace.

Define rules for HTML elements, change the default to XUL then do XUL

Given that these files, by default, use the HTML namespace, what I, personally, have done is just have my HTML namespace rules prior to using:

/* Set default namespace to XUL. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

to set the default namespace to XUL. All of my XUL rules are then placed after the namespace change. Thus, it looks something like:

/* Put all HTML namespace rules here. */    

/* Set default namespace to XUL. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* Put all XUL namespace rules here. */

How you organize it is up to you. I do it this way because I encountered issues when trying to explicitly use the HTML namespace for elements after changing the default namespace to XUL. I found that explicitly specifying the namespace per element often did not function as I expected, and was a pain the the rear. Thus, I restructured all of the rules I use to be exclusively either HTML or XUL.

Alternately, define namespace prefixes, then use them on all elements

If you want to do it by explicitly specifying the namespace for each element, you will want to define a namespace prefix. You can do so by using something like:

/* set html namespace to http://www.w3.org/1999/xhtml */
@namespace html url("http://www.w3.org/1999/xhtml");
/* set xul namespace to http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

You can then use html|, xul| or *| to specify the HTML, XUL, or all namespaces for each element.

Note: Once you change the default namespace, you may need to explicitly deal with elements in other namespaces (e.g. <svg>, <math>, etc.), which would normally be handled automatically.

Upvotes: 4

Related Questions