コンテナスタイルのクエリの初期

コンテナクエリはまだ初期段階にあり、広範なブラウザのサポートがありません。 Chromiumはすでにそれらをサポートしていますが、Safariのサポートはバージョン16で始まり、Firefoxの実装はまもなく予想されます。

初期の議論は、コンテナクエリとメディアクエリの構文の間に類似点を描くことがよくあります。 これらの例を考えてみましょう：

<code>/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}</code>

<code>/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}</code>

両方の例は

をターゲットにします。 ただし、メディアクエリはビューポート幅に反応しますが、コンテナクエリはmin-width: 600px要素の計算された幅に応答します。 これに基づいて、CSS封じ込めモジュールレベル3の仕様には、コンテナスタイルのクエリ.postsを導入し、コンテナの計算スタイルのクエリを許可します。 スペックは、それらを個々のスタイル機能のブールの組み合わせとして説明し、それぞれが特定のプロパティを照会します。 CSS宣言をミラーリングする構文は、計算されたプロパティ値が指定された値（コンテナに対しても計算）と一致し、無効またはサポートされていないかどうか、それ以外の場合はfalseと一致する場合、trueに評価されます。 ブールロジックは、CSS機能クエリ（

）に似ています。

仮説的な例： @supports

（またはその不在）が暗示されていることに注意してください。すべてのコンテナクエリは、デフォルトで（現在）スタイルクエリになります。 Miriam Suzanneの仕事は、このアプローチで潜在的な課題を強調しています

クエリコンテナスタイルの実用的なアプリケーションはまだ出現していますが、潜在的な用途には次のものがあります。

<code>.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}</code>

カスタムプロパティ値：container-type: style状態インジケーターとして使用されるカスタムプロパティの変更に反応します。

ダークモードの実装：

体の背景の変更に基づいてカラーパレットの切り替え。

• 複雑なクエリ条件：サイズとスタイル条件の組み合わせ。
• コンテナスタイルのクエリは、イタリック体のブロッククオート内のオーバーライドイタリック化されたテキストなど、スタイリングの複雑さにも対処できます。

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