最近のCSSを改めてちゃんと学んでみた

ARANK

はじめに!修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。1. モダンCSSの現状と進化2019-2024年に標準化された主要な機能2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。レイアウト関連：コンテナクエリ - 親要素のサイズに基づくレスポンシブデザインCSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方）セレクタと制御：親要素セレクタ (:has) - 子要素に基づいて親要素を選択カスケードレイヤー (@layer) - スタイルシートの優先順位を明示的に制御スコープ機能 (@scope) - スタイルの適用範囲を明示的に制限視覚効果とアニメーション：スクロール駆動アニメーション - スクロールに連動したアニメーションcolor-mix() 関数 - 色を混…