Regla CSS @layer

Definición y uso

CSS @layer Las reglas se pueden usar para controlar el orden de evaluación de estilos en capas de capas CSS (cascade layers).

Esto se logra definiendo primero una capa y luego envolviendo el conjunto de reglas que se deben evaluar en un orden específico en esa capa.

@layer Puede definirse con o sin nombre.

Sin nombre @layer DenominadaCapa anónima. Las capas anónimas se evalúan en el orden de declaración (ver ejemplo a continuación). Sigue el orden de capas predeterminado (de arriba a abajo).

Con nombre único @layer DenominadaCapa nombrada. A través de capas nombradas, podemos especificar el orden de capas exacto requerido (ver ejemplo a continuación). El orden va de menos específico a más específico, de izquierda a derecha.

Ejemplo

Ejemplo 1

Usar capas anónimas (se seguirá el orden de capas predeterminado - de arriba a abajo):

/* Capa 1 */
@layer {
  body {
    background: pink;
  }
}
/* Capa 2 */
@layer {
  body {
    background: lightblue; /* Última capa activa */
  }
}

Prueba personal

Ejemplo 2

Usar capas nombradas (y especificar el orden de capas exacto):

/* Especificar el orden de capas exacto */
@layer bgblue, bgpink;
/* Capa 1 */
@layer bgpink {
  body {
    background: pink; /* Activo */
  }
}
/* Capa 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Prueba personal

Sintaxis CSS

@layer name {
  declaraciones CSS;
}

Valor del atributo

Adopción del navegador

Los números en la tabla representan la versión del navegador que completamente admite la regla @.