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).

<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() {
<style type="text/css">
body {
div#blinky {
<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>

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.


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.

  • 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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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