Site specific stylesheets in Mozilla

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(http://www.domain.com/) {
 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 www.domain.com. 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.org?

Slashdot original screenshot:
slashdot original screenshot

This is the original screenshot from politics.slashdot.org, 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(http://politics.slashdot.org/){
 #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.

References

  1. http://simon.incutio.com/archive/2004/08/19/specific/
  2. http://www.squarefree.com/userstyles/
  3. http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html
  4. https://bugzilla.mozilla.org/show_bug.cgi?id=238099

2 Responses to “Site specific stylesheets in Mozilla”

  1. nils says:

    Nå ble slashdot brukt som et eksempel på anvendelse av slik stil i en “real life” situasjon. Tenkte det var bedre å bruke noe vellkjent enn en eller annen obskur side 😉
    Så sånnsett er det ikke en diskusjon om slashdot er bra eller dårlig.

    Merk at problemene på slashdot kan oppstå selvom en har billedvising på. Hvis bakgrunnsbildet ikke er i cache, så vises bare en hvit bakgrunn. Hvis båndbredde er en mangelvare så er det tenkelig at man vil så av bilder.