Widely available 安心して使用可能。主要ブラウザで広くサポートされている。
エフェクト Widely available

isolation property

isolation: isolate を指定すると、新しいスタッキングコンテキストが生成され、mix-blend-mode や z-index の影響範囲を制限できる。特に mix-blend-mode を使う際に、ブレンド効果が意図しない親要素にまで波及するのを防ぐために重要。z-index の管理を局所化する用途でも使われる。

エフェクトスタッキング

概要

isolation: isolate を指定すると、新しいスタッキングコンテキストが生成され、mix-blend-mode や z-index の影響範囲を制限できる。特に mix-blend-mode を使う際に、ブレンド効果が意図しない親要素にまで波及するのを防ぐために重要。z-index の管理を局所化する用途でも使われる。

対応ブラウザ

デスクトップ

Chrome 41+
Edge 79+
Safari 8+
Firefox 36+

モバイル

Chrome Android 41+
Safari iOS 8+
Firefox Android 36+

基本構文

CSS 
.blend-container {
  isolation: isolate;
}

.blend-container .overlay {
  mix-blend-mode: multiply;
  /* ブレンド効果は .blend-container 内に限定される */
}

実務での使いどころ

  • ブレンドモードの範囲制限

    mix-blend-mode の効果がコンテナ外の要素に影響しないよう分離する。

注意点

  • isolation: isolate はスタッキングコンテキストを生成するため、z-index の挙動に影響する。

アクセシビリティ

  • isolation は視覚的な表示制御のみで、アクセシビリティに直接影響はないが、z-index の変化で操作順序に影響がないか確認する。

参考リンク