🆕
5分で追いつく！2024年に使いたいCSS！
はじめに
最近のCSSを追えてなかったので、昨年主要なブラウザのすべての安定版で利用できるようになっているものを紹介します。
主に2023年に主要ブラウザでサポートされた機能
複雑なn-*番目の選択
子要素の「特定のクラスのn番目」といった選択ができるようになった。
CSSでネスト
SASSでのネストがCSSでできちゃいます。最高。
.card {}
.card:hover {}
/* 以下の様にネストで書ける */
.card {
&:hover {
}
}
コンテナクエリ
コンテナの幅に応じてスタイルを簡単に変えられるようになりました。
メディアクエリはビューポートを基準にしますが、コンテナクエリはコンテナに応じて変更できるイメージです。
引用：https://web.dev/blog/cq-stable?hl=ja
親セレクタ
:has()で特定の子要素を持つ親を選択できるようになった！（待望）
新しいビューポート単位lvh,svh,dvh
iOSのsafariなんかで100vhで指定しても隠れちゃう問題ありましたよね？
引用：https://developer.chrome.com/blog/whats-new-css-ui-2023?hl=ja
これに対応したビューポート単位が主要ブラウザでサポートされました。
例えば、dvhは動的に表示されるアドレスバーなどを想定したビューポートサイズを基準に定義されています。
引用：https://developer.chrome.com/blog/whats-new-css-ui-2023?hl=ja
まとめ
他にも一部対応していないブラウザがあるものを含めると新機能が多くあるので気になる方は下記の参考URLをチェックしてみて下さい！
参考
Discussion