📘
最近知った CSS のやつ
CSS なんもわからん
CSS Modules
CSS ファイルをモジュールとして読み込んで使おう、というコンセプト? っぽい。CSS Modules を実現するためのフレームワークやライブラリがたくさんあるっぽい。
使ったことないけど、これっていわゆる Scoped CSS とは違う概念なのか? もうちょい詰めた概念って印象はちょっとあるけど。
Lighting CSS
CSS Modules の実装の1つで、vite で CSS Modules をやるときは Lighting CSS を使う感じになるっぽい。(vite が提供している標準の方法)
最近増えたりしたこと
いつ増えたか調べてないけど「こんなんできるんか……」となったやつ。
CSS のセレクタのネスト
/* Without nesting selector */
parent {
/* parent styles */
child {
/* child of parent styles */
}
}
/* With nesting selector */
parent {
/* parent styles */
& child {
/* child of parent styles */
}
}
/* the browser will parse both of these as */
parent {
/* parent styles */
}
parent child {
/* child of parent styles */
}
便利。
Media Query
昔は横幅・縦幅とか screen / print (つまり Media Type) くらいしかなかった気がするけど、すごい色々増えてる。
Scroll Snap
要素にスクロールをスナップさせることができる。すごい。
rgb 関数で CSS Variable を使う
rgb(from var(--primary-color) r g b / 0.5)
from を組み合わせて使うことで CSS Variable の色に変化を加えた色を使うことができる。
position: sticky
画面をスクロールすると途中で止まるような要素の配置を定義できる。
Discussion