CSS Browser Selector
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.
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:
- 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
- freebsd - FreeBSD
- ipod - iPod Touch
- iphone - iPhone
- webtv - WebTV
- mobile - J2ME Devices (ex: Opera mini)
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 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 new
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
via rafael.adm.br
There's a related post over at 45 Royale. It's however the first result when I searched for this solution. This is quite a handy tool because every operating system's implementation on every browser are different in terms of font rendering. Pretty much perfect for my need.
Comments (0)