Hay algo nuevo en CSS: @layer. Al igual que con todas las cosas nuevas, se necesita tiempo para entenderlo. Y a pesar de que toqué mi teclado al respecto, revelación completa, no estoy seguro de que mi mente esté completamente allí todavía. ¡Afortunadamente, hay gente inteligente en el caso!
Esto viene de Miriam Suzanne, quien está realmente emocionada por influir en cosas nuevas e importantes de CSS. He estado escuchando sobre todo esto, pero de repente apareció en navegadores experimentales:
✨ Ahora puedes jugar con Cascade Layers en dos navegadores (detrás de las banderas):
– Firefox Nightly »acerca de: config» layout.css.cascade-layer.enabled
– Chrome Canary »indicador de tiempo de ejecución» –enable-blink-features = CSSCascadeLayershttps: //t.co/q9KtcKAzxr
– MiAAAAAAAh (es aterrador) (@TerribleMia) 9 de septiembre de 2021
Tenía esta visión realmente simplista de lo que era el plan con capas. Digamos que vincula dos archivos CSS:
<link rel="stylesheet" href="https://css-tricks.com/cascade-layers/1.css">
<link rel="stylesheet" href="https://css-tricks.com/cascade-layers/2.css">Selectores de cualquier cosa en 2.css “ganará” a los selectores la misma especificidad que algo en 1.css. Pensé que las capas CSS eran una forma de controlar eso sin necesidad de cambiar el orden de origen de esas hojas de estilo en HTML. Por lo tanto, no importa dónde cargue una hoja de estilo de restablecimiento, puede reducir la importancia de la misma al patearla a una capa anterior. O bien, no importa dónde cargue una hoja de estilo de anulaciones, puede iniciarla.
Creo que ese tipo de cosas podrían estar ocurriendo todavía, pero el concepto real de capas es mucho más poderoso de lo que imaginé al principio.
Deje que Bramus profundice realmente en todo esto con una publicación fantástica sobre todo:
Con la llegada de Cascade Layers, los desarrolladores tendremos más herramientas disponibles para controlar la Cascade. El verdadero poder de las capas en cascada proviene de su posición única en la cascada: antes de la especificidad del selector y el orden de aparición. Por eso no tenemos que preocuparnos por la especificidad del selector de CSS que se utiliza en otras capas, ni sobre el orden en el que cargamos CSS en estas capas, algo que será muy útil para equipos más grandes o al cargar CSS de terceros.
Bramus Van Damme, “El futuro de CSS: Capas en cascada (CSS @layer) “
Énfasis mío.
Ese es el problema aquí: esto es algo nuevo que afecta a qué selectores ganan. Será necesario volver a cablear nuestros cerebros CSS, porque las capas son una parte completamente nueva (y poderosa) de determinar qué estilos se aplican realmente.
Digo potente porque una capa “superior” puede, literalmente, vencer a un selector tradicionalmente más fuerte incluso con un selector más débil en la capa.
La demostración de soporte de Miriam lo deja claro en unas pocas líneas:
/* layers override unlayered styles */
@layer override {
h1 {
color: green;
}
h1::before {
content: "✅ ";
}
}
/* despite the higher specificity */
#h1 {
color: red;
}
#h1::before {
content: "❌ ";
}Debido a que el CSS en la parte inferior no está en una capa en absoluto, el CSS en capas gana, incluso con los selectores más débiles. Guau.
Y no estás limitado a una capa. Puedes definirlos y usarlos como quieras.
@layer reset; /* Create 1st layer named “reset” */
@layer base; /* Create 2nd layer named “base” */
@layer theme; /* Create 3rd layer named “theme” */
@layer utilities; /* Create 4th layer named “utilities” */
/* Or, @layer reset, base, theme, utilities; */
@layer reset { /* Append to layer named “reset” */
/* ... */
}
@layer theme { /* Append to layer named “theme” */
/* ... */
}
@layer base { /* Append to layer named “base” */
/* ... */
}
@layer theme { /* Append to layer named “theme” */
/* ... */
}Alucinante, de verdad.
¿Cómo vamos a usar esto?
Me pregunto si un patrón común podría convertirse en …
- No superponiendo nuestros reinicios, por lo que son extra débiles.
- Capa de importaciones de terceros a un nivel bajo.
- Capa de cualquier estilo creado a un alto nivel.
Y luego no te preocupes realmente si dejas espacio entre las capas porque puedes ajustar las capas en cualquier momento.
El tiempo lo dirá.
Apuesto a que veremos a la gente mojar los dedos de los pies con:
/* This is our only layer. Anything in here wins. */
@layer overrides {
/* ... */
}Y luego, un par de años después:
@layer final {
/* ... */
}
@layer final-final {
/* ... */
}
@layer final-final-v2 {
/* ... */
}
@layer final-final-final-last-complete {
/* ... */
}Depuración
Espero que DevTools exprese capas con mucha claridad porque habrá algunos problemas serios durante un tiempo cuando veamos que los selectores de aspecto más débil ganan debido a la ubicación de las capas.
Soporte del navegador
¡Parece que caniuse está en la bola aquí!
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 |
|---|---|---|---|---|
| 99 | 97 | No | No | No |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| No | No | No | No |
Actualizaciones
Este material es súper nuevo (en el momento de escribir este artículo), por lo que supongo que es de esperar volatilidad. Parece que el 6 de octubre de 2021 se decidió que los estilos sin capas son en realidad los estilos más fuertes, no los más débiles, lo que cambia mucho de lo anterior.