Graceful Degrading Javascript ~ Add CSS With Javascript Tutorial
I've compliled/created ALL the best/easiest methods of inserting CSS via JS below. In order to enable your webpage to gracefully degrade in the absense of javascript, you often need to use javascript to add some of your CSS Styles (e.g. display:none, left:-999em, etc). Otherwise, when JS is turned off, your element is stuck on display:none. BLAH, BLAH, BLAH, I can't stand that forum lecture, so I won't give it to you. View the source code in the demo for clarification. Which Method would I use? I don't know, they're all pretty cool!
Here is the HTML for all Methods shown only once...
<p id="method1">Method #1</p> <p id="method2">Method #2</p> <p id="method3">Method #3</p> <p id="method4">Method #4</p> <p id="method5">Method #5</p> <p id="method6">Method #6</p> <p id="method7">Method #7</p>
Method 1 uses jQuery to add the class of "js-on" to the html tag. When JS is off, the class is no longer there. The class is added BEFORE page load (detailed explanation here).
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js-on');
</script>
<style type="text/css">
html.js-on #method1 {color:red;}
</style>
Method 2 also uses jQuery, but inserts the CSS style directly into the id or element you specify (e.g. #method2). When JS is off, the style is no longer added. I wrote two rules so you know how it should look. Note: the comma seperating them must stay off on the last rule otherwise IE6/7 choke.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#method2').css({
color:"blue",
fontWeight:"bold"
});
});
</script>
Method 3 simply uses document.write to add the CSS. No worry about Flash of Unstyled Content (FOUC) here, document.write writes it in where it stands. When JS is off, it simply doesn't work.
<script type="text/javascript">
document.write('<style>#method3 {color:green;}<\/style>');
</script>
Method 4 is working off the same premise, but doing it backwards. The noscript tag simply overrides the CSS when JS is off. Obviously, the least elegant of the bunch, uses the cascade to create the effect, and does not validate.
<style type="text/css">
#method4 {color:purple;}
</style>
<noscript>
<style type="text/css">
#method4 {color:black;}
</style>
</noscript>
Method 5 is pretty nifty! It's credited to Luke Smith on the Yahoo team. You simply put your CSS styles into the script (as shown below) and the script replaces itself with style tags. Cool right?! When JS is off, it doesn't work. To use, download the teeny script (script2style.js), and place this in your head.
<script type="text/javascript" src="javascript/script2style.js">
#method5 {color:aqua;}
</script>
Method 6 uses the same type of technique as Method 1, but does not rely on the jQuery library to function. This script adds the class of "js-on" to the body tag. When JS is off, the class is no longer there. Note: place the script directly below the body tag.
<style type="text/css">
body.js-on #method6 {color:yellow;}
</style>
<script type="text/javascript">
// this script must come after body
document.body.className = "js-on";
</script>
Method 7 adds the class of "js" to the html tag. When JS is off, the class is no longer there. The class is added BEFORE page load. This method is not dependent on jQuery or other. I created a seperate demo for this one because it conflicted with one of the others. I saved the BEST FOR LAST! If you like to put your JS at the bottom of your page (you should), then you may find, as I did, that some of the above methods may still briefly flash the element your trying to hide (or whatever) before it hides it. Using this method, you can put all your JS at the bottom of your page and just put this one liner after your CSS links and directly above the head tag.
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
<style type="text/css">
html.js #method7 {color:magenta;}
</style>
