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.
