全ブラウザ対応したcontainer queryは何がスゴイのか？

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night

[pwatermark]

コレ系やろうとしたらJavaScriptでどうにかするしか無かったのが、CSSで行けるようになった、みたいな認識でいいのかな？フロントエンドとしてはビジネスロジックじゃないもの書かなくていいのは助かる

[lifeisadog]

多用したときのパフォーマンスはどうなんだろう

[y-kawaz]

20年以上前から欲しかったやつ。

[gothedistance]

わかりやすい解説助かります！

[ryosuke-fujii]

ウィンドウサイズ基準ではなくコンテナサイズ基準でレスポンシブ対応ができる。

[rochefort]

良さそう

[kuracom]

つい最近 aspect-ratio 非対応のブラウザで客先の端末チェック受けたので「全ブラウザ対応」は気をつけた方が良い

[teppeis]

いい時代だ

[t_motooka]

つい最近もJSで対応してたけど、これに置き換えたい！

[z1h4784]

へーついに全ブラウザ対応したのか。それでも端末サイズによって表現を変える場所を多数設けるのはやめるべきというバッドノウハウは依然としてあると思うけど

[ET777]

よかった

[yarumato]

“CSSで ＠mediaの基準はウィンドウ幅。ウィンドウ幅だけで複雑なレスポンシブ対応は限界がある。そこで＠container、任意の要素を基準にできる。React等のコンポーネント開発と相性がよい”

[cpw]

便利になってるなー

[lli]

へー。

[murlock]

CSSゴリゴリ書く機会も減ってきたけどこれはほんとありがたい。比較演算子も使えるようになったんだっけ？

[h_taiji]

共有

[hamaco]

へー、便利そうだ。

[Keisuke69]

すごくわかりやすい資料だった

[masa8aurum]

`container-type`, `@container`, `cqw`, `cqh`

[teramako]

便利そう。 container-type, @containerクエリ, cqw/cqh単位