JavaScript Detection using CSS
This is a method to see wether JavaScript is enabled using CSS. This works by giving a id(or class) to the body tag with JavaScript. With this we can set CSS rules that will only apply if javascript is enabled.
Programmers always assume that browsers that are incapable of handling CSS cannot handle JavaScript also - this is true for old browsers like lynx. But there are many paranoid people who are surfing with JavaScript turned off - but still have CSS rendering ability.
The Problem
A good example for using this is in the rating system we see everywhere - the five star rating system. For creating a gracefully degrading rating form, you have to create a form, five radio buttons and a submit button to provide the most basic rating. Then the programmer would use style to hide the form and create a new div with 5 stars for the visitor to click on. The clicking will be handled with(...drumroll...) AJAX! And all is well with the world.
The CSS code for the above example will be something like...
#rating-form {display:none;}The problem comes when some of the fore mentioned paranoids visit the site. They have CSS - so the form will be hidden. But they don't have javascript - so the 'insert-new-div-with-images' idea will not work. The result - they will not have minimum functionality.
The Solution
The most obvious way to solve this problem is to use javascript to hide the element. Like this...
document.getElementById('rating-form').style.display = 'none';But that is using presentation elements in the behavior layer. The puritans will have a fit if they see that.
The next option is to give the element a class and hide that class using CSS...
document.getElementById('rating-form').classname = 'hide-me';.hide-me {display:none;}But what happens if there is a lot of rating forms? You will have to give the classname to each element.
JavaScript Detection using CSS
So what I propose to do is give the body element a id, say, 'main-body' using javascript.
document.getElementsByTagName('body')[0].setAttribute('id','main-body');Next, using the ' '(space) descendant selector of CSS, do everything that should be done if javascript is enabled. Like this...
body#main-body #rating-form {
display:none;
}And all is well with the world once again.
Demo
See a very simple demo of JavaScript Detection with CSS...
Enable/Disable JavaScript and Refresh the page to see the change.
Comments
Thank you for this.
document.getElementById("content").className = "yesjavascript";to set the class. This should be directly under the opening <div id="content" class="nojavascript"> tag (and not in an onload handler) to prevent flicker. The reason for the naming is simple: Everyone who looks at any portion of the code or the css knows exactly what it does.Fozi
css-lessons.ucoz.com/css-layer-properties.htm
This helped me a lot.
I'm setting the body tag to id="if-js-on", which helps to see, in the CSS, what's being applied to what.
In my particular case, I was using javascript to toggle an element (DIV) on, then off, which is simple enough, but degraded poorly, because the inline CSS initially set the DIV to display:none.
My interim solution was to point the HREF at a non-js document that contained the "hidden" DIV content.
Silly though, as a much better solution is to use (the above) javascript to set the body ID, which then allows one to set the DIV display value to "none", only for js-enabled browsers.
Now I've got my js-enhanced page toggle AND a gracefully degrading non-js page ... all in one document. *happiness*
Thanks for taking the time to post this and make the demo. ;-)
oh ... one thing of note. If you put the js below the <body> tag, the onload bit is obviated.
i.e.,
----------------------------------- this
<script type="text/javascript">
document.getElementsByTagName('body')[0].setAttribute('id','if-js-on');
</script>
</body>
----------------------------------- instead of
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName('body')[0].setAttribute('id','main-body');
}
</script>
<body>
-----------------------------------
(Not a js guru, but I'm wondering why - in your demo - you put the js in the <head>, thus needing the onload? Is there some advantage I don't know about?)
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.