Setting Up User Styles in Firefox

While reviewing talks for CascadiaFest, I wanted to find a way to hide comments from other reviewers until after I'd formed my opinion of the talk. I figured this would be pretty easy to do with user styles - the browser's base set of CSS rules that are followed for every site. In Firefox, these styles are stored in userContent.css in your profile folder.

Doing so proved a little more complicated than I anticipated, because Google's search results seem to interpret "userContent.css" as "userChrome.css". As you can imagine, this made it a little difficult to find information on userContent.css. Here are the two references that I did manage to find:

• http://kb.mozillazine.org/UserContent.css
• http://superuser.com/questions/318912/how-to-override-the-css-of-a-site-in-firefox-with-usercontent-css

Here is what went into my user styles:

@-moz-document domain(speak.cascadiafest.org) {
  ul.comment-list { opacity: 0 !important; }
  ul.comment-list:hover { opacity: 1 !important; }
}

The @-moz-document domain "selector" allows me to limit these styles to pages delivered from a certain subdomain. I then hid the elements using opacity, and showed them when they were hovered over. Opacity isn't always the best way to hide things with CSS; but in this case I did want the elements to take up space on the page, and for their children to also be invisible. And a user stylesheet is a fine place for !important; I always want that style to apply, even if a higher specificity selector would override it.

After editing userContent.css, you have to restart Firefox for the changes to take effect.

Permalink

Tags: cascadiafest cascadiajs css firefox usercontent.css