ブラウザ間の互換性を犠牲にすることなく IE9 に Flexbox を実装するにはどうすればよいですか?

IE9 Flexbox の代替案

最初に Chrome で開発され、IE サポートを目的とした Web サイトの場合、IE9 での Flexbox 実装に対処することは課題を引き起こします。 IE11 と Chrome は Flexbox をサポートしていますが、IE9 はサポートしていません。ブラウザ固有のスタイルシートを回避するには、代替方法が必要です。

検出ツールとしての Modernizr

Modernizr は、Flexbox サポートを含むブラウザの機能を検出します。検出結果に基づいて、flexbox、no-flexbox、flexbox-legacy などのクラスを HTML 要素に追加します。これにより、フォールバック スタイルの適用が可能になります:

<code class="css">.container {
  display: flex;
}
.no-flexbox .container {
  display: table-cell;
}</code>

フォールバック テクニック

Zoe Gillenwater のプレゼンテーションは、IE9 の Flexbox フォールバックに関する貴重な洞察を提供します:

• 水平ナビゲーション間隔: 表示の使用: inline-block;
• 要素の固定: 表示の使用: table-cell;
• フォームの配置: テーブルベースのレイアウトなどのフォールバック方法の使用を検討します。
• フレックス順序: Flexbox 対応ブラウザと非 Flexbox ブラウザの両方を考慮して、表示プロパティを慎重に適用します。

その他の注目すべきヒントは次のとおりです:

• ブラウザのサポート: IE10 では、より優れた Flexbox サポートが提供されます (caniuse.com による)。
• プレフィックス: オートプレフィクサーにより、ブラウザ間の互換性が簡素化されます。
• フォールバックのメリット: フレックスボックスのフォールバックにより、設計原則を損なうことなく下位互換性が可能になります。

以上がブラウザ間の互換性を犠牲にすることなく IE9 に Flexbox を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。