モダンCSS
あなたのAIはこのCSSを知らないかもしれない — 2022年以降に使えるようになった新しいCSS機能の一覧です。 AIアシスタントの学習データに含まれていないことが多いため、 各ページの「AI用にコピー」でAIにコンテキストとして渡すのがおすすめです。
新しく利用可能になった機能
全主要ブラウザで使えるようになったばかりの機能（Baseline Newly）
テキストエリアや入力欄のサイズを入力内容に合わせて自動で伸縮させるプロパティです。field-sizing: contentを指定するだけで、これまでJavaScriptで実装していたtextareaの自動リサイズが不要になります。
ツールチップやドロップダウンを「基準要素（アンカー）」に紐付けて配置できる機能群です。anchor-nameで基準を宣言し、position-anchorとposition-areaで相対配置します。JSライブラリで行っていた位置計算をCSSだけで実現できます。
スタイルの適用範囲を特定の要素の部分木に限定するアットルールです。下限（to）も指定でき、「カードの中だけ、ただし埋め込みウィジェットの中は除く」のような範囲指定が可能。BEM的な命名規則に頼らないスコープ管理を実現します。
View Transitions APIで、状態変化の前後で「同じ要素」として扱う名前を付けるプロパティです。一覧→詳細への画像モーフのような遷移アニメーションを、ブラウザが前後のスナップショットから自動生成してくれます。
要素の背後にあるコンテンツにフィルター効果を適用するプロパティです。ガラス効果やぼかし効果を作成できます。
要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。
要素が最初に表示された瞬間の「開始スタイル」を定義するアットルールです。display: noneからの表示やDOM追加直後の要素に、JavaScriptなしでフェードインなどの出現アニメーションを付けられます。transition-behavior: allow-discreteとの併用が定番です。
CSS変数（カスタムプロパティ）に型・初期値・継承の有無を登録できるアットルールです。型を登録した変数はtransitionやanimationで補間可能になり、グラデーションのアニメーションなど従来不可能だった表現がCSSだけで実現できます。
ライトモード用とダークモード用の2色を1行で指定できるCSS関数です。メディアクエリで変数を二重定義する従来のダークモード実装を大幅に簡潔にできます。使用にはcolor-scheme: light darkの指定が必須です。
テキストの折り返し方法を制御するプロパティです。balanceで見出しの各行の長さを揃え、prettyで段落末尾の孤立した単語（1文字だけの行など）を防げます。日本語の見出しの不格好な改行対策にも有効です。
対応が限定的な最先端機能
一部のブラウザでのみ使える機能。プログレッシブエンハンスメント前提で
ユーザーがテキストを選択できるかどうかを制御するプロパティです。none、text、all、autoなどの値があり、UI要素のテキストが誤って選択されるのを防ぐために使用されます。
フォーム部品やチェックボックスなどのアクセント色を指定するプロパティです。ブラウザのデフォルトUIの色をカスタマイズでき、ブランドカラーに合わせたフォームデザインを実現できます。
スクロール領域の境界に達した時の動作を制御するプロパティです。auto、contain、noneの値があり、スクロールチェーン（親要素へのスクロール伝播）を防ぐのに便利です。
ユーザーが要素のサイズを変更できるかどうかを指定するプロパティです。none、both、horizontal、verticalの値があり、textareaのリサイズ動作を制御できます。
アニメーションの進行を時間ではなくスクロール位置に連動させるプロパティです（スクロール駆動アニメーション）。読了プログレスバーやパララックス、ビューポートに入ったら動き出す演出をJavaScriptなしで実装できます。
height: autoのような「キーワード値」へのtransition/animationを可能にするプロパティです。アコーディオンの開閉など「0から自然な高さまで」のアニメーションが、max-heightハックやJavaScriptなしで書けるようになります。
日本語の約物（括弧・句読点など）が持つ余分な空きを自動調整するプロパティです。「（」の前や連続する約物「）。」の間の空きを詰めて、組版ソフトのような美しい日本語テキストをWebで実現します。
定着した比較的新しい機能
2022年以降に全ブラウザ対応し、現在は安心して使える機能（Baseline Widely）
「子や後続の要素が条件を満たす親・前の要素」を選択できる擬似クラスです。長年不可能だった『親セレクタ』を実現し、JavaScriptなしで子の状態に応じた親のスタイリングができます。
Sassなどのプリプロセッサなしで、セレクタを入れ子（ネスト）にして書けるネイティブCSS機能です。親子関係のスタイルをまとめて記述でき、&で親セレクタを参照します。ビルドツール不要でSass風の書き心地を実現します。
ユーザーが実際に操作した後にのみ、フォーム入力の検証結果に応じてスタイルを適用する擬似クラスです。:invalidと違いページ表示直後の未入力フォームが赤くならないため、実用的なバリデーション表示がCSSだけで実現できます。
親グリッドのトラック（行や列）を子グリッドで継承できる機能です。複雑なレイアウトの整列が簡単になります。
2つの色を指定した比率で混ぜた色を生成するCSS関数です。ベース色から明るい色・暗い色・半透明色をCSSだけで派生でき、SassのdarkenやJavaScriptでの色計算を置き換えられます。CSS変数と組み合わせるとテーマ設計が大幅に簡潔になります。
人間の知覚に基づくOKLCH色空間で色を指定する関数です。明度（L）・彩度（C）・色相（H）で直感的に色を操作でき、明度を変えても見た目の明るさが揃うためカラーパレット設計に最適です。Display P3などの広色域も表現できます。
要素の周囲に輪郭線を描画するプロパティです。borderと似ていますが、レイアウトに影響しません。フォーカス時の視覚フィードバックに使用され、アクセシビリティの観点から重要です。
コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。
要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。
スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。
スクロールスナップを使用してスムーズなスクロール体験を提供します。scroll-snap-typeとscroll-snap-alignを組み合わせて使用します。
要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。layout、paint、size、styleなどの値で、要素が外部に与える影響を制限します。大規模なアプリケーションのパフォーマンス改善に有効です。
要素がキーボードからフォーカスされた場合にのみ適用される擬似クラスです。マウスクリックによるフォーカスには適用されないため、アクセシビリティを向上させながら不要なフォーカスリングを避けられます。
スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。
フォーム要素などのネイティブな見た目を制御するプロパティです。noneを指定することでブラウザ標準のスタイルを無効化し、カスタムスタイルを適用する際に使用します。
スタイルの優先順位を詳細度ではなく「レイヤーの宣言順」で管理するカスケードレイヤーです。reset・base・components・utilitiesのような層に分ければ、詳細度バトルや!importantの乱用を根本から解消できます。
要素がどのカラースキーム（ライト/ダーク）で表示されるかを示します。ブラウザのフォーム要素などのデフォルトスタイルに影響します。