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>

Screenshots on Browsercam

Chris Preece contributed with some images

DONATE TO SUPPORT

I need to update this script every time a browser is released with new UserAgent string.

This is a little effort, but certainly with your donation I will do it happier :)

Click here to lend your support to: css_browser_selector and make a donation at www.pledgie.com !

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/

Goodies

CHANGELOG

LICENSE

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

AUTHOR

Rafael Lima

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

CONTRIBUTORS

KEYWORDS

css javascript script cascading style sheets cross browser cross-browser browsers bug ie internet explorer konqueror safari opera firefox chrome hack tip trick selector