Applying user-defined site-specific CSS in Firefox

Overriding the default CSS for websites in Firefox
tagged:

firefox

life hack

One of the features I absolutely love about Firefox is the ability to override CSS for websites, and that this setting syncs across multiple computers (if you have syncing turned on).

My use case is that I visit a particular site once a week, but it has no CSS applied on links already visited. Hard to keep track of stuff you’ve already seen… so I apply my own CSS overrides to that website.

  1. Type about:support in the URL bar of Firefox to open up the Troubleshooting information.
  2. Click the button to open your profile folder.
  3. If there isn’t a folder named chrome, create one.
  4. Inside it, create a file named userContent.css and insert your CSS there (see example below).
  5. Go back to Firefox and type about:config in the URL bar. Accept the risk and continue.
  6. Search for the setting toolkit.legacyUserProfileCustomizations.stylesheets and turn it from false to true.
  7. Restart Firefox, and now your CSS should be applied.

Here’s an example of site-specific CSS:

@-moz-document domain(website.com) {
  h2 a:visited { color: red !important; }
  img { max-height: 90vh !important; }
}