23

質問

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

条件付きコメントなしですべてのブラウザーで使用できるかどうか、および副作用は何かという質問がここにありましたが、それは私の質問ではありませんでした。その質問は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]-->

過去 1 年間で、IE 8 と 9 を合わせた世界的な使用率は、 Stat Counterによると約 4% から約 2% に減少しました。Microsoftが 1 月 12 日にレガシー ブラウザーのサポートを終了したため、html5shiv は現在、または近いうちに過去のものになる可能性があります。これらの従来の IE ブラウザが今後 1 年でどれだけ減少するかを見るのは興味深いことです。

統計カウンター

ただし、開発している内容によっては、これらのブラウザーを引き続きサポートしたい場合があります。上記の統計に 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 年間、実際にこの方法を行っている人を見たことがなかったので、明らかに何かが欠けています。さらに、これが FF 3 と Safari 4 でどのように機能するかは、バグやコメントを読まない原因となるものがない限り、まだわかりません。この問題についても html5shiv github でこのトピックを開きましたが、回答を得ることができませんでした。

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

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

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

それが本当なら、多くの人がそれを使用するのをやめるもう1つの理由かもしれません.html5shivが実際に持っているブラウザの1.39％にまで下がっていることを考慮して、それを式から外してCSSに含める（またはCSSリセット）.への影響。

4

5 に答える 5

0

いいえ、彼らの github ページにある shiv のロード方法のサンプルは、 「downlevel-hidden」条件付きコメント手法を使用しているため、8 以下の IE ブラウザー以外では機能しません。

IE9 以下、および Safari や Firefox などの IE 以外のブラウザの両方で動作させるには、次のような「ダウンレベル公開」条件付きコメント手法を使用する必要があります。

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

注目に値する補足事項は次のとおりです。

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

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

于 2016-01-23T08:22:00.233 に答える
-2

私自身の質問に答えるために...

html5shiv の github ドキュメントは誤解を招くものです... それだけです。さらに掘り下げた後、この質問に答えるこの古い HTML5SHIV Github の問題に出くわしました。

Firefox 3 または Safari 4 で条件付きコメントが読み取られる原因となる「ブラウザーの癖やハック」はありません (素晴らしいブラウザー ハックの非常に広範なリストを次に示します)。

[if lt IE 9]IE 5-8 で正常に動作します... readme に惑わされないでください。

したがって、IE9、Safari 3、または Firefox 4 で魔法のように動作することを期待して、以下のスニペットを使用している場合は、うまくいきません。

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

では、html5shiv はどのように使用すればよいのでしょうか?

質問で述べたように、他の人が回答で述べたように、Microsoft は 2016 年 1 月 12 日にレガシー ブラウザのサポートを終了しました。使用率は、今後 1 年程度で確実なペースで低下し続けるでしょう。その上、現在の使用の大部分は、おそらく更新が遅い古いビジネスからのものです。ほとんどの人にとって、これらはトラフィックを取得するユーザーではありません (特に、これらのコンピューターは作業専用コンピューターである可能性が高いため)。

個人的には、もう html5shiv を使用するつもりはありませんが、それはあちらこちらでもありません。おそらくまだ HTML5 を使用する人が多いので、HTML5shiv がさまざまなブラウザーをどのようにサポートするかについて、個人的な経験、調査、およびこのページのその他の回答に基づいた私の提案を以下に示します...

追加の変更なしで html5shiv を使用する IE6-9、Safari 4、および Firefox 3 のサポートが必要な場合は、条件付きコメントを含めないでください。

<script src="bower_components/html5shiv/dist/html5shiv.js"></script>

Internet Explorer のサポートが必要な場合は、これを使用してください。html5shiv は IE 5 では動作しないため、その惨めなブラウザにロードしても意味がありません。

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

Internet Explorer 8 または 9 のサポートのみが必要な場合は、次を使用します。

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

オプション 4: 上記の方法が必要な場合もありますが、これがスクリプトを使用する最も効率的な方法であると考える人もいます。

<style type="text/css">
    article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
    mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
    <script type="text/javascript">window.html5={shivCSS:!1};</script>
    <script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

オプション 4 1/2 : 「おそらく」今後 HTML5Shiv を使用するための最良の方法:

上記よりもさらに優れているのは、これが HTML5 であることを指定していて、それを縮小できるため、type 属性をドロップできることです。また、jsdeliver や maxcdn などの一般的な cdn を使用して高速化を試みることもできます。これは、コンピューターに既にファイルがキャッシュされていることを願っています。繰り返しますが、html5shiv のホスティングに Google を使用しないでください。これはよくある間違いで、数分間しかキャッシュされません。Google コードは CDN を意図したものではありません。

また、shiv css を無効にして、自分で含めます。CSS リセットを使用している場合(2016 年に最も人気のあるもののリストを次に示します)、下のスタイルパーツをまとめて ドロップできます。

最後に、推奨されるように、閉じ head タグの直前に含めます。

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta, stylesheets, etc... -->
    <style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
    <!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>

この方法により、期待するブラウザーをサポートする HTML5shiv から必要な結果が確実に得られます。

従来のブラウザーは IE でサポートされなくなり、Firefox と Safari には自動更新機能があるため、shiv を使用せずに @LGSon のようなソリューションまたは CSS スタイル/リセットのみを使用して回避できる可能性が高くなります。

于 2016-01-21T22:33:42.480 に答える