Browser Targeting in CSS

posted on 6th July 2010 by Andy W

Having recently finished a project whose main user base use that most hated of browser (by developers at least), Internet Explorer 6, I’ve been systematically ruining my code utilising various hacks and tricks to ensure that the site looks and functions as closely as possible to that of modern browsers. This can be done in a variety of ways, but usually utilising further quirks and failings of the browser in order to provide it with one style while modern browsers are presented with another. Below is just one example of how to do this:

background:url(’../images/feature-top-right.png’) no-repeat top right !important;
background:url(’../images/feature-top-right.gif’) no-repeat top right;

This was used to circumvent the fact that IE6 doen’t display alpha transparencies in .pngs, but instead chooses a relatively arbitrary colour, which usually isn’t the same as the background it’s set in. IE6 can, however, deal with the simple transparency in .gifs, so this is a good alternative. The result of this little hack is that most browsers show the .png with anti-aliasing on the image, whereas IE6 shows a similar image which doesn’t have anti-aliasing. This does means that the edges are more jagged in IE6, but you still get the same effect as more modern browsers, in this case rounded corners on boxes. Incidentally, this can also be achieved through CSS3, but as this is less supported it’s sometimes easier to go down a different route, though I’ll be contradict myself later, so read on.

The main problems with the above method is that it’s messy, bloats already sizeable css files and throws standards out the window. You generally have to either add more properties into a rule in order to deal with the various quirks, such as adding “display:inline-block;” to help fix the extra padding bug in IE6, or add duplicate lines which are then interpreted by the various browsers differently, which just leads to frustrations when trying to review code and work out what it’s meant to do.

The above example gives the same line twice, with a slight alteration. Modern browsers get to the first line, reads that it should show the .png, that it’s important and ignore the second line. IE6, however, reads both lines and then uses the last line to show the .gif rather than the .png. However, a much more tidy way of doing this would be to separate out the various hacks, tricks and fiddles into a separate CSS files, or a section of the CSS as this would require less calls to the server, and only allow certain browsers access to certain sections of the CSS. This is precisely what an article in the August (despite it being the start of July) .net magazine details.

In the article, a method of capturing a visitors browser using $_SERVER[’HTTP_USER_AGENT’] is suggested which is used to add a class to the body which can then help filter which bits of CSS are provided to the various browsers out there. This method seems to provide a more superior way of filtering and allows targeting of lines of CSS for a specific browser allowing beautifully crafted CSS to remain intact whilst also allowing a beautiful design to be shown across a variety of browsers consistently.

Unfortunately it doesn’t get rid of having to do cross-browser testing or anything of that nature, but it does allow unsightly hacks to be separated out, kept together and hidden away in a dark corner until needed. It also means that those trendy new CSS3 techniques that have been floating around for a while can be safely utilised without fear of them only being seen by a handful of visitors and breaking the layout for others.

This handy set of tables gives a good overview of what can and can’t be used with the latest browsers. Among the new CSS3 properties is FontFace, which opens up the world of typography in a better way than other methods available (eg. cufón, sIFR), which thankfully is supported by almost all browsers, old and new, though FireFox 3 lets the side down.

In conclusion, it’s good to have a clean and tidy way of separating out the various differences in the CSS required for each browser, until such time that coding practises and standards are taken up by all browsers, everyone upgrades to the latest version and hell freezes over.