レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説

CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと

[coliss]

CSSのコンテナクエリと:has()疑似クラスでレスポンシブの実装が今まで変わります。

[sisya]

仕様が安定したら教えてという感じ。数年前のJavaScriptライブラリ乱立時代のような気持ちにさせられる。

[hase0510]

hasはず〜〜〜〜っと待ってた 時間かかったなあ

[sucelie]

いよいよみんな使えるぜってレベルまで各ブラウザで実装されてから紹介してほしい・・・

[mohno]

「CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます」/他のブラウザでサポートされるのはいつ頃なんだろうね。

[otchy210]

@container と :has はまじで楽しみ。ウェブサイトで普通に使えるほどにサポートが広がるのはまだ先でも、Chrome エクステンションとかではすぐにも使える。

[y-kawaz]

has実装来るの本っ当ーーーに長かったね。ずっと待ってたけどここ数年はもう来ないもんだと諦めてたわ。嬉しい。

[tCy_ab]

webdeb

[shimarisugi]

趣味プロダクトでは既にcontainer queryバリバリ使ってる。便利すぎ。

[field_combat]

インラインで書くときとかに便利なんかな。サンプルだと冗長すぎて辛そう

[localnavi]

:has()疑似クラスは、jQueryで重宝しているのでCSSで使えるようになるのはありがたい。で、Chrome以外で普通に使えるようになったら知らせてください。

[eartht]

あー。IE対応の頃のクセがまだ抜けてなくて、gridすら使ってないワシには早すぎる話よ。

[NOV1975]

そろそろデザイン工夫するの飽きてくれねーかなー。もう、webページなんてyoutubeのクソ動画より訴求力ないから金かけないでほしいわ

[ishiduca]

「minimal css」とか「the css good parts」とか、私的なものでいいので、ベストプラクティスなサブクラスを定義してほしいなぁ

[toblog]

IEも無くなったし本格的に使えるようになるのも早くなったな。

[ultimatebreak]

gridあたりからついていけなくなってきている…

[aox]

スポンジボブの親戚でしょうか

[wirknichtvoraus]

コンテンツに応じたデザインがやりやすくなるかな。使えるのはまだ先そうだけれど。

[kawaosa]

コンテナクエリ :has :not @container

[seal2501]

ええ？コンポーネントにレスポンシブに関するドメイン知識を持たせるのかい？ / 便利になるのは間違い無いけど銀の弾丸では無いから過度に期待はしていない