HTMLの「no-js」クラスの目的は何ですか？

510

多くのテンプレートエンジン、HTML5ボイラープレート、さまざまなフレームワーク、プレーンなPHPサイトでno-js、<HTML>タグにクラスが追加されていることに気づきました。

なぜこれが行われるのですか？このクラスに反応するある種のデフォルトのブラウザ動作はありますか？なぜそれを常に含めるのですか？no- "no-js"ケースがなく、htmlを直接アドレス指定できる場合、それはクラス自体を時代遅れにしませんか？

HTML5ボイラープレート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」に置き換えられます。これは、JavaScriptサポートが有効になっているかどうかに応じて、異なるCSSルールを適用する方法です。

Modernizerのソースコードを参照してください。

— グレゴリー・パコシュ
ソース

5

その上に別の偉大な書き込みアップがここにあります：alistapart.com/articles/...は

— Hannele

47

Modernizrは「no-js」を「js」に置き換えるため、CSSコードでif / elseステートメントと同等のことを行う方法としてこれを使用できます。例えば、.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は技術的にはそうではありませんが、ブラウザがそれを制限することはありません。それをサポートしていないものでさえ、それを無視するだけで、私はそれらのブラウザの1つを何年も見ていません。

— cHao

4

@ZachL私はここでクラックを吸っていなければならないことを理解してい.js { padding: ...}ますが、それを実装したのはbody = .jsであると知っているので、それは問題ないようです。もっと直接あなたのポイントに、あなたがそれを主張していると思われるbody.jsよりも悪いです.js body...私は、以下のいない午前た

— wired_in

4

html5-boilerplateがそれを採用していることは言及する価値<html>があり、これに対する問題は報告されていません。どういうわけかそれを置くこと<html>は確立された習慣になりました、そして人々はそれが何であるかそしてそれが何をするかをすぐに知っています。結局、その慣行から逸脱すると、さらに多くの疑問が生じます。

— Gregory Pakosz 2014年

109

このno-jsクラスは、Modernizr機能検出ライブラリによって使用されます。Modernizrが読み込まれると、に置き換えno-jsられjsます。JavaScriptが無効になっている場合、クラスは残ります。これにより、どちらの条件も簡単に対象とするCSSを記述できます。

Modernizrs' Anotatedソース （もはや維持）：

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

このアプローチを説明するPaul Irishのブログ投稿は次のとおりです。http： //www.paulirish.com/2009/avoiding-the-fouc-v3/

私はこれと同じことをしたいのですが、Modernizrは使いません。私は次のように置く<script>に<head>にクラスを変更するにはjsJavaScriptが有効になっている場合。私.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（スタイルのないコンテンツのフラッシュ）がないため、読み込みが速くなります。
懸念の分離など...

— ザック・リソベイ
ソース

1

ただし、RegExpを使用するModernizrバージョンの方が安全です（おそらく高速です）。

— AndrewF 2013

@AndrewF-少し拡張していただけますか？どのくらい正確に安全ですか？

— Zach Lysobey 2013

12

@ZachL正規表現バージョン（with \b）はのようなものと一致しません。anno-jsus他のバージョンはに変更しanjsusます。no-jsは、クラス名の典型的な部分文字列ではありませんが、この点では、\bsを使用すると「安全」です。

— Cucu

40

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

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

— SLaks
ソース

17

no-jsJSが無効になっている場合は、CSSを使用して/表示/非表示のものを修正することができるようにクラスは、JavaScriptのスクリプトによって削除されます。

— マーク
ソース

あなたは「非JavaScriptクラスはJavaScriptスクリプトによって削除される」と述べました。したがって、JavaScriptが無効になっている場合のJavaScriptの動作（「no-js」クラスを削除できる）。明確にしていただけませんか？

— 2013

2

あなたが正しい、これが実際のポイントです。JavaScriptが無効になっている場合、クラスは残ります。たとえば、CSSを使用してHTMLパーツを表示し、ユーザーに警告することができます。.no-js #js-warning {display: block;}

— 2014年

注意してください、Modernizrがこれを行った後にJSエラーが発生する可能性があるため、JSをテストする確実な方法は機能していません

— htmlr

11

これは、Modernizerだけに当てはまるわけではありません。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 {

}

— ファイザー・カーン
ソース

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を無効にするか有効にするかによって、Webページのスタイルを設定するために使用されます。

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

no-js

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

— JSON C11
ソース