Aislamiento - Trucos CSS

Anonim

La isolationpropiedad en CSS se usa para evitar que los elementos se mezclen con sus fondos.

.module ( isolation: isolate; )

Se usa más comúnmente cuando mix-blend-modese ha declarado en otro elemento. Aplicar isolational elemento protege ese elemento para que no herede lo mix-blend-modeaplicado a los otros elementos que podrían estar detrás de él.

En otras palabras, si mix-blend-modele dice a los elementos superpuestos que se mezclen entre sí, entonces isolationcrea una exención en los elementos donde se aplica. Es como una forma de desactivar el modo de mezcla, pero desde un elemento principal en lugar de tener que seleccionar el elemento con la combinación directamente.

Valores

  • isolate: Hace exactamente lo que dice. Protege el elemento para que no se mezcle con otros elementos que se encuentran en el fondo.
  • auto: Restablece el aislamiento y permite que el elemento se mezcle con su fondo.

Vea Pen Isolation Cha-Cha-Cha por CSS-Tricks (@ css-tricks) en CodePen.

Un caso de uso

Maria Antonietta Perna, que escribe para SitePoint, creó una demostración que enfatiza el punto particularmente bien. Creamos este gráfico para ayudar a explicar su demostración:

Vea la combinación de texto / imagen de lápiz con modo de combinación de mezcla de SitePoint (@SitePoint) en CodePen.

Donde no funciona

Puede esperar isolationaislar elementos cuando background-blend-modese usa, pero ese no es el caso. Los elementos de fondo ya están aislados por su naturaleza en el sentido de que no se mezclan con el contenido que está detrás de ellos.

Otro punto en el que isolationparece invalidarse es cuando se utiliza junto con translateen el mismo elemento. Puede toparse con esto si intenta centrar un elemento tanto vertical como horizontalmente usando el absoluteposicionamiento y translatejuntos:

.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )

El uso de translateparece aislar el elemento por sí solo sin el uso isolation.

Relacionado

  • mix-blend-mode
  • background-blend-mode

Más información

  • Especificación W3C
  • aislamiento en MDN
  • aislamiento en Codrops
  • SitePoint: una mirada de cerca a la propiedad CSS mix-blend-mode

Soporte de navegador para aislar

Cromo Safari Firefox Ópera IE / Edge Androide iOS
41 7.1 36 30 no 41 8.4

¿Puedo usar… Compatibilidad del navegador con el modo de mezcla

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
41 32 No 79 TP

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 14.0-14.4