📘

最近知った CSS のやつ

2025/01/21に公開

CSS なんもわからん

CSS Modules

CSS ファイルをモジュールとして読み込んで使おう、というコンセプト? っぽい。CSS Modules を実現するためのフレームワークやライブラリがたくさんあるっぽい。

https://github.com/css-modules/css-modules

使ったことないけど、これっていわゆる Scoped CSS とは違う概念なのか? もうちょい詰めた概念って印象はちょっとあるけど。

Lighting CSS

CSS Modules の実装の1つで、vite で CSS Modules をやるときは Lighting CSS を使う感じになるっぽい。(vite が提供している標準の方法)

最近増えたりしたこと

いつ増えたか調べてないけど「こんなんできるんか……」となったやつ。

CSS のセレクタのネスト

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

/* 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) くらいしかなかった気がするけど、すごい色々増えてる。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Scroll Snap

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts

要素にスクロールをスナップさせることができる。すごい。

rgb 関数で CSS Variable を使う

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

rgb(from var(--primary-color) r g b / 0.5)

from を組み合わせて使うことで CSS Variable の色に変化を加えた色を使うことができる。

position: sticky

https://developer.mozilla.org/en-US/docs/Web/CSS/position

画面をスクロールすると途中で止まるような要素の配置を定義できる。

Discussion