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

510

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

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

javascript html modernizr html5boilerplate Swader
источник

Ответы:

493

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

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

Григорий Пакош
источник
5
Здесь есть еще одна замечательная статья
Ханнеле,
47
Поскольку Modernizr заменяет «no-js» на «js», вы можете использовать это как способ сделать эквивалент оператора if / else в вашем CSS-коде. Например .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }и .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Надеюсь это поможет. Ник
skcin7
33
@Ringo: HTML 5 указывает, что любой элемент может иметь classатрибут. Хотя HTML 4 технически этого не делает, браузер не захлебывается им; даже те, которые не поддерживают его, просто игнорируют его, и я не видел ни одного из этих браузеров годами.
cHao
4
@ZachL Я понимаю, что, должно быть, здесь курю крэк, но мне кажется, что .js { padding: ...}это прекрасно, поскольку вы знаете, как тот, кто это реализовал, body = .js. Точнее, кажется, вы заявляете, что body.jsэто хуже, чем то, за чем .js bodyя не следую ...
wired_in
4
Стоит отметить, что html5-шаблон <html>содержит его, и никаких проблем против этого не было. Каким-то образом надеть это <html>стало установившейся практикой, и люди сразу же знают, что это такое и что оно делает. В конце концов, отклонение от этой практики просто вызывает больше вопросов.
Грегори Пакош
109

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

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

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

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

Мне нравится делать то же самое, но без Модернизра. Я поставил следующее <script>в <head>изменить класс , 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 (флеш-контент без стилей)
  • Разделение проблем и т.д ...
Зак Лисобей
источник
1
Версия Modernizr, использующая RegExp, безопаснее (и, вероятно, быстрее).
AndrewF
@AndrewF - не могли бы вы немного рассказать об этом? Как именно это безопаснее?
Зак Лисобей
12
@ZachL Версия регулярного выражения (с \b) не совпадает с чем-то вроде anno-jsus, другой изменяет это на anjsus. no-jsне является типичной подстрокой для какого-либо имени класса, но все же в этом отношении «безопаснее» с \bs.
Cucu
40

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

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

SLaks
источник
17

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

Марк
источник
Вы сказали: «Класс no-js удаляется скриптом javascript». Итак, как работает Javascript (возможность удалить класс no-js), если он отключен. Не могли бы вы дать мне понять?
произойдет
2
Вы правы, и в этом суть: если JavaScript отключен, класс останется, и вы можете, например, показать некоторую HTML-часть, используя CSS, чтобы предупредить пользователя об этом. .no-js #js-warning {display: block;}
Марк
Имейте в виду, что ошибки JS могут возникать после того, как Modernizr сделал это, поэтому не является надежным способом тестирования JS
htmlr
11

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

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

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

.no-js .some-class-name {

}
Физер Хан
источник
4

Посмотрите на исходный код в 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-jsclass и заменяет его на classPrefix + js.

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

Алиреза
источник
1

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

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

нет-JS

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

JSON C11
источник