Modernizr は IE9 用の Flexbox フォールバックの作成にどのように役立ちますか?

IE9 Flexbox の代替案: Modernizr による救済

お気づきのとおり、IE9 は Flexbox をサポートしていないため、クロスの維持に課題が生じています。 -ブラウザの一貫性。ただし、Modernizr を利用することで、Flexbox 機能を検出し、必要に応じてフォールバック スタイルを提供できます。

Modernizr フォールバック実装

Modernizr は、Flexbox を示す特定のクラスを HTML 要素に追加します。サポート。これにより、検出された機能に基づいて適切なスタイルを適用できます。

<code class="css">.container {
  display: flex; /* For browsers with Flexbox */
}

.no-flexbox .container {
  display: table-cell; /* Fallback for IE9 and older */
}</code>

Zoe Gillenwater のフォールバック推奨事項

Zoe Gillenwater (@zomigi) は、プレゼンテーションで貴重な洞察を提供します。フレックスボックスのフォールバックについて。重要なポイントは次のとおりです。

• 水平方向のナビゲーションの間隔: 水平方向のナビゲーションで要素の間隔を空けるには、インライン ブロックを使用します。
• 要素の固定:フレックスボックスが利用できない場合は、テーブルセル表示を使用して要素を固定できます。
• フォーム配置フォールバック: レイアウトの安定性を実現するために、フォームにインライン フレックスを使用することを検討してください。
• フレックス オーダー フォールバック: Modernizr は、フレックス オーダー サポートがないことを示す no-flexbox-order クラスを追加します。

追加リソース

ブラウザ間の Flexbox 互換性に関する詳細については、次のリソースを参照してください:

• [caniuse Flexbox サポート データ](https://caniuse.com/flexbox)
• [ゾーイ・ギレンウォーターの「Flexbox によるレベルアップ」プレゼンテーション](https://slides.com/zomigi/level-up-your-flexbox-skills-latest-techniques-css-tuts#/1/0)
• [ゾーイ・ギレンウォーターの「CSS3 レイアウト」プレゼンテーション](https://slides.com/zomigi/css3-layout-new-old-and-sexy#/1/0)

結論

Modernizr の検出機能と Zoe Gillenwater の推奨事項に基づいたフォールバック スタイルを組み合わせることで、Flexbox をサポートするブラウザーとサポートしないブラウザーの両方で一貫したユーザー エクスペリエンスを効果的に提供できます。

以上がModernizr は IE9 用の Flexbox フォールバックの作成にどのように役立ちますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。