Monthly Archives: November 2007

CSS From A Single Source

When you have the need to write browser specific CSS but don’t want to resort to serving up multiple CSS files from the server, scripting styles or inlining tag styles, keep this in mind. There is a way to write browser specific CSS from a single CSS file and here’s how you do it. Let’s assume that you have a style that you only want picked up by Internet Explorer and not a Mozilla flavored browser. For testing purposes, let’s change the color of text to red for IE:

/* Assume this is a style block */ 
 
P{
#color: red;
_color: red;
}

If you haven’t seen this syntax before, you’re probably thinking…what the hell is that? The “#” and “_” sign prefixing styles will only be picked up by Internet Explorer browsers, Mozilla based browsers will discard the styles altogether and move on. The reason we use both the “#” and the “_” is due to Internet Explorer versions, certain versions will only acknowledge the “#” sign, while others only see the “_” sign. So to be safe we use both. Now try the above code in your own page, create a paragraph tag, stick some text in it and open it with Internet Explorer. Booyah! red text, so now what about Mozilla flavored browsers:

/* Assume this is a style block */ 
 
P{
color: green;
#color: red;
_color: red;
}

In CSS we have the general rule of “last one wins”. In this case Internet Explorer will see the “color: green;” style and apply it, then depending on the version of IE, it will see on of the “#” or “_” prefixed styles and apply that. Being that last one wins, the paragraph block will be styled red. Mozilla on the otherhand will only see the “color: green;” style, then completely discard the “#” and “_” prefixed styles, leaving the Mozilla paragraph block green. Try it yourself in both browsers and you’ll see what I mean, hope this helps the next time you need to write browser specific CSS.

Another way to directly target a specific browser using only CSS is by use of Browser Specific class selectors. Browser specific class selectors work very much in the same way as CSS hacks, but can offer more direct browser targetting and feature selection. Take for an example, the following HTML:

<div class="example"></div> 
 
<style type="text/css">
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win .gecko .example {
background-color: red
}
.linux .gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

Each class selector specifically targets a particular browser or feature of the browser.