web-dev-qa-db-ja.com

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>要素には常にこのクラスがあります。なぜこれが頻繁に行われるのか、誰かが説明できますか？

javascripthtmlmodernizrhtml5boilerplate
487
Swader

Modernizrが実行されると、 "no-js"クラスを削除し、それを "js"に置き換えます。これは、Javascriptサポートが有効になっているかどうかに応じて異なるCSSルールを適用する方法です。

モダナイザのソースコード を参照してください。

468
Gregory Pakosz

no-jsクラスは Modernizr 機能検出ライブラリによって使用されます。 Modernizrがロードされると、no-jsをjsに置き換えます。 JavaScriptが無効になっている場合、クラスは残ります。これにより、どちらかの条件を簡単にターゲットとするCSSを書くことができます。

ModernizrsのAnotated Sourceから （もはやメンテナンスされていない） ：

存在する場合は、要素から "no-js"クラスを削除します。 docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

これはこのアプローチを説明しているPaul Irishによるブログ投稿です： http://www.paulirish.com/2009/avoiding-the-fouc-v3/

私はこれと同じことをするのが好きですが、Modernizrがありません。 JavaScriptが有効になっている場合は、クラスをjsに変更するために、次の<script>を<head>に入れます。私は正規表現版より.replace("no-js","js")を使うことを好みます。なぜならそれは少し難解で、私のニーズに合うからです。

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

このテクニックの前は、JavaScriptで直接js依存のスタイルを直接適用するのが一般的でした。例えば：

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

no-jsトリックを使えば、これをcssで実行できます。

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

これは以下の理由で好ましい方法です。

  • FOUC（スタイルのないコンテンツのフラッシュ）なしでより速くロードされます
  • 懸案事項の分離など.
104
Zach Lysobey

Modernizr.jsはno-jsクラスを削除します。

これにより、Javascriptが無効になっている場合にのみ.no-js somethingのCSSルールを適用することができます。

40
SLaks

no-jsクラスはjavascriptスクリプトによって削除されるので、jsが無効になっている場合はcssを使用して変更/表示/非表示にできます。

17
marc

これはモダナイザにのみ適用されるわけではありません。私はそれがjavascriptをサポートしているかどうかをチェックするために以下のように実装しているサイトを見ます。

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

JavaScriptサポートがある場合、それはno-jsクラスを削除します。そうでなければno-jsはbodyタグに残ります。 JavaScriptがサポートされていない場合は、CSSのスタイルを制御します。

.no-js .some-class-name {

}
11
Fizer Khan

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クラスを検索し、それをclassPrefix + jsに置き換えます。

JavaScriptをブラウザで実行していない場合、それを使用してもスタイルが異なります。

4
Alireza

ユーザーがブラウザでJSを無効にしているか有効にしているかに応じて、no-jsクラスがWebページのスタイル設定に使用されます。

Modernizrのドキュメントに従って ：

no-js

デフォルトでは、Modernizrは<html class="no-js"> to <html class="js">を書き換えます。これにより、JavaScriptを実行する環境でのみ公開されるべき特定の要素を隠すことができます。この変更を無効にしたい場合は、設定でenableJSClassをfalseに設定できます。

0
JSON C11