Slick JavaScript-based browser-specific CSS helper

Here's a nifty tool for your bag of tricks: JavaScript snippet that tags HTML elements with browser- and OS-specific attributes so you can target browser- and OS-specific 'peculiarities' without resorting to the usual bizarro selector tricks or Internet Explorer-specific conditional comments.

Using this script, you can target browser-specific elements via simple CSS selectors as follows:

.ie6 #targetElement { border: solid 1px #eee; }

OS Codes

win - Microsoft Windows
linux - Linux (x11 and linux)
mac - Mac OS

Browser 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
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
chrome - Google Chrome

This only helps with JavaScript-enabled browsers, but it's an interesting alternative to the usual CSS madness.

Posted by: Mike on Wed, 09/10/2008 at 5:24pm

Post new comment

This helps us decide if you are a human, and not just some visiting bot.
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <h3> <h4> <br> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
More information about formatting options