I see couple of questions in the forum asks what is the best solution to check if the user browser support JavaScript or if the JavaScript is disabled in the browser.
I want to share my experience, and write the best technique i found to come across this issue (any suggestions will be welcome).
In short this achieved by using <noscript> tag (HTML tag) instead of jQuery show()/hide() solution that i see most, which will show the you a noising flashy message .
there is tow ways to do this:
1. only message:
<html>
<head>
<noscript>
Your browser does not support JavaScript! or JavaScript is disabled.
</noscript>
<!-- don't forget to import your jQuery somewhere in the head -->
</head>
<body>
<div id="content" style="display:none;">
<!-- your web site content is here -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#content").show();
});
</script>
</body>
</html>
2. Redirect the visitor:
<html>
<head>
<noscript>
<meta http-equiv="refresh" content="0; URL=http://www.google.com/"/>
</noscript>
<!-- don't forget to import your jQuery somewhere in the head -->
</head>
<body>
<div id="content" style="display:none;">
<!-- your web site content is here -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#content").show();
});
</script>
</body>
</html>
of course you have to change http://www.google.com/ to your page that supports a non-JavaScript browsing.
you may also redirect the visitor after couple of seconds and put the message before moving to other page.
and you can redirect a users to an Action in your default controller to save a session or cookie for example and always show a non-JavaScript content to this particular visitor to avoid a lot of redirecting.
but this way we will facing the same problem if the JavaScript is enabled (i mean flashing content), ex: if the background-color for .no-js class is red then we will see a flashy red before the actual content appear.
to solve this i think we will add a new element to our <noscript> tag which is a link to a no-js.css file like this
<html>
<head>
<noscript>
<link rel="stylesheet" type="text/css" href="path/to/no-js.css" />
Your Browser should enable JavaScript !
</noscript>
<!-- don't forget to import your jQuery somewhere in the head -->
</head>
<body>
<div id="content" style="display:none;">
<!-- your web site content is here -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#content").show();
});
</script>
</body>
</html>
and we MUST but the <noscript> tag after main css link tag because we have to override the main css body tag which will be written inside no-js.css
you can test that flashy content by: $("body").removeClass("no-js");
@jacmoe: really great resource thank you, i have to study the whole Boilerplate template not just modernizr since it is cross-browser and support html5, and i think it is the time that i have to move on and look at HTML5