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