CSS Browser Selector
Despite valiant efforts to get browser manufacturers to standardize browser specifications, each browser has the capacity to render the same code differently. As a result, we have a fairly intensive browser testing process that we’ve integrated into our work flow. Some browsers are more consistent than others, but there are enough discrepancies between them that you can’t offer a consistent experience without testing your code in every browser.
Too many browsers, not enough time
In recent years, our job has become more difficult due to fact that the number of browsers in the market is increasing. Although requirements vary from project to project, at any given point we could be supporting multiple versions of Internet Explorer, Firefox, and Safari to say nothing of contending with the rendering differences between OS X and Windows in versions of the same browser.
One of the ways we’ve addressed this issue in the past is having conditional stylesheets that are used to target browser-specific differences in our code. This enables us to keep browser hacks out of our stylesheets and only bring in additional declarations when the situation absolutely calls for it. However, aside from using the tried and true methods for targeting the various versions of Internet Explorer (see code below), there really isn’t a great way to target other browser types without resorting to hacks or a few antiquated scripts.
1 2 | <!-- [if IE 6]><link rel="stylesheet" href="http://yoursite.com/css/ie6.css" type="text/css" /><![endif] --> <!-- [if IE 7]><link rel="stylesheet" href="http://yoursite.com/css/ie7.css" type="text/css" /><![endif] --> |
Luckily we’ve found a pretty handy script, called the CSS Browser Selector written by Rafael Lima, that lets you write CSS declarations that target each browser on each operating system. The javascript is fairly small (only 1 line) and once you reference the file on your page, all you have to do is slightly alter your CSS declarations to target a specific browser by adding certain OS and Browser codes to the selectors. The syntax is fairly easy to get used to, all you have to do is start your selector with .OS_Code .Browser_code and then you’re on your way!
I would highly recommend giving this script a shot if you’re trying to keep a consistent browsing experience or if you’re trying to nail down a browser specific bug. Below you’ll find a list of codes for each supported OS and browser.
OS specific codes:
- win – Microsoft Windows
- linux – Linux (x11 and linux)
- mac – Mac OS
- freebsd – FreeBSD
- ipod – iPod Touch
- iphone – iPhone
- webtv – WebTV
- mobile – J2ME Devices (ex: Opera mini)
Browser specific codes:
- ie – Internet Explorer (All versions)
- ie8 – Internet Explorer 8.x
- ie7 – Internet Explorer 7.x
- ie6 – Internet Explorer 6.x
- ie5 – Internet Explorer 5.x
- gecko – Mozilla, Firefox (all versions), Camino
- ff2 – Firefox 2
- ff3 – Firefox 3
- opera – Opera (All versions)
- opera8 – Opera 8.x
- opera9 – Opera 9.x
- opera10 – Opera 10.x
- konqueror – Konqueror
- webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
- safari3 – Safari 3.x
- chrome – Google Chrome
I’d be happy to answer any questions you may have on when or how to use the script. If you’d like a complete list of examples and use cases, please visit the original developer site.
Great post! I’m looking forward to the day when all browsers will be standards-compliant, until then we’ll have to deal with what we’ve got.
This is a great resource! I’ll most certainly use this on future projects! Thanks a lot!
I’ve been using this on my projects that I create for over 6 months now and it’s wonderful, one of the best tools that I have for development and testing.
Awesome, glad you guys like the post! Browser testing can be frustrating at times, but this method at least gives me a clean way to target any browser I want. @Daniel, I’ll second what you said, it is definitely one of the best tools I have in my browser testing arsenal.
Sounds great, but what if the user has javascript disabled?
Jon, thanks for the comment! You bring up a good point, and it’s one we definitely considered before we started our last redesign effort. The good news is, if a user has javascript disabled, a site should still be usable, they just won’t have as good of an experience as someone who has it enabled.
It’s hard to find actual data on how many users have javascript disabled, but according to browser statistics like this one from w3schools.com, only about 5% of internet users have javascript disabled. It’s hard to validate these numbers since lot of software tracking packages, like Google Analytics, rely on javascript to capture data. As a result, visitors with javascript disabled are absent from many statistic reports.
For sites that we build and maintain, including 45royale.com, we want to have pages render well across as many browsers as possible without weakening the design. There are a lot of browser hacks available that we’ve used in the past to achieve this effect, but they aren’t nearly as robust and clean as this script. For us, we’d rather use a script like this to offer a great experience to 95% of internet users regardless of their browser vs. having to pair back on the design of a new site in order to appeal to that remaining 5% of users.