Container Queries
親コンテナのサイズに対して条件分岐して要素のstyleを指定できる
@mediaはviewportサイズに対して指定するが、それの親コンテナ版
この図がわかりやすい
>
2つの異なるコンテナを定義し、その中で同一の「コンポーネントA」を使用している
コンテナのサイズによって、コンポーネントAのサイズが変わっているのがわかる
これは@mediaでは書くことが出来ない
どちらも同じviewport sizeなので。
参考
図がわかりやすい
解決する問題の例など
@media で指定していると、タブレットでそのstyleを見せることができない場合がある>#WIP
まあ、できることはわかる
が、基本的にはLayout Primitive的な発送で、
そもそも条件分岐を書きたくないという気持ちはある
でもまあコーナーケースでは必要になると思う
その際はmediaqueryより便利だと思う
そもそも使うモチベが低いので調べるのを中断した
必要になったらまた調べる
入門、ユースケース
2つの登場人物
container側
css/* コンテナの定義 */
main, .sidebar {
container: inline-size;
}item側
@media のノリで使うcss .card {
display: grid;
grid-template:
" image " auto
"content" auto
/ 100% ;
}
@container (width > 400px) {
.card {
grid-template:
"image content" auto
/ auto 1fr ;
}
}Componentのwidthをどう指定するかのような話を加味すれば
react等ではあまり必要に鳴らなそう？
「親が子のスタイルを決定する」という感じがやりやすい
>記述したスタイルよっては、コンテナ要素とコンテナ内の要素が相互に参照しあうおそれもあります。これを回避するため、コンテナを定義した要素にはスタイルの封じ込め（containment）が行われます。封じ込めは、定義した要素の外に影響を及ぼさないと宣言することで、ブラウザにレンダリングの最適化余地を与える機能です。