CSS Browser Selector
Simple trick to help you on CSS hacks!
Official Page:
http://rafael.adm.br/css_browser_selector/
EXAMPLE
With this script you can set a different background color of one div for each browser.
- Internet Explorer – yellow
- Firefox – gray
- Opera – green
- Konqueror – blue
- Safari – black
Source of this example:
<div class="example">
<style type="text/css">
.ie .example {
background-color: yellow
}
.gecko .example {
background-color: gray
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.safari .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
</style>
DOWNLOAD
css_browser_selector.js.txt (> 1KB)
Rename this file from .js.txt to .js before using
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 the CSS attributes putting the code of the browser
Examples:
- html.gecko div#header { margin: 1em; }
- .opera #header { margin: 1.2em; }
- .ie .mylink { font-weight: bold; }
Available Browser Codes:
- ie – Internet Explorer
- gecko – Mozilla, Firefox, Camino
- opera – Opera
- konqueror – Konqueror
- safari – Safari
INSPIRATION
Original idea by 37 signals.
http://37signals.com/svn/archives2/browser_selectors_in_css.php
TO DO
- Rails plugin
LICENSE
http://creativecommons.org/licenses/by/2.5/
AUTHOR
Rafael Lima (http://rafael.adm.br)
KEYWORDS
css javascript script cascading style sheet cross browser cross-browser browsers bug ie internet explorer konqueror safari opera firefox hack tip trick
Hi,
For some reason it is not working on Safari.
This is a grat idea… I love that someone actually did it.
Hi,
Me again…
I found the problem.
Theres a typo in the user agrent of Safari… it should be apple not aple.