Valentin Agachi

freelance web developer

request quote!

Avoiding CSS hacks using Javascript

What if you won't have to code those ugly CSS hacks for those browsers that just won't show you what you want them to?

I've just realised a few days ago, that we can use one trick to ease the CSS writing. One trick which relies on something that is very trendy: Javascript. It just happened, that in the same time other have thought the same thing, like svn and Rafael Lima

Almost everyone has Javascript enabled in their browser these days, so it seems like the perfect way to go, when we have so many browsers to care for now.

Rafael provided a solution with pure javscript. I, for one, am addicted to the jQuery library, and will present how to do these browser selectors so easily with jQuery.

Update: The following code will work with stable versions of jQuery from 1.0 and upwards: (props to Paul Irish guru)

$.each($.browser, function(key, val) {
    if (val)
        $('html').addClass('js')
            .addClass(val > 1 ? 'ver-' + parseInt(val) : key);  
});

Available classes: .msie, .mozilla, .opera, .safari, .ver-version

First thing you need to do, is to get the jQuery library, version 1.0a, if you don't have it yet.

Now all you have to do is include the jQuery file, and the following piece of code:

$(document).ready(function(){
	$('html').addClass($.browser);
});

Now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser.

And about the small percent who have javascript disabled, who cares? :) Just kidding! Well, for those people you can provide separate styles, ensuring a smoothly degrading, just like for those people with old browsers which don't support CSS 2.

You can do this in two ways: by declaring your styles for no javscript like you would normally would in CSS, and if you have a special style for an element which needs to have javascript enabled you can do the following:

$(document).ready(function(){
	$('html').addClass('js').addClass($.browser);
});

Now you can define your styles for those without javascript by simply specifying the selector, the general styles for those with javascript on the selector preceded by .js, and for each browser in part the same but with the name of the browser instead of "js"

Check out how easy it is to do it: example page

Comments

at 18:37 on 23/Mar/2009

Paul Irish

Comment by Paul Irish

FYI this technique doesnt work anymore. It gives the error: TypeError: (classNames || "").split is not a function

Here is a a revised version that works:
jQuery.each(jQuery.browser,function(brow,bool) {        
  !!bool && jQuery("html").addClass(brow); 
});

Who's this guy?

Hello! I am Valentin Agachi, an ambitious web developer, and you are viewing my site and weblog.

If you care to find more details about me, you can check out my CV page, or you can contact me.

Valentin Agachi's profile on LinkedIn Download vCard

© 2003-2014 Valentin Agachi. All rights reserved.