全CSSテクニック

📏

CSS Gap Decorations

row-rule/column-ruleでギャップに線を描く

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

🧩

CSS Subgrid

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

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

📦

CSS Container Queries

親コンテナサイズに反応するコンポーネント

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

🔍

:has()セレクタ

子条件で親/兄弟を選択

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

📥

CSSネスティング

Sassなしでネイティブなネストルール記述

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

📚

CSS Cascade Layers

@layerでスタイル優先順位を明示的に制御

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

🖱️

スクロール駆動アニメーション

JSなしでスクロールベースのインタラクション実装

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

🎬

View Transitions API

ページ遷移時のスムーズなアニメーション

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

🎨

color-mix()

2つの色を比率で混合し動的カラー生成

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

⚖️

text-wrap: balance

見出しテキストの均等な改行

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

⚓

CSSアンカーポジショニング

JSなしで要素を他の要素にアンカー固定

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

💬

Popover API

HTMLネイティブポップオーバー/モーダル実装

Popover APIはHTML popover属性でモーダルとポップオーバーをネイティブ実装する機能です。アクセシビリティが自動サポートされJavaScriptが最小化されます。