Lo que cambió de verdad entre 2020 y 2026
El inventario honesto de seis años de CSS: qué es novedad estructural, qué es comodidad, qué desplazó a JavaScript y por qué todo llegó a la vez.
Entre 2020 y 2026 CSS incorporó más capacidades estructurales que en los quince años anteriores juntos, y lo hizo de una forma inusual: casi todo aterrizó en un intervalo de tres años y en los cuatro navegadores de referencia casi a la vez. Eso significa que buena parte de lo que aprendiste antes de 2021 sigue siendo cierto pero ha dejado de ser necesario, y que técnicas que se enseñaban como buenas prácticas ahora son deuda. Esta lección separa lo estructural de lo cosmético y nombra lo que todavía no puedes dar por hecho.
- Distinguir los cambios estructurales del periodo de las meras comodidades sintácticas.
- Enumerar qué patrones de 2020 han quedado obsoletos y por qué sustituto.
- Identificar qué capacidades de 2026 aún no son universales.
- Explicar el mecanismo institucional que hizo que todo convergiera a la vez.
Los cinco cambios estructurales
Un cambio estructural no es una propiedad nueva: es una capacidad que antes no se podía expresar de ninguna manera, ni con trucos ni con JavaScript razonable. En este periodo hubo cinco.
Control explícito de la cascada. @layer introdujo un criterio nuevo en el algoritmo de resolución, situado por encima de la especificidad. Por primera vez puedes declarar que un bloque entero de CSS pierde frente a otro independientemente de cómo estén escritos sus selectores. Todo el género literario de la guerra de especificidad —los !important defensivos, los selectores inflados a propósito, el orden de los ficheros como arma— se vuelve innecesario. No es azúcar: es un mecanismo que no existía.
Consultar el contenedor en lugar de la ventana. Las container queries rompen la dependencia entre un componente y la página que lo aloja. Hasta 2022 un componente responsive era una contradicción en términos: solo la página podía saber cuánto espacio había, así que la adaptación tenía que decidirse arriba. Con @container un componente se adapta a su hueco sin saber dónde está, y eso cambia la unidad de diseño del sistema entero.
El selector relacional. :has() permite seleccionar un elemento en función de lo que contiene, del hermano que le sigue o del estado de un descendiente. Rompe la restricción de que CSS solo mira hacia abajo y hacia adelante, que era la razón de existir de la mitad de las clases que JavaScript ponía y quitaba.
Color perceptualmente uniforme. OKLCH, color-mix() y los colores relativos convierten el color en algo calculable. Antes, generar una escala de nueve tonos consistentes exigía una herramienta externa o un preprocesador, porque hsl() miente sobre la luminosidad: dos colores con la misma l se ven radicalmente distintos. Con un espacio perceptual el cálculo se hace en la hoja de estilos y sale bien.
Anidamiento nativo. El único de los cinco que es sobre todo ergonomía, pero con una consecuencia real: elimina la última razón técnica por la que un proyecto necesitaba obligatoriamente un preprocesador. Junto con las custom properties, que ya estaban, deja a Sass como una elección y no como un requisito.
Si mides el impacto por líneas eliminadas de un proyecto real, el ganador no es :has() ni las container queries: es la combinación de @layer con :where(). La razón es que atacan el mismo problema desde los dos lados. Casi todo el CSS heredado de un proyecto grande no describe apariencia, sino que pelea contra otro CSS: selectores encadenados para superar a un plugin, !important para superar al selector encadenado, un body prefijado delante de todo para ganar cien puntos de especificidad, y un fichero llamado overrides.css cargado el último. Todo eso es infraestructura de combate, no diseño. Con capas declaras el orden de autoridad una sola vez y arriba del todo, y con :where() escribes selectores que casan exactamente donde quieres pero valen cero en la cuenta de especificidad, de modo que cualquiera puede sobrescribirlos con una clase simple. El resultado en un codebase maduro es que desaparece un porcentaje incómodamente alto del CSS, y lo que queda por fin describe lo que se ve. La contrapartida honesta: esto solo funciona si lo aplicas desde arriba, decidiendo el orden de capas antes de escribir la primera regla. Introducir capas a mitad de un proyecto que ya está en guerra es posible, pero se hace metiendo lo viejo entero en una capa baja y escribiendo lo nuevo encima, no reescribiendo selectores uno a uno.
Qué patrones de 2020 ya son deuda
La lista siguiente no es de estilo, es de sustitución técnica: cada línea de la izquierda tiene hoy un mecanismo que hace lo mismo mejor.
| Patrón de 2020 | Sustituto en 2026 |
|---|---|
| Preprocesador para variables y anidamiento | Custom properties y nesting nativo |
Hack del padding-top porcentual para relación de aspecto |
aspect-ratio |
| Clase puesta por JavaScript según el contenido | :has() |
ResizeObserver para adaptar un componente |
Container queries |
| Media query por cada tamaño de fuente | clamp() con una escala |
-100vh y el problema de la barra del móvil |
dvh, svh, lvh |
| Paleta generada con una herramienta externa | oklch() y color-mix() |
| Biblioteca de posicionamiento para tooltips | Anchor positioning |
Guerra de z-index para modales |
dialog y el atributo popover con la capa superior |
overrides.css cargado el último |
@layer |
| Reset agresivo que borra la hoja del navegador | Reset mínimo dentro de una capa baja |
Merece un comentario la última fila, porque resume el cambio de mentalidad del periodo. En 2020 un reset era un fichero grande que ponía a cero todo lo que el navegador aportaba, y su tamaño se justificaba con las inconsistencias entre motores. Esas inconsistencias se han reducido tanto que un reset moderno cabe en veinte líneas, y su papel ya no es igualar navegadores sino fijar decisiones de proyecto: el modelo de caja, el comportamiento de las imágenes, la herencia de tipografía en los controles de formulario. El resto es información del navegador que conviene conservar.
Lo que aún no puedes dar por hecho
Aquí es donde la mayoría de los artículos de divulgación mienten por omisión. Estas son las reservas reales a agosto de 2026.
Las animaciones dirigidas por scroll son solo Chromium y Safari. Firefox no las ha implementado. Cualquier uso serio pasa por detectar soporte y escribir un camino alternativo, no por asumirlas:
.progreso {
transform-origin: left center;
transform: scaleX(1);
}
@supports (animation-timeline: scroll()) {
.progreso {
animation: crecer linear both;
animation-timeline: scroll(root block);
}
}
@keyframes crecer {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}La estructura del ejemplo es la que hay que interiorizar: el estado por defecto es el que funciona en todas partes, y la animación se añade solo si el motor la reconoce. Escrito al revés —animación primero, arreglo dentro de un @supports not— acabas manteniendo dos verdades.
El anclaje entró en Baseline en enero de 2026 cuando Firefox 147 lo implementó, pero @position-try, la parte que reubica un elemento anclado cuando no cabe, requiere Safari 18.4 o superior. Es decir: puedes anclar, pero el plan B de reposicionamiento no está garantizado en todo el parque.
@scope y las View Transitions son recientes, no universales. Las View Transitions dentro de un mismo documento son Baseline desde 2025 y se pueden usar con tranquilidad como mejora; las que ocurren entre documentos distintos siguen llegando durante 2026 y no son universales. En ambos casos la degradación es benigna —sin la transición, la navegación simplemente ocurre— y por eso son candidatas ideales a mejora progresiva.
Por qué todo llegó a la vez
La sincronía no fue casualidad ni moda. Hubo un cambio institucional.
Hasta 2020 cada motor priorizaba su propia lista y el resultado era un solar de soporte parcial: una capacidad estaba en dos navegadores durante años, nadie la usaba en producción, y por tanto nadie presionaba para completarla. El bucle se rompió con un esfuerzo coordinado que empezó como Compat 2021 y que desde 2022 se llama Interop: cada año los fabricantes acuerdan una lista corta de áreas concretas, se mide el cumplimiento con una batería pública de tests y el marcador queda a la vista de todos. Convertir el soporte en una cifra comparable cambió los incentivos, y las capacidades pasaron de tardar cinco años en cerrarse a tardar uno.
En paralelo apareció Baseline, una forma común de decir “esto ya se puede usar” que sustituye a mirar tablas de soporte navegador por navegador. Es la herramienta que usarás para decidir, y merece lección propia: es la siguiente.
El efecto combinado explica la sensación de aluvión. No es que se inventara más CSS en estos años; es que se terminó más CSS en estos años, y terminar es lo que convierte una especificación en algo que puedes escribir el lunes.