HTML5shiv を正しく使用するにはどうすればいいですか...IE 9、Firefox、Safari ではどのように動作しますか? 質問する

HTML5shiv を正しく使用するにはどうすればいいですか...IE 9、Firefox、Safari ではどのように動作しますか? 質問する

質問

どうやってhtml5shiv取り組むIE9条件付きコメントが使用される[if lt IE 9]場合IE8そして以下を行うサファリ4.xそしてFirefox 3.x読むIE条件付きコメント?そうでなければ、html5shivこれらのブラウザでは、条件付きコメントを使用して、Githubの手順?


ありました質問はこちら条件付きコメントなしですべてのブラウザーで使用できるかどうか、また副作用は何かと尋ねていますが、それは私の質問ではありません。その質問は 4 年前に行われました。HTML5 は現在標準であり、Microsoft はレガシー ブラウザーのサポートを提供していないため、この時点ですべてのブラウザーにロードするのは無謀であり、私は検討しません。私の質問は、Github のドキュメント、そのドキュメントを使用して html5shiv がすぐに使用できるもの、およびサポート対象であると主張するブラウザーをサポートするために今日それを使用する方法に関するものです。

html5shiv スクリプトに関する Github の readme を引用します。

「IE6-9、Safari 4.x、FF 3.x の HTML5 要素に基本的なスタイルを適用します。」

使用方法:

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

過去1年間でIE8と9を合わせた世界使用率は約4%から約2%に減少したと報告されています。統計カウンターマイクロソフトサポートを中止1 月 12 日現在、レガシー ブラウザーでは html5shiv はもうすぐ過去のものになると思われます。今後 1 年間でこれらのレガシー IE ブラウザーがどれだけ減少するかを見るのは興味深いでしょう。

統計カウンター

ただし、開発内容によっては、これらのブラウザをサポートしたい場合があります。上記の統計に Safari 4.x と Firefox 3 を含めると、html5shiv がサポートするブラウザの合計シェアは 2.3% になります。ほとんどの人にとっては大したことではありません。しかし、e コマース サイトを所有している場合、2.3% は非常に大きな数字になります。


私の実際の質問に関しては、ドキュメント内の何かを見落としたか、IE の条件付きコメントを十分に理解していないのではないかと考えています。

論理的にはこれが最善の方法だと思います。IE の条件付きコメントはバージョン 5 から 9 まで機能するため、理由もなく IE5 でスクリプトが読み込まれることはあってはなりません。

<!--[if !(IE 5)]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

しかし、過去5年間、実際にこの方法でやっている人を見たことがないので、明らかに何かが欠けています。さらに、バグかコメントを読まない原因となる何かがない限り、これがFF3とSafari4でどのように機能するかはまだわかりません。私はこれを開きましたこの問題に関するhtml5shiv githubのトピック、しかし、回答を得ることができなかった。

HTML5shiv は数百万の Web サイトで簡単に使用されており、ほとんどの開発者やサイト所有者は、HTML5shiv が IE9、Safari 4、FF 3 をすぐにサポートすると想定しています。


また、IE9 に関して私が知る限り、html5shiv が IE9 をサポートするために行っていることはこれだけです。

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}

もしそれが本当なら、それを方程式から取り除いてCSS(またはCSSリセット)に含めると、次のようになることを考えると、多くの人がそれを使用しない理由になるかもしれません。1.39%ブラウザのhtml5shiv実際に影響を及ぼすでしょう。

ベストアンサー1

サイドノート:このようなブラウザの統計情報は、とてもゆるいガイドです。このようなサイトの統計は絶対的な真実からは程遠く、国や市場、人口統計によって変わります。自分のサイトの分析を見て、Safari 4、FireFox 3、Internet Explorer 6-8 のカテゴリに該当するユーザーが何人いるかを確認する必要があります (私の推測では、2.3% よりはるかに少ないでしょう)。

(また、Firefox は自動的に更新され、現在はバージョン 43(!) であること、Safari は OSX で自動的に更新され、バージョン 9 であることも覚えておいてください。古いバージョンをまだ使用している人がいる可能性は極めて低いです。非常に人気のある私のサイトの分析をチェックしたところ、過去 1 か月の 20,000 セッションのうち、FF3 を使用したのは 1 件、IE7 を使用したのは 1 件、IE8 を使用したのは 1 件だけで、Safari 4 または IE6 を使用した人はいませんでした。)


しかしこうした外れ値をターゲットにしたい場合は、次の質問に対する答えをご覧ください。

使用されている条件付きコメントが[if lt IE 9]IE8 以下用である場合、html5shiv は IE9 でどのように動作しますか?

HTML5shiv は IE9 では動作しません。その必要がないためです。Internet Explorer 9 は既にほぼすべての HTML5 要素を正しくサポートしています。

ここに画像の説明を入力してください

Safari 4.x と Firefox 3.x は IE の条件付きコメントを読み取りますか?

Safari と FireFox は IE 条件付きコメントをサポートしていませんが、次のようにターゲットにすることはできます。

FF3:

/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }

サファリ:

/* Safari only override */     
::i-block-chrome,.myClass {      color: lime;     }

しかし、これは HTML5shiv が行うことではなく、あなたの言う通りです。HTML5shivのホームページに表示されている条件文はない現状では、FF3 や Safari 4 では対応できません。これらのブラウザは非常にまれで、平均的なユーザーにとっては価値がないと考えられているためだと思います。また、CSS のリセット/正規化には、いずれにしてもこれらのブラウザに必要な CSS が含まれることになります。

では、ここで紹介したすべてのブラウザで HTML5 要素をどのように処理するかを見ていきましょう。

IE6-8: HTML5shiv.jsを、Githubドキュメント

IE9-11: 使用正規化.cssまたはmain { display: block }HTML に追加してください。(LGSon に感謝します。)

サファリ4: Normalize.css または次の CSS を使用します。

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ファイアフォックス3: 同上。

(Firefox 4 以降および Safari 5 以降では HTML5 のサポートが強化されており、上記の CSS は必要ありません。)

おすすめ記事