Conditional CSS
Posted: Tue Jan 27, 2009 1:48 amI 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:
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:
