IE_Experience Exchange の下位バージョンで HTML5 CSS3 Web サイトを通常に実行するための 3 つのソリューション

開発時に最低基準に従う場合、たとえば IE6 がサポートしていない機能を使用しない場合、この記事を書く必要はありませんが、このような状況は非常にまれだと思います。開発は最新のブラウザで行われます。サポートされている機能を使用し、初期のブラウザで特定のダウングレードを実行します。これがいわゆる「プログレッシブ拡張」であり、この記事の焦点です。次の方法により、奇跡的に Web サイトが IE ブラウザの下位バージョンでも快適に動作するようになることを願っています。
htmlshiv.js
Remy の HTML5shiv は、JavaScript を使用して HTML5 要素 (メイン、ヘッダー、フッターなど) を作成します。 JavaScript で作成された要素は、ある程度スタイルを設定できます。これがどのように機能するかを考えるのに多くの時間を費やすこともできますが、誰が気にするでしょうか? この戦略は依然としてすべての製品 Web サイトで必須です。

コードをコピー コードは次のとおりです:

selectivizr.js
Selectivizr。 js は、重要な最後の子を含む、サポートされていない CSS セレクターとプロパティを設定するための素晴らしいリソースです。最近の再設計では、selectivizr を埋め込み、古い IE ブラウザーの詳細を見逃すことはありませんでした。以下は私の実装コードです:

コードをコピー コードは次のとおりです:

絶対必須最新のプロジェクト向け。古いバージョンの IE でのみロードされます。
さらに、HTML5 ブラウザ サポート スクリプト html5shiv が Modernizr スクリプトに追加されました。Moernizr.js ファイルを引用する限り、IE9 より前の IE ブラウザは、HTML5 によって追加された nav、section、article、などのセマンティック タグをサポートしています。 CSS スタイルを使用することもできます。
条件付きコメント
以下の最も一般的な状況を見たはずです。しかし、醜いかどうかにかかわらず、実際には、このコードは期待どおりに動作します。

コードをコピー コードは次のとおりです。

上記のメソッドは、IE のバージョンごとにスタイルの違いを記述するために CSS で使用されます。まずユーザーが使用している IE のバージョンを特定し、次にそのバージョンのクラスをラベルに追加します。これにより、ハッキングが容易になります。

CSS ファイルに次のように記述できます。

コードをコピー コードは次のとおりです。

.ie6 xxx {};
.ie7 xxx {};

これは、エディターによって現在検討されている最も効率的な方法です。この方法は、JavaScript を必要とせず、待つ必要もありません。重量のある JavaScript ライブラリは必要ありません。定義したスタイル クラスはすぐに有効になり、スプラッシュ スクリーンはまだ表示されません。

IE ブラウザは競合他社に追いつきつつありますが、IE の新しいバージョンには非常に大きな変更が加えられており、新しい IE を使用してネットワーク エクスペリエンスを再構築することが期待されています。しかし、中国では依然として古いバージョンの IE が比較的人気があります。幸いなことに、これらのリソースはすべての最新ブラウザで適切に動作し、費用もそれほどかかりません。