Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

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 and 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 (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:

Author
Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments

Leave a Reply

You must be logged in to post a comment.