How to Customize Firefox’s User Interface With userChrome.css

Posted on by

Today I read How to Customize Firefox’s User Interface With userChrome.css. You may need to enable with e.g. Firefox 69: userChrome.css and userContent.css disabled by default. If you change userContent.css you need to open your page in a new tab to force an update. I would guess that if you change userChrome.css you will need to restart Firefox (I don’t know I’ve only been using userContent.css).

I should be clear: there are two files: userChrome.css (which affects Firefox features like toolbars and tabs etc) and userContent.css (which affects web pages loaded in Firefox).

I’ve been using userContent.css to fixup CSS on various websites. You can limit your changes to a particular domain in this way:

/* 2020-07-01 jj5 - SEE: https://exploringjs.com/impatient-js/toc.html */
@-moz-document domain(exploringjs.com) {
  a:visited { color: purple !important; }
}