I use a Javascript load event to add a new class to the BODY or DIV#container tag. The javascript function simply adds ‘.js’ to the chosen tag’s class list allowing me to write CSS for JS and non JS browsers.
For example, after the event fires…
<div id=“container”>Hello</div>
Becomes…
<div id=“container” class=“js”>Hello</div>
Now, you can write CSS styles for JavaScript enabled and JavaScript disabled states.
#container { color: #f00 }
#container.js { color:#00f }
Whats also nice about this is – the additonal ‘js’ class selector will always have higher specificity than the non-class selector so there is no issue with CSS interferance.
Keith Clark
I use a Javascript load event to add a new class to the BODY or DIV#container tag. The javascript function simply adds ‘.js’ to the chosen tag’s class list allowing me to write CSS for JS and non JS browsers.
For example, after the event fires…
<div id=“container”>Hello</div>
Becomes…
<div id=“container” class=“js”>Hello</div>
Now, you can write CSS styles for JavaScript enabled and JavaScript disabled states.
#container { color: #f00 }
#container.js { color:#00f }
Whats also nice about this is – the additonal ‘js’ class selector will always have higher specificity than the non-class selector so there is no issue with CSS interferance.