This Is How A Little jQuery Saved You From Using Hideous CSS Hacks

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 browserobject 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;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s