CSS Browser Selector

Clever technique to help you on CSS hacks.

Last updated: November 02, 2010 (v0.4.0)

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 JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page.

The color of this box will change on different os/browsers:

If the box is white, and you are using one of browsers above, something is wrong :-/
Help us in this case!

Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

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 <head> and </head> 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:

Available OS Codes [os]:

Available Browser Codes [browser]:

Extra Codes:

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/

CHANGELOG

LICENSE

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

AUTHOR

Rafael Lima

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

CONTRIBUTORS