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

Я заметил, что во многих механизмах шаблонов, в 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
person Swader    schedule 17.07.2011    source источник

Ответы (7)


arrow_upward
514
arrow_downward

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

См. исходный код Modernizer.

person Gregory Pakosz    schedule 17.07.2011
comment
Здесь есть еще одна замечательная статья: alistapart.com/articles/ - person Hannele; 28.02.2012
comment
Поскольку 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. */ }. Надеюсь это поможет. -Ник - person skcin7; 22.08.2012
comment
это немного раздражает, потому что тегу html не должно быть присвоено имя класса. - person Ringo; 24.08.2012
comment
@Ringo: HTML 5 указывает, что любой элемент может иметь атрибут class. Хотя HTML 4 технически этого не делает, ни один браузер не подавляется этим; даже те, которые не поддерживают его, просто игнорируют его, и я не видел ни одного из этих браузеров годами. - person cHao; 05.11.2012
comment
Разве это не то же самое, что добавить его в тег ‹body› и избавить от неприятностей? - person Juan; 13.11.2013
comment
@Juan, который потенциально может создать больше проблем. Использование класса с body в отличие от любого другого элемента будет выполняться иначе: (body.js vs .js p). Кроме того, как указал Чао, наложение его на тело на самом деле не избавляет от каких-либо проблем. - person Zach Lysobey; 23.01.2014
comment
@ZachL А? что не так с тем, чтобы положить его на тело и использовать тот же код css (.js p) - person wired_in; 14.03.2014
comment
@wired_in Представьте, что вы хотите добавить отступ к элементу <body>. Вам нужно будет сделать body.js{padding:...}, тогда как любой другой элемент, который вы можете сделать .js element {padding:...} (.js body... не будет работать). Это второстепенный момент, но он просто немного более согласован и, соответственно, лучше. - person Zach Lysobey; 14.03.2014
comment
@ZachL Я понимаю, что, должно быть, курил здесь крэк, но мне кажется, что .js { padding: ...} в порядке, поскольку вы знаете, как тот, кто реализовал это body = .js. Если говорить более конкретно о вашем вопросе, похоже, вы утверждаете, что body.js хуже, чем .js body, за которым я не слежу ... - person wired_in; 14.03.2014
comment
@ZachL Кроме того, если ваш единственный аргумент состоит в том, что каждый раз, когда вы ссылаетесь на .js, он должен оставаться согласованным и включать подкласс или подэлемент, такой как .js element, вы ведете себя так, как будто никто никогда не добавляет css к элементу html. Подумайте, что css сбрасывает и стили по умолчанию, поэтому здесь применима та же логика. Я действительно не понимаю, откуда вы. Пока вы знаете, что корневой элемент body, в этом нет ничего плохого. Ваша единственная проблема была бы в том, если бы вам абсолютно необходимо было добавить стили к элементу html и только тогда, когда элемент html имел .js или .no-js - person wired_in; 14.03.2014
comment
@wired_in какие дополнительные преимущества вы получите, если вместо этого включите <body>? - person Zach Lysobey; 14.03.2014
comment
@ZachL Я не вижу дополнительных преимуществ, но, конечно, нет ничего плохого в том, чтобы поставить его на <body>, как вы утверждали. Вы получаете те же преимущества, что и <html> - person wired_in; 14.03.2014
comment
@ZachL На самом деле это не имеет большого значения, но размещение атрибута class в теге html даст небольшое преимущество в виде соответствия спецификации HTML ‹5. Меня совсем не подвели в ту или иную сторону какие-либо другие аргументы по этому поводу. - person Hart Simha; 22.06.2014
comment
Стоит упомянуть, что шаблон html5 помещает его на <html>, и ни разу не сообщалось о проблемах с этим. Каким-то образом надевание его на <html> стало установившейся практикой, и люди сразу понимают, что это такое и для чего он нужен. В конце концов, отклонение от этой практики вызывает больше вопросов. - person Gregory Pakosz; 23.06.2014
comment
Неплохо подмечено. Если изменить его сейчас, возникнут ненужные проблемы с незначительной пользой. - person Hart Simha; 24.06.2014
comment
@cHao ты знаешь, что <html class="default"> означает? - person Shaiju T; 12.09.2016
comment
@stom: это означает, что элемент документа (в основном корневой узел) имеет класс с именем default. Вот и все. Браузер не особо заботится о классах; они упрощают использование скриптов и таблиц стилей. Единственные изменения функциональности или внешнего вида страницы - это те, которые вызваны вашим JS и / или CSS. - person cHao; 17.09.2016

arrow_upward
116
arrow_downward

Класс 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/

Мне нравится делать то же самое, но без 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 (мигание нестилизованного содержимого)
  • Разделение проблем и т. Д.
person Zach Lysobey    schedule 13.09.2012
comment
Версия Modernizr с использованием RegExp более безопасна (и, вероятно, быстрее). - person AndrewF; 18.08.2013
comment
@AndrewF - не могли бы вы немного рассказать об этом? Насколько это безопаснее? - person Zach Lysobey; 05.09.2013
comment
@ZachL Версия регулярного выражения (с \b) не соответствует чему-то вроде anno-jsus, другая меняет ее на anjsus. no-js не является типичной подстрокой любого имени класса, но в этом отношении безопаснее использовать \bs. - person Andras Nemeth; 22.09.2013

arrow_upward
41
arrow_downward

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

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

person SLaks    schedule 17.07.2011

arrow_upward
17
arrow_downward

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

person marc    schedule 17.07.2011
comment
Вы сказали, что класс no-js удаляется сценарием javascript. Итак, как работает Javascript (можно удалить класс no-js), если он отключен. Не могли бы вы дать мне ясное представление? - person haind; 26.12.2013
comment
Вы правы, и в этом суть: если JavaScript отключен, класс останется, и вы можете, например, показать некоторую html-часть с помощью CSS, чтобы предупредить пользователя об этом. .no-js #js-warning {display: block;} - person marc; 14.01.2014
comment
Имейте в виду, что после того, как Modernizr сделал это, могут возникнуть ошибки JS, поэтому это не надежный способ тестирования работы JS. - person htmlr; 11.02.2014

arrow_upward
13
arrow_downward

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

}
person Fizer Khan    schedule 01.08.2014

arrow_upward
5
arrow_downward

Посмотрите исходный код в 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 не запущен в браузере.

person Alireza    schedule 10.06.2017

arrow_upward
1
arrow_downward

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

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

no-js

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

person JSON C11    schedule 31.10.2018