マスター

CSS · エキスパート - 設計、内部構造、エッジケース

• レンダリングパイプライン: リフロー、リペイント、コンポジットブラウザのレンダリングの4つのフェーズを理解し、どのCSSプロパティが高コストなのか、そして will-change が内部でどのように働くのかを正確に把握しましょう。
• カスケードレイヤー(@layer)と @scope2つの新しいカスケード基準、すなわちレイヤーとスコープの近接性を使いこなし、詳細度の争いなしにスタイルを設計しましょう。
• 色と高度な関数: oklch、color-mix、min/max知覚的な色空間、相対色構文、そして型付きの数学関数を活用し、ブラウザが計算してくれるデザインシステムを構築しましょう。
• エキスパートのグリッド: subgrid、auto-fit、minmaxメディアクエリなしで自己適応するグリッドを構築し、subgrid で入れ子のコンポーネントを親のトラックに揃えましょう。
• モダンなインタラクション: scroll-snap、ビュートランジション磁力のあるスクロール、ブラウザがアニメーションする状態遷移、そして prefers-reduced-motion の厳格な尊重を組み立てましょう。