CSS Browser Selector Clever technique to help you on CSS hacks.
Posted on October 22, 2012 | No Comments
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.
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
USAGE
1. Copy and paste the line below, inside
<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 (all versions)
vista – Microsoft Windows Vista new
linux – Linux (x11 and linux)
mac – Mac OS
freebsd – FreeBSD
ipod – iPod Touch
iphone – iPhone
ipad – iPad new
webtv – WebTV
j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
blackberry – BlackBerry new
android – Google Android new
mobile – All mobile devices new
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
ff3_6 – Firefox 3.6 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
Incoming search terms:
- css browser selector (24)
Tags: CSS Browser Selector | CSS Hacks | CSS Tip & Tricks
Comments
Leave a Reply
You must be logged in to post a comment.