Isolation

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 inicialauto
Applies toAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

Valores

auto
Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.
isolate
Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.

Sintaxis formal

auto | isolate

Ejemplos

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

Especificaciones

Specification Status Comment
Compositing and blending Level 1
The definition of 'Isolation' in that specification.
Candidate Recommendation Initial definition

Compatibilidad de navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support

41.0

36 (36) No support 30 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support

41.0

36.0 (36) No support 36 8.0

También puedes ver

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javichito
 Última actualización por: javichito,