CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用

Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。 Container Queries: Style Queries by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテナクエリとスタイルクエリの違い スタイルクエリの基礎知識 スタイルクエリの使い方 スタイルクエリのブラウザサポート スタイルクエリのリソース はじめに CSSのコンテナクエリは「コンテナのサイズ」だけではない

[coliss]

親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリ。

[ultimatebreak]

CSSは一旦リセットして新たにゼロから作り直した方がいいくらいにはメチャクチャになってきてる感ある

[iww]

進化ならいいんだけど、やり方がどんどん煩雑になっていくのは進化と呼んではいけないよな

[toaruR]

スマホサイトはダークモードほしいかも（´－｀）ダークなスマニューから飛んで眩しいと閉じちゃうし

[aceraceae]

単純なコンテナクエリよりも便利かもしんない。

[kvx]

どんどん便利になってるんだからいいじゃん

[murlock]

レイアウトにまつわるコンテナクエリはいいけどスタイルクエリというのは、またちょっと黒魔術み出てきそうで遺憾

[eartht]

昔からやってる人には便利かもしれんが、今から始める人にはなんでこんな複雑な…ってなってきそう。もういっそif文だけ書けるようにしといたら皆幸せなのかも

[renos]

もーついていけないよーーーーー

[otchy210]

少なくともメジャーブラウザ全部の最新版に機能が出揃って、どっかの賢い人がこれらをフル活用した CSS フレームワークを作ってくれるの待ち。

[JackP]

ここまでの知見を元にデザインシート言語を一から作りたい気持ちは分かるけど / ここまで現在のWeb標準が世界であまねく使われるとスクラップアンドビルドはもう無理だよねって気持ちは確実にある