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

コンテナー クエリに関しては、まだ suuuuuper の初期段階にあります。 ブラウザーの広範なサポートには時期尚早ですが、Chromium は既にサポートしており、Safari もサポートしています。 バージョン 16 でサポートを開始しました、そしてFirefoxはおそらく それほど遅れていない.

コンテナー クエリを中心に展開する初期の会話のほとんどは、通常、構文をメディア クエリと比較します。

/* 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;
  }
}

/* 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;
  }
}

これらは両方ともクエリを作成しています min-width: 600. 違いは、コンテナ クエリが計算された .posts エレメント。 甘い！

でも聞いた後は CSS ポッドキャスト エピソード 59、Una と Adam は、コンテナー クエリの未来について次のように述べています。 スタイル クエリ! CSS Containment Module Level 3 仕様の現在のワーキング ドラフト コンテナー スタイルのクエリを定義します:

A コンテナ スタイル クエリ を照会できます 計算値   クエリ コンテナ. 個々のブール値の組み合わせです スタイルの特徴 () それぞれが、クエリ コンテナーの単一の特定のプロパティをクエリします。

しかし、構文の例はまだありません — 簡単な説明だけです:

の構文  と同じです 宣言であり、そのクエリは、クエリ コンテナーの特定のプロパティの計算値が特定の値 (クエリ コンテナーに関しても計算される) と一致する場合は true、プロパティまたはその値が無効またはサポートされていない場合は不明、それ以外の場合は false . ブール構文とロジックの組み合わせ スタイルの特徴   スタイル クエリ と同じです CSS 機能クエリ。 （参照してください。 @サポート.)

ですから、そうです、時間があれば、次のようなことをやってのけることを期待する必要があります。

.posts {
  container-name: posts;
}

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

それはかなりばかげた例です。 注意すべきことの XNUMX つは、 container-type コンテナの inline-size しかし style. 次のように宣言できます。

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…だが すべてのコンテナクエリは style デフォルトでクエリ. 良い。 少なくとも今日の状態では。 ミリアム スザンヌ は すてきな 発生する可能性のある問題の概要 それと。

コンテナのスタイルのクエリが役立つのはどこですか? 私にはまだ分かりません！ しかし、私の心はいくつかの場所に行きます：

• カスタム プロパティ値: 状態インジケーターのように使用されるカスタム プロパティを見てきました。 DRY-switching メソッド アナは少し前にカバーしました. 値が変わり、スタイルも変わります。
• 別のダーク モード アプローチ: カスタム プロパティ値を再割り当てするボディ クラスの変更にすべてを基づいて行うのではなく、ボディの背景色が変わった場合などに、カラー パレット全体を変更できるかもしれません。
• より複雑なクエリ条件: たとえば、スタイルを適用したいのは、 size & style コンテナの条件が満たされています。

また、Una は CSS ポッドキャストで、コンテナー スタイル クエリは、既にイタリック体になっているテキストにイタリック体のテキストが含まれている場合など、扱いにくいスタイル設定の状況を防ぐのに役立つと述べました。 blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}