CSS Browser Selector

Clever technique to help you on CSS hacks.

Last updated: Sep 17, 2008

CSS Browser Selector is a very small javascript with just one line and less than 1kb 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:

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

If the box is white, 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

Github

http://github.com/rafaelp/css_browser_selector

DOWNLOAD

git clone git://github.com/rafaelp/css_browser_selector.git

USAGE

1. Copy and paste the line above, inside <head> and </head> 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

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
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
chrome - Google Chrome

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/

CHANGELOG

0.2.9 - (September 17, 2008) Changes whitespace to \s on regexp to avoid problems on minifier process
0.2.8 - (September 03, 2008) Added 'chrome' browser code for Google Chrome
0.2.7 - (May 21, 2008) Added 'ff2' and 'ff3' browser codes
0.2.6 - (April 11, 2008) Removed unecessary spaces
0.2.5 - (October 5, 2006) Removed permanently ieMac code, bug on Opera 9 detection and now you must use ".[os].[browser]" instead of ".os .browser"
0.2.4 - Added support for opera versions: 'opera8', 'opera9', etc
0.2.3 - Added 'js' code to know when JS is disabled or not
0.2.2 - Added OS codes to be used with browser codes - M@ McCray
0.2.1 - Corrected small javascript bug in IE 5.01 - Daniel Westermann-Clark
0.2.0 - Good refactoring, small and fast script! - Steve Clay
0.1.8 - Added support for Internet Explorer on Mac OS (ieMac) - Jeff Bellsey
0.1.7 - Added 'webkit' as alias of 'safari' and well written syntax with less bytes - Jean Pierre and Micah Snyder
0.1.6 - Striped some spaces to make the file smaller and solved IE for Mac bug - Derek
0.1.5 - Added support for ie6 and appends the class names to be non-destructive - Jesse Scott
0.1.4 - Working on Safari, applewebkit was misspelled, without an p - Alex Wiltschko and Moises Kirsch
0.1.3 - Changed the js a litle to get the html tag by TagName instead of having one id - Chris Warren and Tony Nelson
0.1.2 - Changed from 'safari' to 'applewebkit/' and from 'firefox' to 'gecko/' - glasser
0.1.1 - Initial release (2006-07-19)

LICENSE

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

AUTHOR

Rafael Lima (http://rafael.adm.br)

CONTRIBUTORS

Reid MacDonald (http://geminstallthat.wordpress.com)
Vinicius Braga (http://viniciusbraga.com)
Chris Preece (http://www.mmtdigital.co.uk)
Dominykas
M@ McCray
Daniel Westermann-Clark
Steve Clay (http://mrclay.org/)
Jeff Bellsey
Jean Pierre
Micah Snyder
Derek (http://amphibian.info)
Jesse Scott
Moises Kirsch (http://www.moiblog.com/)
Alex Wiltschko
Chris Warren and Tony Nelson (http://www.imagetrend.com)
glasser

KEYWORDS

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