私はいくつか書いた コンテナー スタイル クエリに関する初期の考え ちょっと前。 まだ初日です。 それらはすでに定義されています CSS コンテインメント モジュール レベル 1 仕様 (現在は編集者の下書きの状態です) しかし、未解決の議論がいくつか行われています。
基本的な考え方は、コンテナを定義し、計算されたスタイリングに基づいて、その子孫に条件付きでスタイルを適用できるということです。
@container <name>? <conditions> { /* conditional styles */
}私がこれまでに見た中で最も良い例は、次のようなものからイタリック体を削除することです <em>, <i>, <q> コンテンツがすでにイタリック体になっているコンテキストで使用されている場合:
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; }
}それが一般的な考え方です。 しかし、ご存じないかもしれませんが、仕様の編集者である Miriam Suzanne は、継続的かつ完全な一連の仕様を保持しています。 コンテナ スタイル クエリに関する個人的なメモ それは公開されています。 それは先日更新されたので、スタイル クエリのより微妙な側面に頭を悩ませようと時間を費やしました。 非公式なものですが、気になった点を書き留めておこうと思います。 知るか？ 多分それは私たちが最終的に楽しみにできるものです!
すべての要素はスタイル コンテナーです
明示的に割り当てる必要さえありません container-name or container-type デフォルトではすべてがスタイル コンテナーであるため、スタイル コンテナーを定義します。
上の例でイタリック体を削除したことがわかりますか? コンテナーを識別しないことに注意してください。 を使用してクエリに直接ジャンプします。 style() 関数。 では、どのコンテナがクエリされているのでしょうか? それはなるだろう 要素の直接の親 適用されたスタイルを受け取ります。 そうでない場合は、 次に近い相対コンテナー それが優先されます。
私はすきです。 クエリが一致するものを検索し、一致する条件が見つかるまでバブルアップし続けるのは、非常に CSS-y です。
スタイルに基づいた暗黙的なコンテナを使用して回避できる理由を、私の小さな脳が理解するのは困難でした。 size & inline-size. ミリアムはそれをうまく説明しています：
ディメンション クエリには css が必要です 封じ込め レイアウトのループを防ぐために、コンテナのサイズ、レイアウト、およびスタイルに注意してください。 封じ込めは広く適用するには侵襲的なものであるため、作成者がどの要素がコンテナーのサイズであるか (またはそうでないか) を慎重に制御することが重要でした。
スタイルベースのクエリには、同じ制限はありません。 CSS には、子孫のスタイルが祖先の計算されたスタイルに影響を与える方法が既にありません。 したがって、封じ込めは必要なく、エレメントを スタイル クエリ コンテナ.
（強調鉱山）
それはすべて結果に帰着します — すべてがすぐに使えるスタイル クエリ コンテナーである限り、その結果はありません。
- コンテナが見つかった場合: そのコンテナに対して条件が解決されます。
- 複数のコンテナーが一致する場合: 最も近い相対コンテナーが優先されます。
- 一致するものが見つからない場合:
unknown戻ってきた。
それは同じです CSSの残りの部分としての「許し」の精神.
コンテナーは、ディメンション クエリとスタイル クエリの両方をサポートできます
明示的ななしでスタイルクエリを定義したいとしましょう container-name:
@container style(font-style: italic) { em { font-style: normal; }
}これは機能するため すべての要素はスタイル コンテナーです、関係なく container-type. これにより、スタイルを暗黙的にクエリし、最も近い一致に依存することができます。 これは、スタイル コンテナーを確立する際に悪影響がないため、まったく問題ありません。
明示的に使用する必要があります container-type すべての要素がスタイル クエリであるため、スタイル クエリの場合はそうではありません。 それはまた、このコンテナが両方ともスタイルであることを意味します & ディメンション クエリ:
.card-container { container: card / inline-size; /* implictly a style query container as well */
}コンテナをクエリ対象から除外する
おそらく、コンテナーをマッチング プロセスに参加させたくないでしょう。 それはそれが設定できるかもしれないところです container-type: none 要素に。
.some-element { container-type: none;
}明示的なスタイルのクエリ コンテナにより、クエリ対象をより詳細に制御できます
たとえば、次のスタイル クエリを作成するとします。 padding 、明示的に名前が付けられたコンテナーを使用しているか、最も近い直接の親を使用しているかに関係なく、最適なコンテナーを決定する信頼できる方法はありません。 その理由は padding 継承されたプロパティではありません。
したがって、そのような場合は、使用する必要があります container-name どのコンテナーからプルできるかをブラウザーに明示的に通知します。 コンテナに複数の明示的な名前を付けて、より多くの条件に一致させることもできます。
.card { container-name: card layout theme;
}ああ、 container-name オプションの任意の数を受け入れます 再利用可能な コンテナの名前！ これは、ブラウザーが一致を検索する際の選択を支援することになると、さらに柔軟になります。
.theme { container-name: theme;
}
.grid { container-name: layout;
}
.card { container-name: card layout theme;
}XNUMX つのコンテナーが渡された場合の "フォールバック" と見なすこともできるのではないかと思います。
スタイル クエリを組み合わせることができます
or & and 演算子を使用すると、クエリを組み合わせて物事を DRY に保つことができます。
@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. */
}スタイルの切り替え
コンテナー スタイルのクエリと Tab Atkins の非公式クエリには少し重複があります。 CSSトグルの提案. たとえば、XNUMX つの font-style 値、言う italic & normal:
em, i, q { font-style: italic;
} @container style(font-style: italic) { em, i, q { font-style: normal; }
}涼しい。 しかし CSSトグルの提案 示唆している toggle() function はより簡単なアプローチになります。
em, i, q { font-style: toggle(italic, normal);
}しかし、この種のバイナリ ユース ケースを超えるものはどこにありますか toggle() はあまり適していません。 ただし、スタイル クエリは問題ありません。 ミリアムは、スタイル クエリがより適している XNUMX つのインスタンスを特定します。 toggle():
/* When font-style is italic, apply background color. */
/* Toggles can only handle one property at a time. */
@container style(font-style: italic) { em, i, q { background: lightpink; }
} /* When font-style is italic and --color-mode equals light */
/* Toggles can only evaluate one condition at a time */
@container style((font-style: italic) and (--color-mode: light)) { em, i, q { background: lightpink; }
} /* Apply the same query condition to multiple properties */
/* Toggles have to set each one individually as separate toggles */
@container style(font-style: italic) { em, i, q { /* clipped gradient text */ background: var(--feature-gradient); background-clip: text; box-decoration-break: clone; color: transparent; text-shadow: none; }
}スタイル クエリは「カスタム プロパティのトグル ハック」を解決します
スタイル クエリは、 「CSS カスタム プロパティのトグル トリック」. そこで、空のカスタム プロパティを設定します (--foo: ;）、コンマ区切りのフォールバック メソッドを使用して、カスタム プロパティが実際の値に設定されているときにプロパティのオンとオフを「切り替え」ます。
button { --is-raised: ; /* off by default */ border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1)); box-shadow: var( --is-raised, 0 1px hsl(0 0% 100% / 0.8) inset, 0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2) ); text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
} button:active { box-shadow: var(--is-raised, 0 1px 0.2em black inset);
} #foo { --is-raised: initial; /* turned on, all fallbacks take effect. */
}
これは非常にクールです。また、スタイル コンテナー クエリを使用すると、多くの作業が簡単になります。
スタイル クエリと CSS 生成コンテンツ
によって生成された生成されたコンテンツについては、 content の財産 ::before & ::after 疑似要素、一致するコンテナーは、コンテンツが生成される要素です。
.bubble { --arrow-position: end end; container: bubble; border: medium solid green; position: relative;
} .bubble::after { content: ""; border: 1em solid transparent; position: absolute;
} @container bubble style(--arrow-position: end end) { .bubble::after { border-block-start-color: inherit; inset-block-start: 100%; inset-inline-end: 1em; }
}スタイル クエリと Web コンポーネント
Web コンポーネントをコンテナとして定義し、スタイルでクエリできます。 まず、 <template> コンポーネントの:
<template id="media-host"> <article> <div part="img"> <slot name="img">…</slot> </div> <div part="content"> <slot name="title">…</slot> <slot name="content">…</slot> </div> </article>
</template>次に、 :host 設定するコンテナとしての疑似要素 container-name container-type、およびその上のいくつかの高レベルの属性:
:host { container: media-host / inline-size; --media-location: before; --media-style: square; --theme: light;
}内部の要素 <media-host> のパラメータを照会できます <media-host> 素子：
@container media-host style(--media-style: round) { [part='img'] { border-radius: 100%; }
}次は何ですか？
繰り返しますが、ここに書き留めたものはすべてミリアムのメモに基づいており、それらのメモは公式の仕様に代わるものではありません。 しかし、それらは現在議論されていることと、将来どこに着地する可能性があるかを示しています。 Miriam が、まだ進行中のいくつかの未解決の議論をリンクしてくれたことに感謝します。
- コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。ここをクリック
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/digging-deeper-into-container-style-queries/
