CSS Browser Selector

Clever technique to help you on CSS hacks.

Last updated: February 05, 2010 (v0.3.5)

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Writing style:

Source of this example:

 DOWNLOAD:

http://www.mediafire.com/file/2t1ja2m411anwbf/css_browser_selector.js

USAGE

1. Copy and paste the line below, inside and tag

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

• html.gecko div#header { margin: 1em; }
• .opera #header { margin: 1.2em; }
• .ie .mylink { font-weight: bold; }
• .mac.ie .mylink { font-weight: bold; }
• .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

• 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)

Available Browser Codes [browser]:

• 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
• ff3_5 - Firefox 3.5 ^new
• 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
• iron - SRWare Iron ^new

Extra Codes:

• js - Will be available when js is enable, so you can show/hide some stuffs

INSPIRATION

Original idea by 37signals.
http://37signals.com/svn/archives2/browser_selectors_in_css.php

EXTRAS

Ruby on Rails Plugin by Reid MacDonald

http://latimes.rubyforge.org/svn/plugins/css_browser_selector/

PHP CSS Browser Selector by Bastian Allgeier

http://bastian-allgeier.de/css_browser_selector/

Wordpress Plugin by Adrian hanft

http://wordpress.org/extend/plugins/browser-specific-css/

LICENSE

http://creativecommons.org/licenses/by/2.5/

AUTHOR

Rafael Lima
http://rafael.adm.br
http://twitter.com/rafaelp