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

isolation property

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

エフェクトスタッキング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
isolation
41
79
36
8
41
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.blend-container {
  isolation: isolate;
}

.blend-container .overlay {
  mix-blend-mode: multiply;
  /* The blending effect is confined to the .blend-container */
}

ライブデモ

Isolation: Auto( with)

isolation property Isolation: auto( with) demo.

プレビュー全画面表示

Isolation: Isolate(limited)

isolation property Isolation: isolate(limited) demo.

プレビュー全画面表示

Practical Example: cardinsidelimited

isolation property Practical example: cardinsidelimited demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク