What I have here for you today is an unassuming snip of jQuery designed to circumvent the perils of the Browser-Specific CSS Hack. However tempting they may be to paste in for a quick fix, these disgusting pimples of software of are full of nasty preservatives that throw one's humours into ill balance, and they do not belong in the style sheets of a professional-grade web site.
The code itself uses jQuery's browser object to build CSS class names out of the browser and version in use, and adds them to the page's <body> tag.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// get browser/version
var agent = "unknown";
var version = $.browser.version.replace(/\./g, '-');
if ($.browser.msie) agent = "msie"; // Microsoft Internet Explorer
else if ($.browser.mozilla) agent = "mozilla"; // Mozilla Firefox
else if ($.browser.webkit) agent = "webkit"; // Apple Safari or Google Chrome
else if ($.browser.opera) agent = "opera"; // Opera
// add them as classes on the body tag
$(document).ready(function () {
var body = $("body");
body.addClass(agent);
body.addClass(version);
});
</script>
This then allows you, dear developer, to carve out browser/version-specific style attributes, while still leaving behind code that is human-readable and not at all reliant upon an instability in someone else's software.
Behold—readable and precise browser dodging:
/* applied to all browsers */
ul.menu
{
list-style:none;
}
/* applied to all versions of IE */
.msie ul.menu
{
margin:5px;
}
/* applied to IE7 */
.msie.7-0 ul.menu
{
list-style-image:none;
margin:0px;
}
/* applied to the latest version of Chrome */
.webkit.6-0-472-53 ul.menu
{
padding-top:-10px;
border-radius:5px;
}