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

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

489 голосов
/ 17 июля 2011

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

Почему это сделано? Есть ли какое-то поведение браузера по умолчанию, которое реагирует на этот класс? Зачем включать это всегда? Разве это не делает сам класс устаревшим, если нет префикса no-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> всегда будет иметь этот класс. Может кто-нибудь объяснить, почему это делается так часто?

Ответы [ 7 ]

472 голосов
/ 17 июля 2011

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

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

104 голосов
/ 13 сентября 2012

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

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

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

Вот запись в блоге Пола Айриша, описывающая этот подход: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

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

<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 (флэш-содержимое без стиля)
  • Разделение интересов и т.д ...
40 голосов
/ 17 июля 2011

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

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

17 голосов
/ 17 июля 2011

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

11 голосов
/ 01 августа 2014

Это применимо не только в Модернизаторе.Я вижу, как какой-то сайт реализован, как показано ниже, чтобы проверить, поддерживает ли он 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 {

}
4 голосов
/ 10 июня 2017

Посмотрите на исходный код в 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');
}

Так что в основном он ищет classPrefix + no-js class и заменяет его на classPrefix + js.

И использование этого, стилизация по-другому, если JavaScript не работает в браузере.

0 голосов
/ 31 октября 2018

Класс no-js используется для стилизации веб-страницы, в зависимости от того, отключен ли JS или включен в браузере.

Согласно документам Modernizr :

no-js

По умолчанию Modernizr перепишет <html class="no-js"> to <html class="js">. Это позволяет скрыть определенные элементы, которые должны быть только подвергается в средах, которые выполняют JavaScript. Если хотите отключив это изменение, вы можете установить enableJSClass в false в вашем конфигурации.

...