Isolation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Resumen
La propiedad CSS isolation
define si el elemento debe crear un nuevo stacking context.
Esto es especialmente útil en conjunto con background-blend-mode
que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.
Valor inicial | auto |
---|---|
Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
Heredable | no |
Valor calculado | como se especifica |
Animation type | Not animatable |
Sintaxis
css
/* Keyword values */
isolation: auto;
isolation: isolate;
/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;
Valores
Sintaxis formal
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Ejemplos
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
.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;
}
Especificaciones
Specification |
---|
Compositing and Blending Level 2 # isolation |
Compatibilidad con navegadores
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isolation |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.