Import css_browser_selector.js in your head section
- Internet Explorer - yellow
- Internet Explorer 7 - orange
- Gecko Engine on Windows (Firefox, Mozilla, Camino) - red
- Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink
- Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray
- Opera - green
- Konqueror - blue
- Safari - black
- Chrome - cyan
Example
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="css_browser_selector.js"></script>
<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>
</head>
<body>
<p class="example"> Hi Test </p>
</body>
</html>
