The .no-js class: how to add it correctly?

HTML & CSS
1

Hello,

I’d like to style my page so that people with js turned off still have a nice result. A few elements will have to be modified to achieve that. I’m going to write my css like that:

.no-js element {
...
}

I am now curious how to add the .no-js class to my <html> element.

I saw that line in html5boilerplate:


<html class="no-js" lang="en">

It doesn’t make sense to me add it as a default setting, since everybody will see the .no-js result. Am I missing something? What is the correct way to style for people with js off?

SHouldn’t I rather detect if js is on and add features based on .yes-js class?

Cheers.

:slight_smile:

2

From what I understand the JS will remove that class when running hence that ‘no-js’ will only be present if (JS has been disabled) allowing you to style a pure HTML and CSS page without any client side-scripting.

3

Hi,

I usually do what I understand to be the reverse of what you are wanting to do. Using jQuery, I add the class of js to the html tag in the following way:


<html>
<head>
<script src="jquery-1.4.2.js" charset="utf-8"></script>
<script>$('html').addClass('js');</script>
...
</head>

I know that scripts should only be loaded towards the end of your page, but I see no harm loading one script at this point, especially if it is minified or you are using a CDN and the rest of the scripts in the footer.

That way, you write your CSS in the usual way, and then only add the .js selector to the elements you want to be manipulated/affected by JS:

.js element{
...
}

This is by far the best method to achieve this sort of thing out of any I have tried.

Hope it helps.

D

4

You can use that line at the end of your script, it works.