全CSSテクニック

レイアウト

row-rule・column-rule の書き方。Chrome 139+ はフラグで

CSS Gap Decorationsはグリッドやフレックスのギャップ領域にデコレーション線を描く機能です。Chrome 139+フラグで利用可能です。

親グリッドトラックを子に継承

Subgridは親グリッドの行/列トラックを子グリッドにそのまま継承する機能です。複雑なカードレイアウトでの整列一貫性を維持できます。

メディアクエリ（ビューポート基準）との違い

Container Queriesはビューポートではなく親コンテナサイズに応じてスタイルを変更する機能です。真のコンポーネントベースのレスポンシブデザインを可能にします。

子条件で親/兄弟を選択

:has()セレクタは子要素や後続要素の状態を条件に親や兄弟要素を選択できるリレーショナル擬似クラスです。

& で親セレクタを参照する書き方

CSS Nestingはプリプロセッサなしでブラウザネイティブにネストルールを記述できる機能です。&セレクタで親を参照します。

大きいプロジェクトのスタイル衝突をほどく

Cascade Layersは@layerルールでCSS優先順位を明示的に階層化する機能です。大規模プロジェクトでのスタイル衝突問題を解決します。

scroll() と view() タイムラインの使い方

Scroll-driven Animationはscroll()とview()タイムラインでスクロール位置に連動したCSSアニメーションを実装する機能です。

SPA でも MPA でも使える

View Transitions APIはページ間またはDOM状態変更時にスムーズな遷移アニメーションを提供します。SPAとMPAの両方で使用可能です。

デザインシステムでカラーパレットを動的に作る

color-mix()関数は2つの色を指定比率で混合して新しい色を作り出します。デザインシステムで動的カラーパレットを生成するのに便利です。

短いテキスト向け — 長い本文には性能コストがある

text-wrap: balanceはテキストの改行を均等に分配し、最終行に単語1つだけ残る問題を解決します。

ドロップダウンの位置指定も JavaScript なしで

CSSアンカーポジショニングは要素を他の要素に相対的に位置づける機能です。ツールチップやドロップダウンの位置指定をJavaScriptなしでCSSだけで実装します。