web-dev-qa-db-ja.com

HTML5shivを正しく使用する方法... IE 9、Firefox、Safariでどのように機能しますか？

質問

使用される条件付きコメントが[if lt IE 9]の場合、html5shivはIE9でどのように機能しますかIE8以下の場合ANDSafari 4.xおよびFirefox 3.x[〜＃〜] ie [〜＃〜]条件付きコメントを読みますか？そうでない場合、html5shivは、 Github Instructions ？で提案されている条件付きコメントを使用して、これらのブラウザーでどのように機能する可能性がありますか？

ここでの質問 条件付きコメントなしですべてのブラウザで使用できるかどうか、そして副作用は何かという質問がありましたが、それは私の質問ではありませんでした。その質問は4年前に尋ねられました。 HTML5が標準になり、Microsoftはレガシーブラウザのサポートを提供しなくなったため、現時点ではすべてのブラウザにHTML5をロードするのは非常識であり、私はそれを考慮しません。私の質問は、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]-->

Stat Counter によると、過去1年間でIE 8と9の合計が世界の使用量で約4％から約2％に減少しました。Microsoft以降 減少support 1月12日のレガシーブラウザの場合、html5shivは現在または間もなく過去のものになる可能性があります。これらのレガシーブラウザが、年間でどれだけ減少するかを確認するのは興味深いことですIE来てください。

stat counter

ただし、開発しているものによっては、これらのブラウザをサポートしたい場合があります。上記の統計にSafari4.xとFirefox3を含めると、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は、IE9 Safari4とFF3をすぐにサポートすると想定して、ほとんどの開発者とサイト所有者がいる何百万ものWebサイトで簡単に使用されています。

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

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

それが本当なら、それを方程式から取り出してcss（またはcssリセット）に含めるときにそれを使用するのをやめるもう1つの理由かもしれません、あなたはになりますhtml5shivが実際に影響を与えるブラウザの1.39％。

javascripthtmltwitter-bootstrapinternet-explorerhtml5shiv
21
Bryan Willis

ShivスクリプトはIE（この場合はバージョン9 [... lt IE9 ...]未満）でのみ使用され、他のブラウザーでは使用されず、無視されます。コメントアウトされています。結局

<!-- ... -->

IEはこれらをサポートし、読み取ります。 shivスクリプトは、これらの古いブラウザーを「より良く」動作させるための機能を強化します。

更新：「ltIE9」はSafari4.xとFF3.xでも実行されているようです。私が見つけたものから（すべてGitHubプロジェクトの説明から複製されました）。

別の更新：これはIEでのみ機能し、古いSafariやFireFoxでは機能しないと確信していました。掘り続けます。私が間違っている場合、他の誰かが私を訂正します。

5
Christopher Stevens

補足：そのようなブラウザ統計のみをveryとして取得する必要があります緩いガイド。そのようなサイトの統計は福音からはほど遠いものであり、国から国へ、市場から市場へ、人口統計から人口統計へと変化します。自分のサイトの分析を見て、Safari 4、FireFox 3、Internet Explorer 6-8のカテゴリに分類されるユーザーの数を確認する必要があります（私の推測では、LOTは2.3％未満になると思います）。

（FireFoxは自動的に更新され、現在バージョン43（！）であり、SafariはOSXで自動的に更新され、バージョン9であることも忘れないでください。古いバージョンをまだ使用している人の可能性は非常に低いです。私の分析サイト：先月の20,000セッションのうち、FF3を使用したのは1つ、IE7を使用したのは1つ、IE8を使用したのは1つ、Safari 4またはIE6を使用したのは1つだけでした。）

ただし、これらの外れ値をターゲットにすることに熱心な場合は、次の質問に対する回答があります。

[if lt IE 9]を使用した条件付きコメントがIE8以下の場合、html5shivはIE9でどのように機能しますか

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

enter image description here

safari4.xとFirefox3.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のホームページに表示される条件文はnot現在の状態でFF3またはSafari4によって取得されます。これは、これらのブラウザが非常にまれであるため、平均的なユーザーにとっては価値がないと彼らが考えているためだと思います。さらに、CSSのリセット/正規化には、いずれにせよ、それらのブラウザーに必要なCSSが含まれる可能性があります。

したがって、言及されているすべてのブラウザでHTML5要素を処理する方法を確認するには：

IE6-8： Githubドキュメント で説明されているようにHTML5shiv.jsを使用します。

IE9-11： Normalize.css を使用するか、HTMLにmain { display: block }を追加します。 （LGSonに感謝します。）

Safari 4：Normalize.cssまたは次のCSSを使用します。

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

FireFox 3：上記と同じ。

（FireFox4 +およびSafari5 +はHTML5のサポートがはるかに強力であり、上記のCSSは必要ありません。）

5
Chuck Le Butt

Internet Explorerの条件付きコメント 年前に専用の非常に詳細なページを作成しました。これは、lte =未満[または]等しいIE9の場合です。自分が書いたページにコピーして貼り付ける準備ができている多数の例を文書化しました。

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

訪問者には、セキュリティサポート付きでIE9以下を実行できる唯一のWindowsバージョンであるVistaからアップグレードすることをお勧めします。 2016年1月の時点で、Windowsのバージョンごとに最新バージョンのInternetExplorerのみがサポートされています。 Internet ExplorerバージョンのWikiページ どのバージョンのIEがどのバージョンのWindowsで実行されるか」を参照してください。

2010年1月の時点で、IE10 +のみに意味のある注意を払う必要があります。適切なポリシーは、IE9以下をフルページブロックすることです。マイクロソフトがサポートしていない場合は、どちらでもないはずですただし最低でも2回企業の仕事で1年に支払われる金額です。あなたの地上開発者に立ち向かおう、私たちは仕事を成し遂げるために何が必要かを最終的に知っている人たちです。

1
John

いいえ、githubページのshivの読み込み方法のサンプルは、 "downlevel-hidden"を使用しているため、8以下のIEブラウザ）以外では機能しません。条件付きコメント テクニック。

IE9以下の両方で機能させるには、IE SafariやFirefoxなどのブラウザ、 "downlevel-revealed"条件付きコメント テクニックを使用する必要があります。このような。

<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->

注意すべきサイドノートは：

  • IE10以降では、条件付きコメントはサポートされなくなり、このユースケースでは非IEブラウザーとして動作します。

  • すでにHTML5要素をサポートしているブラウザでは、shivは何もしません。

0
LGSon