Pure CSS noscript Message

Sometimes some users have their Javascript Disabled for some reason, but what ever that reasonis, heres a simple way to notify them that their Javascript is disabled…

You see that gray bar on the top with the “Please turn on Javascript” Message? yeah, thats what’ll we’ll be making here…

The CSS

Put this css code into a file, example “noscript.css”

body:before{
    content: 'Please turn on Javascript';

    color: white;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-align: center;

    width: 100%;
    padding: 1em 0;

    background: rgba(0,0,0,0.9);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

The HTML

just put this HTML code inside your body tag…
Note: In the new HTML5 it is absolutely valid to define links to Stylesheets inside the body tag….

<noscript>
	<link rel="stylesheet" type="text/css" href="noscript.css">
</noscript>

Explanation

Pseudo: Latin for False

This NoScript message relies on CSS3 Peuso Elements, especiall the :before element and HTML’s <noscript> tag.

The :after selector(not really a selector) here creates a new element before the body tag, but it does not show up in the DOM Tree as it is not a real element. This element can only be accessed and styled through css.

Here when the browser detects no javascript support it loads up the noscript CSS file. The content property is mandatory for pseudo elements as without it it will not render. The other styles are quite self explanatory. Notice on the last line the z-index is set exceptionally high.. this is so that the bar stays on top of all the defined elements in the body however deep they are nested.

How to Test <noscript/>

In Firefox

First Install the Web Developer Toolbar 

Now you can Disable Javascript from this toolbar like so:

In Chrome

Type this into chrome’s address bar…

chrome://settings/content

and change the settings, then press “Done”

Now just go to the URL of the site you added this to for testing…
Good Luck.