Clever technique to help you on CSS hacks.
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
http://rafael.adm.br/css_browser_selector/
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>
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
<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
- 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