コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する

本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま

[yarumato]

“レスポンシブ対応にはウインドウサイズ基準の @media だけだった。コンテナクエリ @container を使うと任意の要素を基準にできる。Reactなどのコンポーネントをベースとした開発と相性がいい。全ブラウザ対応済みは最近”

[takayamaki]

https://caniuse.com/css-container-queries によれば対応率は80%…もうちょっとだなぁ

[poad1010]

この記事をおすすめしました

[strawberryhunter]

なるべくクエリなしで済ませるようにしているので活用する機会が無いほうがいいかな。

[spark7]

全然わからんというか即忘れるプロパティになりそう。『要素をコンテナにするには、「container-type プロパティ」を指定します』

[otchy210]

左側にユーザの任意で幅が可変のメニュー領域があって、右側のメイン領域が残りの幅によってレスポンシブみたいなのを、JS 無しに簡単に実装出来るようになるな！

[manaten]

きたか〜

[Shinwiki]

要素の幅とかは別にいいんだけどフォントの大きさってみんなどうやって調節してんの？

[ducktoon]

顧客が本当に必要だったもの

[Helfard]

便利な気がする！

[securecat]

resizeプロパティが便利そうって思った

[cinefuk]

"コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。"

[mayumayu_nimolove]

まあほんのちょっと楽になる

[door-s-dev]

🎉

[hate_nao]

CSSむずすぎない？