Archive for December, 2005

Site specific stylesheets in Mozilla

Tuesday, December 20th, 2005

One of the new features in Mozilla Firefox 1.5 is the at-rule for matching on site/document. This allows you to make site specific[1] css rules in your userContent.css[2]file.

Example of the syntax:
@-moz-document url-prefix( {
 body {
   background: white !important;
   color: black ! important;

In the example above the you would overrule any background and color style set for the body on the site This is handy for sites that uses inaccessible colors or for some reason you just want to change the look of.

Real life example

On to a real life example and what isn’t a better place to start than

Slashdot original screenshot:
slashdot original screenshot

This is the original screenshot from, note when images are turned off you cannot see the headline. Since they haven’t specified a background for the header and uses white background in the parent element. This also happens if the background image isn’t cached. You have to waited for it to be downloaded to be able to read the headlines.

The the solution

@-moz-document url-prefix({
 #slashboxes h4, .article h3, .generaltitle h3 {
   background-color: #04559f !important;

Slashdot “fixed” screenshot:
slashdot fixed screenshot

As you can see, there isn’t much code needed to fix this annoyance. Note that this line does not overrule the background image that slashdot have set in their css file, it only adds a needed background color.

You can view my complete set of styles that I use on slashdot. I could of cource make one generic style for the whole slashdot site but I wanted to make the style for the each section fit in with their respectively designs.