5個のプロパティ
CSS内で変数を定義・使用できる機能です。テーマ切り替えや保守性の向上に大きく貢献します。
:root {
--primary-color: #3b82f6;
--spacing: 1rem;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。
.animated-element {
will-change: transform, opacity;
}要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。
.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;
}