Яке призначення HTML класу "no-js"?

510

Я зауважую, що в багатьох двигунах шаблонів, на котлопласті HTML5 , в різних рамках і на звичайних сайтах 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>елемент завжди матиме цей клас. Хтось може пояснити, чому це робиться так часто?

— Швачка
джерело

493

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

Див . Вихідний код Modernizer .

— Григорій Пакош
джерело

5

Тут є ще одна чудова записка

— Hannele

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. */ }. Сподіваюсь, це допомагає. -Nick

— skcin7

33

@Ringo: HTML 5 визначає, що будь-який елемент може мати classатрибут. Хоча HTML 4 технічно ні, жоден браузер не задихається; навіть ті, хто його не підтримує, просто ігнорують це, і я не бачив жодного з цих браузерів протягом багатьох років.

— cHao

4

@ZachL Я розумію, що я мушу курити тріщинами тут, але мені здається, .js { padding: ...}це просто чудово, оскільки ви знаєте, як той, хто його реалізував, що body = .js. Більш прямо до вашої точки зору, здається, ви стверджуєте, що body.jsце гірше того, .js bodyчого я не дотримуюся ...

— wired_in

4

Варто згадати, що html5-plateplate ставить його, <html>і жодного питання не було повідомлено проти цього. Так чи інакше це <html>стало усталеною практикою, і люди одразу знають, що це таке і що він робить. Зрештою, відхилення від цієї практики просто викликає більше питань.

— Григорій Пакош

109

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/

Мені подобається робити те саме, але без Модернізру. Я поміщаю наступне <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 - ви могли б трохи розширити це? Наскільки саме це безпечніше?

— Zach Lysobey

12

@ZachL Версія regexp (з \b) не відповідає чомусь anno-jsus, інша змінює її на anjsus. no-jsне є типовим підрядком будь-якого імені класу, але все ж у цьому відношенні він "безпечніший" для \bs.

— Куку

40

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

Це дозволяє скласти правила CSS для .no-js somethingїх застосування, лише якщо Javascript вимкнено.

— SLaks
джерело

17

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

— марк
джерело

Ви сказали, що "клас no-js видаляється сценарієм javascript". Отже, як працює JavaScript (здатний видалити клас "no-js"), якщо його вимкнено. Не могли б ви дати зрозуміти?

— haind

2

Ви маєте рацію, і це насправді справа: якщо JavaScript відключений, клас залишиться, і ви можете, наприклад, показати деяку частину html за допомогою CSS, щоб попередити користувача про це. .no-js #js-warning {display: block;}

— березень

Будьте в курсі, помилки JS можуть виникнути після того, як це зробив Modernizr, тому функціонує не

— дурний

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

Подивіться вихідний код у Модернізаторі, цей розділ:

// 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клас і замінює його на classPrefix + js.

І використання цього стилю відрізняється, якщо JavaScript не працює в браузері.

— Аліреза
джерело

1

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

Відповідно до документів Modernizr :

ні-js

За замовчуванням Modernizr перепише <html class="no-js"> to <html class="js">. Це дозволяє приховати певні елементи, які слід експонувати лише в середовищах, які виконують JavaScript. Якщо ви хочете відключити цю зміну, ви можете встановити параметр enableJSClass в false у налаштуваннях.

— JSON C11
джерело