Using different CSS styles in Javascript enabled browsers

Posted on by

This is an easy to implement, yet useful and possibly powerful technique. Using different CSS rules in JavaScript enabled browsers lets you customise your website styles for JS enabled and disabled browsers using only CSS.

Thus: you leave the concerns of styling strictly to CSS, and the business aspect of the website to the javascript.

All you need to do is to add some class or id to body element using JavaScript to specify that JavaScript is available. Then define two rules in your CSS file(s) for JS enabled and disabled browsers.

Here is an example for a JavaScript enabled browser:

document.getElementsByTagName("body")[0].setAttribute("class", "js");

And in your CSS file:

.aClass{
    display:block;
}
.js .aClass{
    display:none;
}

Why do I need to have a different CSS styles for jQuery enabled browser you might ask. Well, consider you have a drop-down menu on your website’s sidebar and you would like to use Javascript to make it drop down on mouse hover. This would render the element not accessible if the user has disabled Javascript on his/her browsers.

Leave a Reply