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 г..
CSS-ÑвойÑÑво isolation опÑеделÑÐµÑ Ð´Ð¾Ð»Ð¶ÐµÐ½ ли ÑÐ»ÐµÐ¼ÐµÐ½Ñ ÑоздаваÑÑ Ð½Ð¾Ð²Ñй конÑекÑÑ Ð½Ð°Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ stacking context.
ÐнÑеÑакÑивнÑй пÑимеÑ
isolation: auto;
isolation: isolate;
<section class="default-example" id="default-example">
<div class="background-container">
<div id="example-element">
<img src="/proxy/developer.mozilla.org/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;
}
ÐÑо ÑвойÑÑво оÑобенно полезно пÑи иÑполÑзовании ÑовмеÑÑно Ñ background-blend-mode.
СинÑакÑиÑ
/* ÐлÑÑевÑе Ñлова */
isolation: auto;
isolation: isolate;
/* ÐлобалÑнÑе знаÑÐµÐ½Ð¸Ñ */
isolation: inherit;
isolation: initial;
isolation: unset;
СвойÑÑво isolation ÑказÑваеÑÑÑ Ð² каÑеÑÑве знаÑÐµÐ½Ð¸Ñ Ð¾Ð´Ð½Ð¾Ð³Ð¾ из нижеÑледÑÑÑиÑ
клÑÑевÑÑ
Ñлов.
ÐнаÑениÑ
auto-
ÐовÑй конÑекÑÑ Ð½Ð°Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ ÑоздаÑÑÑÑ ÑолÑко в Ñом ÑлÑÑае, еÑли ÑÑо ÑÑебÑеÑÑÑ Ð´Ð»Ñ Ð¾Ð´Ð½Ð¾Ð³Ð¾ из ÑвойÑÑв, пÑименÑемÑÑ Ðº ÑлеменÑÑ.
isolate-
ÐовÑй конÑекÑÑ Ð½Ð°Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð´Ð¾Ð»Ð¶ÐµÐ½ бÑÑÑ Ñоздан.
ФоÑмалÑнÑй ÑинÑакÑиÑ
isolation =
<isolation-mode>
<isolation-mode> =
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;
}
СпеÑиÑикаÑии
| Specification |
|---|
| Compositing and Blending Module Level 2 # isolation |
| ÐаÑалÑное знаÑение | auto |
|---|---|
| ÐÑименÑеÑÑÑ Ðº | ÐÑе ÑлеменÑÑ. Ð SVG ÑÑо пÑименÑеÑÑÑ Ðº конÑейнеÑам, гÑаÑиÑеÑким ÑлеменÑам и ÑлеменÑам гÑаÑиÑеÑкой оÑÑÑлки. |
| ÐаÑледÑеÑÑÑ | Ð½ÐµÑ |
| ÐбÑабоÑка знаÑÐµÐ½Ð¸Ñ | как Ñказано |
| Animation type | Not animatable |