コンテナクエリを忘れないでください

CSSコンテナクエリは、開発者が改善を強く要求する機能の1つです。コンテナクエリがある場合、ページサイズに基づいてそれほど多くのグローバルメディアクエリを書く必要はないという一般的な見解です。私たちが本当に制御したいのは、よりローカルなコンテナであり、今ではCSSで最高のツールであるという理由だけで、メディアクエリを使用してのみ実装できるからです。私はこれに完全に同意します。

しかし、時々表示される見解もあります。「開発者は、コンテナクエリが必要だと考えていますが、そうではありません。」私はこの声明に同意しません。コンテナクエリが利用可能な場合、明らかに多くの有用なことを行うことができます。その中で最も重要なのは、クリーナー、ポートが簡単で、コードを理解しやすく書くことです。今日、コンポーネントベースのUISを構築することはコンセンサスのように思えます。これにより、コンテナクエリの需要がさらに明白になります。

現在、コンテナクエリを使用するのに役立つ最新のJavaScriptメソッドがいくつかありますが、それはこのテクノロジーがJavaScriptの領域にとどまる必要があるという意味ではありません。 CSSでより理にかなっています。

2019年末のこのトピックに関する私の考えのいくつかは次のとおりです。

• フィリップウォルトンの「レスポンシブコンポーネント：コンテナクエリの問題を解決するためのソリューション」は、JavaScriptのseizeObserverを使用して現在の問題を解決する良い方法を示しています。それはうまく機能し、どこでも機能します。デモウェブサイトは、レスポンシブコンポーネントのニーズを強調しているため、最高のウェブサイトです（ただし、文書化されたユースケースはあります）。フィリップは、純粋なCSSソリューションがより理想的だとさえ言います。
• 約1年前、CSSネスティングは流行を引き起こしました。議論は、ネスティングが実行可能であることを示しているようです。合理的なSASSネスティングの長年の擁護者として、私はそれに同意します。これにより、コンテナクエリの構文が似たようなものを利用できるかどうか疑問に思います。ネストされたクエリの範囲は親セレクターに限定されているのでしょうか？または、現在の仕様が子孫セレクターを使用しているように、メディアステートメントを表すためにアンパサンドをプレフィックスとして使用していますか？
• 他の提案されている構文には、通常.container:media(max-width: 400px) { }などの何らかのコロンの使用が含まれます。私もこれが好きです。単一のコロンセレクター（擬似選択）は、哲学的に「これらの条件下で要素を選択する」 - たとえば:hover 、 :nth-childなど - メディアの範囲は理にかなっています。
• この機能の最大の障害は構文ではないと思います。実装のパフォーマンスです。私が最後に知る限り、それはさらにパフォーマンスの問題であり、ブラウザの仕組みのレンダリングプロセス全体を混乱させています。これは大きな障害のようです。しかし、私はまだそれを忘れたくありません。インターネットでは多くの革新が起こっています。今日の達成方法が明確でないからといって、明日は誰も実行可能な方法を見つけられないという意味ではありません。

以上がコンテナクエリを忘れないでくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。