CSS Browser Selector- Clever technique to help you on CSS hacks.

31 Aug CSS Browser Selector- Clever technique to help you on CSS hacks.

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.

Example:

The color of box can change on different os/browsers:

• Internet Explorer – yellow
• Internet Explorer 7 – orange
• Gecko Engine on Windows (Firefox, Mozilla, Camino) – red
• Gecko Engine on Linux (Firefox, Mozilla, Camino) – pink
• Gecko Engine on Other OS (Firefox, Mozilla, Camino) – gray
• Opera – green
• Konqueror – blue
• Safari – black
• Chrome – cyan

Source of this example:

DOWNLOAD
http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js
git clone git://github.com/rafaelp/css_browser_selector.git

Usage

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

<script src=”css_browser_selector.js” type=”text/javascript”></script>

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 (all versions)
• vista – Microsoft Windows Vista new
• linux – Linux (x11 and linux)
• mac – Mac OS
• freebsd – FreeBSD
• ipod – iPod Touch
• iphone – iPhone
• ipad – iPad new
• webtv – WebTV
• j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
• blackberry – BlackBerry new
• android – Google Android new
• mobile – All mobile devices new

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
• ff3_6 – Firefox 3.6 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