コンテナスタイルのクエリをより深く掘り下げます

私は少し前にコンテナスタイルのクエリに関するいくつかの初期の考えを書きました。まだ早い時期です。それらはすでにCSS封じ込めモジュールレベル3の仕様（現在編集者のドラフトステータス）で定義されていますが、まだいくつかの顕著な議論が行われています。

基本的なアイデアは、コンテナを定義してから、計算されたスタイリングに基づいてその子孫に条件付きでスタイルを適用できるということです。

私がこれまで見た中で最も良い例は、＆lt; em＆gt;＆lt; i＆gt;、＆lt; q＆gt;のようなものから斜体を削除することです。コンテンツが既にイタリック化されているコンテキストで使用されている場合：

@container <name>? <conditions> {
  /* conditional styles */
}

それが一般的なアイデアです。しかし、あなたがそれを知らなかったなら、スペックの編集者であるミリアム・スザンヌは、公開されているコンテナスタイルのクエリに関する継続的かつ徹底的な個人ノートのセットを維持しています。先日更新され、スタイルクエリのより微妙な側面に頭を包み込もうとして、そこでしばらく時間を費やしました。それは非公式のものですが、私は私に際立っていたいくつかのことを書き留めると思いました。知るか？たぶんそれは私たちが最終的に楽しみにできるものです！

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

すべての要素はスタイルコンテナ

です

すべてがデフォルトでスタイルコンテナであるため、スタイルコンテナを定義するためにコンテナ名またはコンテナタイプを描写する必要さえありません。

では、イタリック体を削除する上記の例がありますか？コンテナが識別されないことに注意してください。 Style（）関数を使用して、クエリにすぐにジャンプします。では、どのコンテナが照会されていますか？それは、適用されたスタイルを受信する要素

の直接の親になるでしょう。そうでなければ、それは

次の最も近い相対コンテナ

です。これは優先されます。 私はそれが好きです。クエリが試合を検索するのは非常にCSS-Yです。その後、マッチング条件が見つかるまでバブルアップし続けます。 私の小さな脳が、スタイルに基づいて暗黙のコンテナを逃れることができる理由を理解するのは困難でしたが、サイズやインラインサイズなどの寸法クエリを扱っている場合はそれほどではありません。ミリアムはそれをうまく説明しています：

寸法クエリには、レイアウトループを防ぐために、コンテナのサイズ、レイアウト、およびスタイルにCSS

containment

が必要です。封じ込めは広く適用するための侵略的なものであるため、著者がどの要素がサイズの容器であるか（またはそうでない）を慎重に制御することが重要でした。

スタイルベースのクエリには同じ制限がありません。 子孫スタイルでは、祖先の計算されたスタイルに影響を与えるためのCSSにはすでにありません。 （強調鉱山）

それはすべて結果に帰着します。そのうち、すべてが箱から出してスタイルクエリコンテナである限り、何もありません。 容器が見つかった場合：その容器に対して条件が解決されます。

複数のコンテナが一致する場合：最寄りの相対容器が優先されます。

• 一致が見つからない場合：不明。
それは他のCSSと同じ「寛容」の精神です。
コンテナは、次元クエリとスタイルの両方のクエリをサポートできます

明示的なコンテナ名なしでスタイルクエリを定義したいとしましょう：

これは、すべての要素がスタイルコンテナ

であるため、コンテナタイプに関係なく機能するためです。それが、私たちが暗黙的にスタイルを照会し、最も近い試合に依存することを可能にするものです。そして、スタイルコンテナを確立する際に不利な副作用がないので、これはまったく問題ありません。

寸法クエリには明示的なコンテナタイプを使用する必要がありますが、すべての要素はスタイルクエリであるため、スタイルクエリではそれほど多くはありません。それはまた、このコンテナがスタイル

@container <name>? <conditions> {
  /* conditional styles */
}

と

の両方のクエリの両方であることを意味します：

クエリから容器を除外します

おそらく、コンテナがマッチングプロセスに参加したくないでしょう。それは、コンテナタイプを設定することが可能かもしれません：要素になし。

明示的なスタイルクエリコンテナは、クエリの何が得られるかをより多くの制御を提供します

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

たとえば、パディングのスタイルクエリを書くことになった場合、明示的に指定されたコンテナまたは最寄りの直接親を使用しているかどうかにかかわらず、最適なマッチングコンテナを決定する信頼できる方法はありません。これは、パディングが継承されたプロパティではないためです。

したがって、そのような場合、コンテナ名を使用して、ブラウザに引​​用できるコンテナを明示的に通知する必要があります。コンテナに複数の明示的な名前を付けることもできます。

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

ああ、コンテナ名は、コンテナのオプションと

再利用可能な

名前を任意の数を受け入れます！それは、マッチを検索するときにブラウザが選択できるようにすることに関して、さらに柔軟性があります。

1つの容器が渡された場合には、それが「フォールバック」とも見なされるのだろうか。

スタイルクエリを組み合わせることができます

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

またはオペレーターは、織物を組み合わせて物事を乾燥させ続けることを許可しています：

@container <name>? <conditions> {
  /* conditional styles */
}

スタイルの切り替え

コンテナスタイルのクエリと、トグル（）関数を定義するために行われている作業の間には少し重複があります。たとえば、イタリックと正常と言う2つのフォントスタイルの値を循環させることができます。

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

かっこいい。しかし、CSSトグルの提案は、Toggle（）関数がより単純なアプローチになることを示唆しています：

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

しかし、この種のバイナリユースケースを超えたものは、golggle（）がそれほど適していない場所です。ただし、スタイルクエリは行ってもいいです。ミリアムは、スタイルクエリがトグル（）よりも適切である3つのインスタンスを識別します。

スタイルクエリは、「カスタムプロパティトグルハック」を解決します

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

スタイルクエリは、「CSSカスタムプロパティトグルトリック」の正式なソリューションであることに注意してください。そこには、空のカスタムプロパティ（ - フー：;）を設定し、カスタムプロパティが実際の値に設定されたときに、コンマ分離フォールバックメソッドを使用してオンとオフを「切り替える」ために使用します。

それは非常にクールで、スタイルのコンテナクエリが些細なものになる多くの作業もあります。

.some-element {
  container-type: none;
}

スタイルクエリとCSS生成コンテンツ

::前のコンテンツプロパティによって生成されたコンテンツの生成されたコンテンツの場合、::擬似要素の後、一致するコンテナはコンテンツが生成される要素です。

スタイルクエリとWebコンポーネント

.card {
  container-name: card layout theme;
}

Webコンポーネントをコンテナとして定義し、スタイルごとにクエリすることができます。まず、＆lt; Template＆gt;があります。コンポーネントの：

次に、次のものを使用します。コンテナとしてホストの擬似要素を使用して、コンテナ名、コンテナタイプ、およびいくつかの高レベルの属性を設定します。

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

＆lt; Media-host＆gt;の内部の要素＆lt; Media-host＆gt;のパラメーターを照会できます要素：

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

次は何ですか？

繰り返しますが、ここで私が書き留めたものはすべてミリアムのメモに基づいており、これらのメモは公式の仕様の代わりではありません。しかし、それらは議論されているものと、将来どこに着くことができるかを示しています。ミリアムは、私たちが従うことができる一握りの傑出した議論をリンクしてくれたことに感謝します。

em, i, q {
  font-style: italic;
}

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

複数の宣言を制御する高レベルのカスタムプロパティ＃5624

style（）クエリは！重要なフラグを許可する必要がありますか？ ＃7413

標準プロパティのスタイルクエリをレベル4に移動します＃7185

• AT-Rule Preludes＃6966
をテストする機能を追加します

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