2012-12-17 3 views
5

ModernithrがHTMLタグにそれらのクラス名をすべて追加する必要があると感じる理由は誰でも説明できますか? Modernizrを読み込んだ後は、次のようになります。Modernizrライブラリを使用すると、なぜhtmlタグにクラスを追加するのですか

<!doctype html> 
<html class=" js flexbox canvas canvastext webgl ~~~~ etc etc 

私はそれをしたいと思っています。 Modernizrは、たとえばキャンバスがサポートされているかどうかを知らせるプロパティを提供します(Modernizr.canvas == true?)。それらのhtmlクラス名は、それより簡単なテスト用に追加されていますか?

答えて

8

これらのクラス名はCSSコードで使用されるため、機能がサポートされていない場合に備えてフォールバックスタイルを追加できます。 modernizrのドキュメントページの例:

/* Simulated box shadow using borders: */ 
.box { 
    border-bottom: 1px solid #666; 
    border-right: 1px solid #777; 
} 
.boxshadow div.box { 
    border: none; 
    -webkit-box-shadow: #666 1px 1px 1px; 
     -moz-box-shadow: #666 1px 1px 1px; 
      box-shadow: #666 1px 1px 1px; 
} 
+0

私はCSSを学ばなければならないように見えます。私はいつもスタイルのプロパティについて十分に知っていたと思ったが、これはいくつかの高度なものであるようだ。 – Dee2000

+0

誰かがこの回答を投票したのを見る。私はそれが答えであることを意味すると思います。どのように答えがどうして/なぜそれを理解していないとしても、私はそれをマークするためにチックをクリックします:) – Dee2000

+0

@ Dee2000、私は理にかなってそれを投票しました。この例では、ブラウザがドロップシャドウをサポートしていないとします。 .boxshadow div.boxはターゲットに設定されるべきではないため、.boxはフォールバックとして使用されます – series0ne

1

私は間違っているかもしれません(私がいれば私を訂正してください)。ここにあるクラスは、Modernizrが検出した、または特定のブラウザでサポートされている機能を示しています。 http://modernizr.com/docs/

は、この例を見てみましょう::ここにドキュメントの

ルック

<html class="no-js"> 

JavaScriptが無効になっている場合、その後、modernizrを実行することはできませんので、クラスが"no-js"のままですが、JavaScriptが有効になっている場合、Modernizrは"no-js""js"に置き換え、同様にサポートされている他の機能を教えてくれます

+0

「no-js」は奇妙な例なので無視します。しかし、私が得ていないのは、メソッドがすでに存在するときに、これらのクラスをhtmlタグに追加することに意味があるからです。たとえば、ビデオがサポートされているかどうかを検出すると、(a)JS内でテストに使用できるプロパティModernizr.videoが使用可能であり、(b)クラス「video」がhtmlタグに追加されます未知の理由で)。ドキュメンテーションは理由を説明しません。 – Dee2000

+0

@ Dee2000 - 「How It Works ...」を見てください:http://modernizr.com/ – series0ne

+0

@ Dee2000、私はあなたの文書にカスケードするCSSのhtml.flexboxがあると思います。しかし、ModernizrがあなたのHTMLタグに "flexbox"を入れていないと、それはあなたのCSSで決して目標に達することはありません...これが意味を成していないかどうかを教えてください – series0ne

関連する問題