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=""></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");

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 */
/* applied to all versions of IE */
/* applied to IE7 */
/* applied to the latest version of Chrome */

Leave a Reply

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

You are commenting using your 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