CSS の Container Queries おためし - 見返すかもしれないメモ

CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (max-width: 400px) { div { background-color: red; } } /* コンテナクエリの例 */ /* div の親要素の幅が 400px 以下だったら、div を赤くする */ @container (max-width: 400px) { div { background-color: red; } } その機能が Google Chrome Canary で使えるようにされたと聞いたので、使ってみた。 こ

[mizdra]

デモが可愛い

[shimarisugi]

これずっとほしかった。従来だとjavascriptからResizeObserverで要素の幅変化を検出しないといけなかった。

[mohritaroh]

これは便利そう

[diveintounlimit]

can i useで上がってきたが仕様も無くどのブラウザでもavailableじゃなかったしぐぐらびりてぃが低すぎて検索にかからないので何だこれ？ってなってたありがとう。

[tymikii]

かわいい

[hamaco]

デモがかわいい

[maritimecolor]

便利そう！あとサンプルかわいすぎる・・・！[css][レスポンシブ]

[field_combat]

親要素サイズで分岐できるらしい。へー

[otchy210]

ほほほう。これはまたコンポーネントとずいぶん相性が良い機能だなぁ。ある程度実装が進んだら、マイナーブラウザに polyfill してでも導入する価値がありそう。

[mangano-ito]

例がおもしろくてかわいい．

[eartht]

とても良いが、例によってブラウザ的な問題で実務で使えるようになるのは何年先か…

[ki_sz]

kawaii!!

[raimon49]

◕ ‿‿ ◕

[chambersan]

かわいい

[lufiabb]

かわいい

[efcl]

@containerクエリ。 親要素のサイズで変化する

[stefafafan]

デモかわいい…

[takaya1992]

かわいい

[kvx]

欲しかったやつ。初めから用意されていて欲しかった。

[uva]

可愛い

[fai_fx]

高度に発達したCSSは、魔法と区別が付かない…

[hitode909]

おもしろい