Skip to main content

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.