Code Snippet
CSS for when JavaScript is Enabled
document.documentElement.className = "js"This adds a class to the root <html>, so you could (for example) do something like hide a <div> only when JavaScript is enabled.
.js div#id { display: none; }document.documentElement.className = "js"This adds a class to the root <html>, so you could (for example) do something like hide a <div> only when JavaScript is enabled.
.js div#id { display: none; }
This doesn’t add a class to the body; it adds a class to the root element (i.e. the “html” tag)…
fixed.
The jQuery version of this (not that you really need it, but if you’re using it anyway) is:
$("body").addClass("js");I always put it right up top, with anything else that’s generic. I also usually use the class “has-js” just because a two-letter class name makes me nervous (plugins or whatnot) and it’s an eensy bit more meaningful.
I have an additional trick for you guys; Alongside this class being Added to the body, I Remove a class that was in the body tag. So a user withOut JS will get
<body class="xhtml">while a user With JS turned on will get
<body class="js">( … by removing the class ‘xhtml’ and adding ‘js’ )
= By having a default class in the body tag it makes things easier to do “flash on load” fixes like when replacing links with Flash-content f.i., plus I find that it simplifies and prettifies the CSS a whole lot ;)
I use it often to open all hidden menus, and collapse when js is enabled.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.