Firefox Changes Breaking userChrome.css

Updated Dec. 6, 2019; Originally posted by jscher2000 on September 7, 2019.

Firefox's UI is gradually shedding its XUL heritage and being replaced by HTML (including some modern constructs that can be challenging to style). This page collects a few significant changes for quick reference; admittedly it's not comprehensive, these are the changes that have affected me the most. Please use the Feedback button at upper right to alert me (and other readers) to things I've missed, and check https://www.reddit.com/r/FirefoxCSS/ for more solutions.

Firefox 71 (Released Dec. 3, 2019)

Your "tabs on bottom" code will need a tweak (if you use such code).

Firefox 70 (Released Oct. 22, 2019)

Bookmark and History menus have been extensively revised.

Firefox 69 (Released Sept. 3, 2019)

Here are some headline changes (and fixes) for broken userChrome.css styles in Firefox 69:

(1) [Preference] Firefox won't look for userChrome.css/userContent.css at startup unless told to do so

To make startup faster for most users, Firefox 69 will no longer look for this file automatically. You need to tell it to look. Here's how:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box above the list, type or paste userprof and pause while the list is filtered. If you do not see anything on the list, please ignore the rest of these instructions. You can close this tab now.
  3. If the toolkit.legacyUserProfileCustomizations.stylesheets preference is not already set to true, double-click it to switch the value from false to true.

That change should take effect on your next startup.

(2) [Code Edit] browser.xul file renamed browser.xhtml

Many style rules were "scoped" to browser.xul to avoid leaking over to other aspects of the browser. If you have instances of this --

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

-- you can update them to either of the following (the first is simpler, the second is for backwards and forwards compatibility):

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

Firefox 68 (Released July 9, 2019; basis for ESR)

This is one of the more significant changes affecting userChrome.css files in Firefox 68:

(1) [Preference or Code Edit] The Quantumbar (new address bar drop-down)

Firefox 68 saw the debut of a visually identical drop-down with all new code (mostly HTML) and all new CSS selectors. The rule updates required to modify the Quantumbar are very extensive, so if you don't have the patience, or the source you used for your rules hasn't released an update yet, you can postpone the day of reckoning using the following preference to turn off the Quantumbar for now.

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box in the page, type or paste URLB and pause while the list is filtered.
  3. Double-click the browser.urlbar.quantumbar preference to switch the value from true to false.

(2) ESR Users: Cumulative changes in Firefox 61-67

Wow, too many to remember at this point, sorry. /r/FirefoxCSS/ would be a good resource.