Changing look of website, if Javascript is disabled

There is a nifty trick, that allows you to change look&feel of your website and even hide certain elements on it, in case user has disabled Javascript in his or her browser.

Facebook is not working, when Javascript is disabled and world collapses, when Facebook is not working, thus no one serious is disabling Javascript nowadays.

Yet, I still think that a good web developer should be prepared for everything. Even for JS turned off…

Let’s get to work. Prepare two blocks of CSS. First for non-Javascript version of webpage (i.e. code that hides certain things, changes some elements etc.

#otherSites > li a:after {content: ""}
#otherSites > li a:before {content: ""}
#otherSites > .title {display: none}

Now, prepare the same block of elements and styles, that shows, what is supposed to be shown, when Javascript is enabled. This block should overwrite above block, i.e. should have the same elements listed:

.jsEnabled #otherSites > li a:after {content: "visit"}
.jsEnabled #otherSites > li a:before {content: ">"}
.jsEnabled #otherSites > .title {display: block}

Now, write a simple Javascript code, that will add .jsEnabled class to body element upon page init.

And voila! If Javascript is disabled then .jsEnabled class won’t be added to body and extra styles from second block of CSS code will be ignored.