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