Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Past Blogs

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:

Here is what went into my user styles:

@-moz-document domain( {
  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.

Last Month

Next Month