ホームページ >ウェブフロントエンド >CSSチュートリアル >マスタードを切ることでフレックスボックスに移行します

マスタードを切ることでフレックスボックスに移行します

尊渡假赌尊渡假赌尊渡假赌オリジナル: 2025-02-25 22:20:12713ブラウズ

Migrating to Flexbox by Cutting the Mustard

キーテイクアウト

この記事では、CSSフロートを使用してFlexBoxへの移行について、CSSのレイアウトを構築するための遷移について説明します。 FlexBoxの古い構文とTweener構文の制限を強調し、新しい構文を完全に実装するTweener構文とブラウザバージョンのみをターゲットにすることをお勧めします。
著者は、SASSを使用してCSS出力のサイズを縮小し、維持を容易にすることを提案しています。また、FlexBoxの実装は、プログレッシブエンハンスメントの概念により、各エクスペリエンスでまったく同じように見えないことも言及しています。この記事は、ブラウザ向けに新機能が開発されているため、機能検出に対するこのアプローチが将来の要件に合わせて適応および進化できることを強調することで締めくくります。それは、読者が次のプロジェクトでFlexBoxに精通していることを奨励しています。
フロントエンド開発者として、CSSフロートを使用してFlexBoxの新しいエキサイティングな世界に飛び込むことから離れる時が来ました。 CSSフロートは、レイアウトのスタイリングへの時代遅れのアプローチです。バージョン4.0以来、インターネットエクスプローラーで利用可能であり、回避策は順応性があります（ClearFixハックを含み、列をラッピングするためにnth-child pseudo-classを使用しています）。この記事の主なトピックは、その断片化を考慮して複数のブラウザにFlexBoxを実装する方法です。 FlexBoxに精通したい場合は、多くの優れたリソースがあります。次のことを強くお勧めします。
FlexBoxを使用する準備はできていますか？ SitePointのNick Salloum

CSS-TricksのChris CoyierによるFlexBoxの完全なガイドMSDNのインターネットエクスプローラー10のフレキシブルボックス（「FlexBox」）レイアウト（オプション）

この記事の終わりまでに、できるはずです：

レスポンシブWebサイトのターゲットにするFlexBoxのバージョンを理解してください。
ほとんどの状況でIE条件付きコメントを使用することから離れて移動します。レガシーフォールバックを備えた基本的な2×2グリッドを作成することにより、FlexBoxの実用的な使用を示します。
flexboxの簡単な歴史
フレキシブルボックスレイアウトモジュール（別名FlexBox）は、CSSのレイアウトを構築する新しい方法です。複数の改訂を受け、比較的短い存在が大幅に進化しています。執筆時点では、FlexBoxはまだW3Cワーキングドラフトですが、他の基準と同様に、生産環境で魅力的ではないはずです。

FlexBoxの制限は十分に文書化されています：

古い構文はFlex-Wrapをサポートしていません

Tweener構文は、IE 10（モバイルを含む）でのみサポートされています。

新しい構文は、Firefox（22-27）にFlex-wrapおよびFlex-flowの特性が欠落しているため、完全には実装されていません。

ラッピング（Flex-Wrap）は、レスポンシブグリッドを作成するために必要な仕様の重要な機能です。このため、新しい構文を完全に実装するTweenerの構文とブラウザーのバージョンのみをターゲットにすることをお勧めします。

これにより、次のブラウザバージョンが残ります

Internet Explorer 10（-ms-プレフィックスを使用した構文のtweener）
Internet Explorer 11およびEdge（新しい構文）
firefox 28（新しい構文）

Chrome 21-28（-webkit-プレフィックスを使用した新しい構文）

Chrome 29（新しい構文）

safari 6.1（-webkit -prefixを使用した新しい構文）

iOS Safari 7.0（-webkit-プレフィックスを備えた新しい構文）
紹介：マスタードを切る。

コンセプトの核心は、どのブラウザ/デバイス/ユーザーエージェントが使用されているかを識別し、サイトを機能させるためにポリフィルを提供しています。特定の機能の存在がクライアント側で検出されるため、利用可能な技術に最も適したソリューションが提供されます。

Modernizr（Paul Irishによる貢献）はすべて機能検出に関するものです。

CSSにはネイティブの機能検出がありますが、現在、実際の使用に実行可能になるのに十分な市場シェアがありません。この記事の残りの部分では、JavaScriptでの機能検出を支持して、IE条件付きコメントを捨てる方法について説明します。
機能とブラウザの識別

Plain JavaScript（BBCで使用されている）を使用して

を使用しています

[…]機能検出も完全に信頼できません。失敗する場合があります。

マスタードを切断するためのModernizrの選択はそれほど効率的ではないかもしれません（ダウンロードとクライアントの処理が必要なため）が、手動でFlex-Rapサポートを検出することは簡単なタスクではありません。また、Modernizrバージョン2はFlex-Wrapを検出しないが、バージョン3はそうであることに注意することも重要です。この機能には、フレックスラインラッピングとラベル付けされています
このオプションは、Modernizrが作成したドキュメントルートに添付されたCSSクラスを使用するために存在しますが（例：html.flexwrap）、サイトのダウンロードサイズを削減するために、各エクスペリエンスに個別のCSSファイルを提供することをお勧めします。
BBCニュース開発者は、2種類のブラウザを参照してください。

チームの誰かが「HTML4ブラウザ」および「HTML5ブラウザ」と呼び始めました。
-
BBCレスポンシブニュース

この根拠は、2012年のブラウザの風景の気候を考えると、完全に有効でした。ただし、新機能が利用可能になると、部門は必ずしも明確ではありません。たとえば、FlexBoxはすべての「HTML5」ブラウザで完全にサポートされていません。
堅牢なアプローチは、「レガシー」と「モダン」ブラウザバージョンを区別することです。さらに、一部のプロジェクトでは、中途半端（または「遷移」）ブラウザを識別できる複数の部門が必要になる場合があります。
アプローチの実装

以下のファイルを作成することから始めます：

index.html - メインのHTMLファイル

styleSheets/modern.css - 最新のブラウザ用のスタイル（メディアクエリ、ラッピング付きのフレックスボックス）

styleSheets/legacy.css - レガシーブラウザ用のスタイル（メディアクエリなし、フレックスボックスなし）

Scripts/Dependencies.js - 機能検出
を実行します

index.htmlファイルがどのように見えるかは次のとおりです

条件付きコメントがないことに注意してください。クリーンで有効なHTMLコードだけです。また、ブラウザがJavaScriptを有効にしていない場合、サポートのレベルに関係なく、Legacy.cssの使用に戻ります。
スクリプトタグがHTMLページの上部にあることにも気付くかもしれません。これは、Modernizrがブラウザが初めてペイントする前にスタイルシートを処理して注入する必要があるためです。これにより、塗り直しが減少し、スタイルのないコンテンツ（FOUC）のフラッシュを回避するのに役立ちます。ただし、ほとんどのスクリプトタグはページの下部にあることを忘れないでください。
Legacy.cssファイルには、次のものが含まれます
<!DOCTYPE html>
<html class="no-js">
 <head>
 <title>Cutting the mustard</title>
 <script src="javascripts/dependencies.js"></script>
 <noscript>
 <link rel="stylesheet" href="stylesheets/legacy.css">
 </noscript>
 
 </head>
 <body>
 <div class="container">
 <div class="cell cell-1">Cell 1</div>
 <div class="cell cell-2">Cell 2</div>
 <div class="cell cell-3">Cell 3</div>
 <div class="cell cell-4">Cell 4</div>
 </div>
 </body>
</html>
この実装には、ClearFixハックと、ラッピング用のNth-Child Pseudo-Classが含まれます。ほとんどのブラウザで動作します。ただし、インターネットエクスプローラー8には、セレクターを動作させるためにSelectIVizrまたは同等のソリューションが必要です。
次に、Modern.cssファイル：

このファイルのサイズで延期されないでください。コメントにより大きく見えるようになりますが、これらは各セクションがターゲットにしているものを理解することを開発しやすくします。
次に、dependencies.js。
のコードを書きます
.container {
}

/* clearfix */
.container:after {
 content: "";
 display: table;
 clear: both;
}

.cell {
 width: 50%;
 float: left;
}

/* wrapping */
.cell:nth-child(2n+1) {
 clear: left;
}

/* for visiblity */
.cell-1 { background-color: #000; color: #fff; }
.cell-2 { background-color: #666; color: #fff; }
.cell-3 { background-color: #ccc; color: #000; }
.cell-4 { background-color: #fff; color: #000; }
前述のように、Flex-Rapプロパティのサポートを検出するModernizr（バージョン3）のバージョンを生成する必要があります。 JavaScriptファイルの上部にコードを含めてください。

オプションで、Ismodern Booleanに追加することで、最新の体験の要件を増やすことができます。たとえば、
.container {
 /* Internet Explorer 10
 */
 display: -ms-flexbox;
 -ms-flex-wrap: wrap;

 /* Chrome 21-28
 * Safari 6.1+
 * Opera 15-16
 * iOS 7.0+
 */
 display: -webkit-flex;
 -webkit-flex-wrap: wrap;

 /* Chrome 29+
 * Firefox 28+
 * Internet Explorer 11+
 * Opera 12.1 & 17+
 * Android 4.4+
 */
 display: flex;
 flex-wrap: wrap;
}

.cell {
 -webkit-flex: 1 0 50%;
 -ms-flex: 1 0 50%;
 flex: 1 0 50%;
}

/* for visiblity */
.cell-1 { background-color: #000; color: #fff; }
.cell-2 { background-color: #666; color: #fff; }
.cell-3 { background-color: #ccc; color: #000; }
.cell-4 { background-color: #fff; color: #000; }
SASS Solutions
<!DOCTYPE html> <html class="no-js"> <head> <title>Cutting the mustard</title> <script src="javascripts/dependencies.js"></script> <noscript> <link rel="stylesheet" href="stylesheets/legacy.css"> </noscript>  </head> <body> <div class="container"> <div class="cell cell-1">Cell 1</div> <div class="cell cell-2">Cell 2</div> <div class="cell cell-3">Cell 3</div> <div class="cell cell-4">Cell 4</div> </div> </body> </html>
プログレッシブエンハンスメントとブラウザテスト

FlexBoxとCSSのフロートの違いを理解することが重要です。実装はそれぞれの経験でまったく同じように見えませんが、進歩的な強化の概念は、必ずしもそうする必要はないことを意味します。たとえば、
デフォルトでは、FlexBoxはすべてのセルを同じ列に伸ばして同じ高さを持つようになります。したがって、1つのセルが長さ3行で、隣接する列の長さが10行の場合、背景は両方のセルで10行まで伸びます。 CSSフロートのフォールバックはこれを行わず、両方のセルは不均一な高さを持っています。
複数のブラウザでレイアウトをテストすることは依然として要件ですが、JavaScriptでISModernの値をFalseに強制することで、あらゆるブラウザでレガシーソリューションをテストするのに役立つことを忘れないでください。

結論
この記事では、同じHTMLコードベースで2つの異なるスタイルシートを提供するために機能検出を使用するための基本を提供しました。これは、CSSフロートから離れてアップグレードプロセスを開始し、IE条件付きコメントへの依存度を低下させる非常に効果的な方法です。
.container {
}

/* clearfix */
.container:after {
 content: "";
 display: table;
 clear: both;
}

.cell {
 width: 50%;
 float: left;
}

/* wrapping */
.cell:nth-child(2n+1) {
 clear: left;
}

/* for visiblity */
.cell-1 { background-color: #000; color: #fff; }
.cell-2 { background-color: #666; color: #fff; }
.cell-3 { background-color: #ccc; color: #000; }
.cell-4 { background-color: #fff; color: #000; }
FlexBoxのサポートを検出することには強く焦点を当てていますが、ブラウザ向けに新しい機能が開発されているため、マスタードを切断するこのアプローチは、将来の要件に合わせて適応および進化させることができることに注意することが重要です。
インターネットエクスプローラー10がターゲットセクターのブラウザ市場シェアで人気がなくなったら、Tweenerの構文を捨てて、新しい構文の使用だけを通じてよりlear的なコードを提供できるかもしれません。
それで、あなたはすべての理論を持っているので、次のプロジェクトでFlexBoxに精通してみませんか？
FlexBoxに移住し、レガシーJavaScriptを回避することについてのよくある質問 FlexBoxに移行することの重要性は何ですか？レガシーJavaScriptを最新のブラウザに提供することを避けるにはどうすればよいですか？

レガシーJavaScriptを最新のブラウザに提供することを避けるために、モジュール/ノモジュールパターンを使用できます。このパターンを使用すると、JavaScriptの2つの個別のバンドルを作成できます。モダンな「モジュール」バンドルとレガシー「Nomodule」バンドルです。「type =” module "'属性を理解する最新のブラウザは最新のバンドルをダウンロードしますが、古いブラウザーはそれを無視し、代わりにレガシーバンドルをダウンロードします。
FlexBoxは、従来のレイアウト方法よりもいくつかの利点を提供します。これにより、柔軟なレイアウト構造が可能になり、レスポンシブWebサイトの設計が容易になります。また、コンテナ内の要素のアライメント、分布、および順序付けも簡素化されます。 FlexBoxを使用すると、従来のCSSで難しい複雑なレイアウトとアラインメントを簡単に実現できます。特に大規模な既存のプロジェクトのプロセス。移行を開始する前に、フレックスボックスモデルを徹底的に理解することが重要です。より複雑なレイアウトに徐々に移動するシンプルなレイアウトを実験することから始めます。ステップバイステップアプローチを使用して、1つのコンポーネントを一度に移動し、各変更を徹底的にテストします。

レガシーJavaScriptを最新のブラウザに提供しているかどうかを確認するために使用できますか？ > Google Lighthouse、Gtmetrix、WebPageTestなどのツールは、最新のブラウザにレガシーJavaScriptを提供しているかどうかを特定するのに役立ちます。これらのツールは、ウェブサイトのパフォーマンスを改善できる領域を強調して、詳細なパフォーマンスレポートを提供します。古いブラウザでのサポートの。ただし、いくつかの矛盾とバグがあるかもしれません。必要なベンダープレフィックスをCSSに追加し、古いブラウザーとの互換性を確保できるAutoprefixerなどのツールを使用することをお勧めします。 SEO。レスポンシブで高速で積み込まれたWebサイトは、より優れたユーザーエクスペリエンスを提供します。これはSEOの重要な要素です。さらに、より速くロードされるウェブサイトは、検索エンジンによってrawい回り、インデックス化される可能性が高くなります。新しいレイアウトモデル、ブラウザの不一致に対処し、後方互換性を確保します。さまざまなブラウザやデバイスでウェブサイトを徹底的にテストして、一貫したユーザーエクスペリエンスを確保することが重要です。
FlexBoxとModern JavaScriptの詳細については、FlexBoxとModern JavaScriptについて学ぶための多くのオンラインリソースがあります。 CSS-Tricks、MDN Web Docs、SitePointなどのWebサイトは、包括的なガイドとチュートリアルを提供します。さらに、CodecademyやFreeCodecampなどのオンラインコーディングプラットフォームは、これらのトピックに関するインタラクティブなレッスンを提供します。

以上がマスタードを切ることでフレックスボックスに移行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ヘルパークラスを使用して、CSSを乾燥およびスケーリングします次の記事：ヘルパークラスを使用して、CSSを乾燥およびスケーリングします

続きを見る

マスタードを切ることでフレックスボックスに移行します

キーテイクアウト

を使用しています

プログレッシブエンハンスメントとブラウザテスト

インターネットエクスプローラー10がターゲットセクターのブラウザ市場シェアで人気がなくなったら、Tweenerの構文を捨てて、新しい構文の使用だけを通じてよりlear的なコードを提供できるかもしれません。

​​

関連記事