Pure CSS noscript Message - W3Programmers

Pure CSS noscript Message

StackOverflow noscript message

Example: Stack Overflow

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…


What we’ll be making

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


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

    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;


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

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


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  Web Developper Addon Page

Now you can Disable Javascript from this toolbar like so:disabling Javascript in Firefox

In Chrome

Type this into chrome’s address bar…


and change the settings, then press “Done

disabling javascript in Chrome

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

Leave a Reply

Your email address will not be published. Required fields are marked *