isolation

CSSisolation プロパティは、要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを定義します。

このプロパティは mix-blend-mode との組み合わせで使用すると特に有用です。

構文

/* キーワード値 */
isolation: auto;
isolation: isolate;

/* グローバル値 */
isolation: inherit;
isolation: initial;
isolation: unset;

isolation プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

auto
何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。
isolate
新しい重ね合わせコンテキストが必ず作成されます。

形式文法

auto | isolate

<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
.a {
  background-color: rgb(0,255,0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}

仕様書

仕様書 状態 備考
Compositing and Blending Level 1
Isolation の定義
勧告候補 Initial definition
初期値auto
適用対象すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
isolationChrome 完全対応 41Edge 未対応 なしFirefox 完全対応 36IE 未対応 なしOpera 完全対応 30Safari 完全対応 8WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 36Opera Android 完全対応 30Safari iOS 完全対応 8Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報