Style containment
スタイルコンテインメントにより、counter-increment や counter-set、content プロパティの quote 値の影響が要素の子孫を超えて伝播しないことを保証します。これにより、コンポーネント内のカウンターが外部のカウンターに影響を与えることを防ぎ、予測可能なスタイリングを実現します。複雑なページでのスタイル計算の最適化にも寄与します。
概要
スタイルコンテインメントにより、counter-increment や counter-set、content プロパティの quote 値の影響が要素の子孫を超えて伝播しないことを保証します。これにより、コンポーネント内のカウンターが外部のカウンターに影響を与えることを防ぎ、予測可能なスタイリングを実現します。複雑なページでのスタイル計算の最適化にも寄与します。
対応ブラウザ
デスクトップ
Chrome 52+
Edge 79+
Safari 15.4+
Firefox 103+
モバイル
Chrome Android 52+
Safari iOS 15.4+
Firefox Android 103+
基本構文
CSS
.component {
contain: style;
}
.isolated-counter {
contain: style;
counter-reset: items;
}実務での使いどころ
-
コンポーネント間のカウンター干渉防止
独立したコンポーネント内のCSSカウンターが外部のカウンターに影響を与えないよう分離し、予測可能な番号付けを維持できます。
注意点
- スタイルコンテインメントは現在カウンターと引用符にのみ影響します。他のCSSプロパティの伝播は制限されません。
アクセシビリティ
- スタイルコンテインメントはレンダリング最適化の機能であり、アクセシビリティに直接影響しません。