isolation

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´1æâ©.

CSS ã® isolation ããããã£ã¯ãè¦ç´ ãæ°ããéãåããã³ã³ããã¹ããçæããå¿è¦ããããã©ãããå®ç¾©ãã¾ãã

è©¦ãã¦ã¿ã¾ããã

isolation: auto;

isolation: isolate;

<section class="default-example" id="default-example">
  <div class="background-container">
    <div id="example-element">
      <img src="/shared-assets/images/examples/firefox-logo.svg" />
      <p><code>mix-blend-mode: multiply;</code></p>
    </div>
  </div>
</section>

.background-container {
  background-color: #f4f460;
  width: 250px;
}

#example-element {
  border: 1px solid black;
  margin: 2em;
}

#example-element * {
  mix-blend-mode: multiply;
  color: #8245a3;
}

ãã®ããããã£ã¯ mix-blend-mode ã¨ã®çµã¿åããã§ä½¿ç¨ããã¨ç¹ã«æç¨ã§ãã

æ§æ

css

/* ãã¼ã¯ã¼ãå¤ */
isolation: auto;
isolation: isolate;

/* ã°ãã¼ãã«å¤ */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: unset;

å¤

auto: ä½ããã®ããããã£ãå¿è¦ãªè¦ç´ ã«é©ç¨ãããå ´åã«ã®ã¿ãæ°ããéãåããã³ã³ããã¹ããä½æããã¾ãã
isolate: æ°ããéãåããã³ã³ããã¹ããå¿ãä½æããã¾ãã

å¬å¼å®ç¾©

åæå¤	`auto`
é©ç¨å¯¾è±¡	ãã¹ã¦ã®è¦ç´ ã SVG ã§ã¯ãã³ã³ããã¼è¦ç´ ãã°ã©ãã£ãã¯è¦ç´ ãã°ã©ãã£ãã¯åç§è¦ç´ ã«é©ç¨ããã¾ãã
ç¶æ¿	ãªã
è¨ç®å¤	æå®éã
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	ã¢ãã¡ã¼ã·ã§ã³ä¸å¯

å½¢å¼ææ³

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

ä¾

è¦ç´ ã§å¼·å¶çã«æ°ããéãåããã³ã³ããã¹ããçæ

HTML

html

<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>

CSS

css

.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;
}