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

このプロパティは background-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
適用対象全要素. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応41 なし36 なし30 あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応41 ? あり36 ?8 ?

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo, YuichiNukiyama
最終更新者: mfuji09,