WyseLabs Internet Marketing Forum :: Start Sharing

by **silvester** » Tue Jan 27, 2009 1:48 am

I have found a code called CSS Browser Selector which 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. You need to include the js file and use the style.

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
* freebsd - FreeBSD new
* ipod - iPod Touch new
* iphone - iPhone new
* webtv - WebTV new
* mobile - J2ME Devices (ex: Opera mini) 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
* 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 new
* chrome - Google Chrome

Extra Codes:

* js - Will be available when js is enable, so you can show/hide some stuffs

Example code

<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>

css_browser_selector.js.zip
Attachments:

by **Sreedhar** » Tue Jan 27, 2009 1:50 am

This is an awesome find, indeed!

by **finoy** » Tue Jan 27, 2009 1:52 am

Thanks Silvester. It’s very helpful to designers and it's very simple to implement.

Yesterday I had a problem with CSS, and then I got another Conditional CSS script http://conditional-css.com/ . Its on server side but its not so easy to implement when compared to the above mentioned script.

WyseLabs Internet Marketing Forum :: Start Sharing

Conditional CSS

Conditional CSS

Re: Conditional CSS

Re: Conditional CSS

Who is online