Mozilla Firefox userChrome.css?

Question

While researching how to create a userChrome.css for Mozilla Firefox, I found out that you can do it in different ways:

Example 1:

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

@-moz-document url(chrome://browser/content/browser.xul) {
  #PanelUI-button {
    display: none !important;
  }
}

Example 2:

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

#PanelUI-button {
  display: none !important;
}

First example contains the line @-moz-document url(chrome://browser/content/browser.xul) and the second does not. I'm not sure what it does and ouput of both examples is exactly the same.

Are there any benefits by including @-moz-document url(chrome://browser/content/browser.xul) in userChrome.css?

Answer 1

@-moz-document is the prefixed form of @document, a CSS "@-rule" which restricts the contained rules to certain URLs. So in this case,

@-moz-document url(chrome://browser/content/browser.xul)

restricts its contained rules to browser.xul.

Without going too deeply into userchrome.css research, I expect this means the rules will only apply to "bits of Firefox", and not actual web pages.

You could probably test it out by creating a page with an element of ID #PanelUI-button, and see if the display:none applies to it.

Answer 2

The @-moz-document scope restricts the style rules to that one chrome document. In this case it's the main browser UI which is what you want most of the time. Without that scope the rules would be applied to all chrome pages. This might be what you want if you're creating a theme and want consistent colors and fonts.

If your style rules are manipulating a specific element as in your example then you should limit it to the specific document, but leaving that out generally doesn't cause any problems. In this case, though, you might end up with missing buttons on some unrelated dialog if that document happened to use the same element name.

I'm answering a very old question and more recent versions of Firefox have renamed all the .xul files to .xhtml. You'd want to use @-moz-document url(chrome://browser/content/browser.xhtml) { ... } instead.

To confirm Jeremy's answer, "userChrome.css" applies only to bits of the Firefox UI, not web content. But there is a "userContent.css" file that can be used to apply custom styles to web-content. You will definitely want to scope rules in userContent.css to specific URLs or domains.