Какова цель класса HTML "no-js"?

Я замечаю, что во многих шаблонных машинах, в HTML5 Boilerplate, в различных рамках и на простых php-сайтах есть no-js, добавленный в тег <HTML>.

Почему это сделано? Существует ли какое-то поведение браузера по умолчанию, которое реагирует на этот класс? Зачем включать его всегда? Означает ли это, что класс не является устаревшим, если нет случая "no-js" и html может быть адресован напрямую?

Вот пример из HTML5 Boilerplate index.html:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Как вы можете видеть, элемент <HTML> всегда будет иметь этот класс. Может кто-нибудь объяснить, почему это делается так часто?

Ответ 1

Когда Modernizr запускается, он удаляет класс "no-js" и заменяет его "js". Это способ применения разных правил CSS в зависимости от того, включена ли поддержка Javascript.

Смотрите исходный код модернизатора.

Ответ 2

Класс no-js используется библиотекой обнаружения Modernizr. Когда Modernizr загружается, он заменяет no-js на js. Если JavaScript отключен, класс остается. Это позволяет писать CSS, который легко ориентируется на любое условие.

Из Анонированный источник Modernizrs (больше не поддерживается):

Удалите класс "no-js" из элемента, если он существует: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Вот сообщение в блоге Paul Irish, описывающее этот подход: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Мне нравится делать то же самое, но без Modernizr. Я поместил в <head> <script> <script>, чтобы изменить класс на js, если JavaScript включен. Я предпочитаю использовать .replace("no-js","js") для версии regex, потому что она немного менее критическая и подходит для моих потребностей.

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

До этого метода я бы просто применил js-зависимые стили непосредственно с JavaScript. Например:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

С трюком no-js теперь это можно сделать с помощью css:

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

Это предпочтительнее, потому что:

Он загружается быстрее, не используя FOUC (вспышка неравномерного содержимого)
Разделение проблем и т.д.

Ответ 3

Modernizr.js удалит класс no-js.

Это позволяет сделать CSS-правила для .no-js something применять их только в том случае, если Javascript отключен.

Ответ 4

Класс no-js удаляется с помощью javascript script, поэтому вы можете изменять/отображать/скрывать вещи с помощью css, если js отключен.

Ответ 5

Это не только применимо в Modernizer. Я вижу, как какой-то сайт реализует, как показано ниже, чтобы проверить, имеет ли он поддержку javascript или нет.

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

Если поддерживается javascript, он удалит класс no-js. В противном случае no-js останется в теге body. Затем они управляют стилями в css, когда поддержка javascript не поддерживается.

.no-js .some-class-name {

}

Ответ 6

Посмотрите исходный код в Modernizer, этот раздел:

// Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
  var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
  className = className.replace(reJS, '$1' + classPrefix + 'js$2');
}

Итак, в основном он ищет класс классаPrefix + no-js и заменяет его классомPrefix + js.

И использование этого, отличается от стиля, если JavaScript не запущен в браузере.