Cómo evitar que elementos se mezclen con isolation en CSS
¿Qué es isolation y cómo se utiliza?
isolation crea un nuevo contexto de apilamiento para un elemento, asegurando que los efectos de mezcla, como mix-blend-mode, no se combinen con los elementos fuera de su contenedor. Al activar isolation, los elementos hijos se comportan de forma independiente, preservando sus características visuales.
Sintaxis básica:
.elemento {
isolation: isolate;
}
En el ejemplo anterior, se crea un nuevo contexto de apilamiento para .elemento, evitando que las propiedades de mezcla de este afecten a otros elementos de la página.
Valores de la propiedad isolation
1. auto: Valor predeterminado. No se crea un nuevo contexto de apilamiento, por lo que los elementos pueden combinarse con otros fuera del contenedor.
2. isolate: Crea un nuevo contexto de apilamiento, aislando los elementos hijos y evitando que se mezclen con el resto del contenido.
Ejemplos de uso con isolation
1. Evitar la mezcla de transparencias:
.fondo {
background: url('imagen.jpg');
}
.contenido {
background-color: rgba(255, 255, 255, 0.7); /* Fondo semi-transparente */
isolation: isolate;
}
Con isolation: isolate, el fondo semitransparente del .contenido no se mezclará con el fondo de .fondo, manteniendo su opacidad independiente.
2. Control de mezcla con mix-blend-mode:
.elemento-isolado {
isolation: isolate;
mix-blend-mode: multiply;
background-color: red;
color: white;
}
.elemento-adyacente {
background: lightblue;
}
En este ejemplo, el elemento con isolation: isolate y mix-blend-mode: multiply no se mezclará con los elementos vecinos, afectando solo a sus propios hijos.
3. Usar isolation en un contenedor de filtros:
.contenedor {
isolation: isolate;
filter: blur(5px);
}
.texto {
color: black;
}
El uso de isolation asegura que el efecto blur del contenedor no se aplique al fondo ni a otros elementos fuera de él.
¿Cuándo utilizar isolation en CSS?
-
Cuando se aplican efectos como
mix-blend-modey se quiere que estos no interfieran con elementos externos. -
Al trabajar con transparencias (
rgbaoopacity) que deben comportarse de manera aislada. - Para garantizar que ciertos elementos mantengan sus estilos visuales independientemente de la estructura de apilamiento de la página.
Referencia oficial
Para más detalles sobre esta propiedad, consulta la documentación oficial de MDN sobre isolation.
Jorge García
Fullstack developer