6個のプロパティ
CSS内で変数を定義・使用できる機能です。--variable-name: valueで定義し、var(--variable-name)で参照します。テーマ切り替えや保守性の向上に大きく貢献し、デザインシステムの構築に不可欠です。
:root {
--primary-color: #3b82f6;
--spacing: 1rem;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。transform、opacity等を指定できますが、過剰な使用はパフォーマンスを悪化させるため注意が必要です。
.animated-element {
will-change: transform, opacity;
}要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。layout、paint、size、styleなどの値で、要素が外部に与える影響を制限します。大規模なアプリケーションのパフォーマンス改善に有効です。
.widget {
contain: layout style paint;
}画面サイズ、デバイスタイプ、印刷状況などの条件に基づいてスタイルを適用するルールです。レスポンシブデザインの基礎となる機能で、モバイル、タブレット、デスクトップなど様々なデバイスに対応できます。
@media (max-width: 768px) {
.container {
padding: 1rem;
font-size: 14px;
}
}テーブルのレイアウトアルゴリズムを制御するプロパティです。セルの幅をどのように計算するかを決定し、テーブルの描画パフォーマンスや見た目に影響します。大きなテーブルでの表示速度向上にも効果的です。
.table-auto {
table-layout: auto;
width: 100%;
}
/* セル内容に応じて幅が自動調整される */
th, td {
padding: 8px;
text-align: left;
}要素がどのカラースキーム（ライト/ダーク）で表示されるかを示します。ブラウザのフォーム要素などのデフォルトスタイルに影響します。
color-scheme: light dark;