1. The message
First is the message that will be displayed if JS is not enabled. Put this where it will be most visible, such as the top of the page.
Your browser does not appear to have JavasScript enabled. Please be advised that some
functionality may be missing as a result.
2. The script
Second, we need to test whether or not JS is enabled. This is done, not surprisingly, by trying to run a script. This simple one-liner adds an attribute to the page's
html tag; because it is run after the page has been loaded into the browser, it will not interfere with standards validation even though the tag being added is non-standard.
3. The style
Lastly, we add two pieces of code to the page's style. The first tells the browser how to render the message
div. If JS is enabled -- that is to say, if the
html tag has our attribute -- the second style uses an attribute selector to instruct the browser not to render it at all.
border: solid 1px #CCCCCC;
margin:0 auto 1em auto;
That is to say, the first style is always applied, but if the
html tag has an attribute
js-enabled, and the attribute has a value of '1', then do not display any
divs with a class of
How can you test that everything meets expectations? Simply change the second style block to test for
js-enabled='0'. Since the attribute will be set to '1', the test fails and the
For my needs, I have added the message at the top of the main master page, with the JS and CSS in the global .js and .css file used across the site. This ends up putting the message on pretty much every page: a not-so-subtle reminder to our users that they are seeing a crippled version of the site. We can do this because our site is available only to our field reps; if this were a public site, we might show this more sparingly, such as just on the home page or as a note in the page footer. Since this uses a class rather than an ID, I could also put the same or different warning in several locations.
So, there you are: a quick, light weight method to warn your users that they will not have an optimal experience on your web site. If you come up with any interesting uses for this trick, please share it in the comments.