Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

CSS Element Queries

Dev

レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか?
気になった。メディアクエリーはビューポートを基準にスタイルを変化させるのに対し、エレメントクエリーは要素の幅や高さ、数に対してスタイルを変化させる。

パッと思いついた使いみちは、横並びのリストで中の要素の数が増えたときに nth-child とかで行を一段落とすとか、要素の高さが狭いときはボックス内にスクロールつけるとか、そんな感じ。

すでに発表してる人もいた。
CSS Element Queries
CSS の仕様ではないとのこと。

EQCSS については別の記事もあった。
[JS]コンテンツに応じたレスポンシブデザイン!要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS
デモも多めなので、エレメントクエリーがどんなふうに使えるか把握しやすい。