Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I need an efficient and aesthetically-pleasing way to gracefully degrade site appearance for users with Javascript disabled and, while I am not aware of any problem with adding a link to an alternative stylesheet wrapped in noscript tags in the document header w/HTML5, I figured it couldn't hurt to ask before going that route.

Update: Example document to demonstrate undesirable behavior when using JS to hide elements

This document reliably shows a red blink while the browser repaints the window contents when I test with a hard refresh in Internet Explorer 8.0 (note that I had to add a fairly large image to get IE to exhibit this behavior - I expect that this will appear in IE whenever resources are low).

<html>
<head>
<title>See the blink?</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#blinky').css('display','none');
});
</script>
<style type="text/css">
body {
    background-color:#000000;
}
div#blinky {
    background-color:#FF0000;
    position:absolute;
    height:100%;
    width:100%;
}
</style>
</head>
<body>
<img src="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" height="1" width="1" />
<div id="blinky">
<h1>Did you see it?</h1>
</div>
</body>
</html>

I refuse to upgrade until I absolutely have to, so I believe my somewhat-underpowered desktop is representative of the lowest common denominator of the user experience; I can't guarantee that you'll be able to duplicate on a high-end machine with ample resources available but you're welcome to give it a try to see what I mean.

share|improve this question

1 Answer 1

up vote 10 down vote accepted

In general it's better to use progressive enhancement rather than graceful degradation. This means essentially starting with the content as if the user has no scripting, then using Javascript to enhance the page.

For example, you might start with a link/button that goes somewhere or submits a form. Then you add Javascript that prevents naivgation/submission and does something else instead.

For your specific case, I can't think of a good reason to add a stylesheet in noscript tags. Why not add the styles to your main stylesheet? If there is a clash of styles, I would start with the noscript ones applied then use Javascript to add a single class/ID on a parent element which changes the styles.

share|improve this answer
1  
+1 Perfect answer –  John Conde Nov 11 '10 at 12:47
2  
RE: progressive enhancement - you're preaching to the choir, however, as this is a case where I can't wait for Javascript to hide the content as the page loads, (that behavior is not aesthetically pleasing to the artist I'm designing the site for) I am looking for caveats specific to using noscript in this manner. –  danlefree Nov 11 '10 at 13:44
    
If you run your javascript after the DOM has loaded but before the page is displayed they shouldn't be seeing anything actually happen on screen. –  John Conde Nov 11 '10 at 17:11
    
@John Conde - Added an example document which exhibits the behavior in question when viewed in IE 8.0 on my machine. –  danlefree Nov 11 '10 at 17:54
    
My question was a lame duck (in the future I'll know not to ask "why not" questions) and your answer represents best practices, though HTML5 does allow <noscript> in the header and IE continues its regrettable glitchiness. –  danlefree Dec 29 '10 at 19:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.