En 2026 casi todo lo que antes necesitaba JavaScript o un polyfill ya funciona en los tres motores: Chrome, Safari y Firefox. Siete de estas ocho funciones son Baseline y puedes usarlas tal cual. La excepción son las animaciones con scroll, que aún no están en Firefox, igual que las View Transitions entre páginas. Las dos se usan como mejora progresiva: donde no hay soporte, la web funciona igual, sin la animación.
Si arrastras webs construidas hace un par de años, prepárate: muchas líneas de JavaScript van a sobrar. Eso es buena noticia para el rendimiento y para el Core Web Vitals.
Por qué 2026 es el año del CSS moderno
Interop 2026 (la iniciativa cross-vendor entre Apple, Google, Microsoft y Mozilla) cerró soporte estable de las funciones clave en abril. Eso significa que lo que antes funcionaba en Chrome y se rompía en Safari ahora corre idéntico en los cuatro navegadores principales.
El resultado práctico es brutal: en mis proyectos he eliminado más de 600 líneas de overrides media query y unas 300 de JavaScript que tocaba clases padre. CSS se ha vuelto consciente del estado, del contexto y del layout.
1. Container queries: el componente decide su tamaño
Container queries permiten que un componente reaccione al ancho de su contenedor, no al de la ventana. Es la diferencia entre tener un componente reutilizable de verdad y uno que se rompe cuando lo mueves a un sidebar.
.tarjeta-contenedor {
container-type: inline-size;
container-name: tarjeta;
}
/* La tarjeta cambia según el espacio que le deja su contenedor, no la pantalla */
@container tarjeta (min-width: 420px) {
.tarjeta {
display: grid;
grid-template-columns: 160px 1fr;
gap: 1rem;
}
}Caso de uso real: una tarjeta de producto que aparece en home (ancho 600px) y en sidebar (ancho 280px). Con container queries se reorganiza sola sin necesidad de dos componentes ni de breakpoints globales.
2. Selector :has(): el «padre selector» por fin nativo
El selector :has() permite estilar un elemento padre en función de los hijos que contiene. Ningún hack, ningún JavaScript. Soporte 100% cross-browser desde principios de 2026.
/* Marca en rojo el campo cuando el usuario ha escrito algo no válido */
.campo:has(input:invalid:not(:placeholder-shown)) {
--borde: #d93025;
}
.campo {
border: 2px solid var(--borde, #ccc);
border-radius: 8px;
}Mi uso favorito: marcar visualmente formularios donde hay un error sin tocar JS, simplemente con form:has(input:invalid) button para desactivar visualmente el submit. Limpio y mantenible.
3. View Transitions API: animaciones nativas entre páginas
View Transitions añade animaciones suaves entre estados de la página (SPA) o entre páginas distintas (MPA). Lo que antes te obligaba a usar Framer Motion o GSAP ahora son tres líneas de CSS.
/* Entre páginas: Chrome 126+ y Safari 18.2+. Firefox navega sin animación */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
}// En la misma página: con comprobación para navegadores antiguos
function cambiarVista() {
if (!document.startViewTransition) {
actualizarContenido();
return;
}
document.startViewTransition(actualizarContenido);
}Caso de uso real: un blog donde el thumbnail del post se «expande» suavemente al detalle al hacer clic. Sin librerías, sin saltos visuales, sin parpadeo. Mejora directa de CLS.
4. Anchor positioning: tooltips y popovers sin JS
Anchor positioning permite anclar un elemento a otro nativamente. Adiós a las librerías de tooltip y a los cálculos manuales con getBoundingClientRect.
.boton-ayuda {
anchor-name: --boton-ayuda;
}
.tooltip {
position: absolute;
position-anchor: --boton-ayuda;
position-area: top;
margin-bottom: 8px;
/* Si no cabe arriba, se coloca debajo */
position-try-fallbacks: flip-block;
}Para menús desplegables, popovers y tooltips, esta función ahorra horas de JavaScript y elimina problemas de scroll-offset y resize que daban dolor de cabeza.
5. Scroll-driven animations: animaciones sincronizadas al scroll
Las animaciones que avanzan con el scroll del usuario ahora se gestionan con propiedades CSS puras. Sin IntersectionObserver, sin scroll listeners que matan el rendimiento, sin GSAP ScrollTrigger.
@keyframes aparecer {
from { opacity: 0; translate: 0 2rem; }
to { opacity: 1; translate: 0 0; }
}
/* Solo se aplica donde hay soporte. En Firefox el bloque se ve sin animar */
@supports (animation-timeline: view()) {
.revelar {
animation: aparecer linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}Ojo con el orden: animation-timeline tiene que ir después del atajo animation, porque el atajo lo reinicia.
Caso de uso real: un título de hero que se desvanece a medida que el usuario baja por la página. Antes eran 40 líneas de JS y un listener; ahora son tres propiedades CSS.
6. Cascade layers: orden de prioridad explícito
Las capas de cascada permiten organizar tu CSS por prioridad sin recurrir a !important ni a guerras de especificidad. Es especialmente útil cuando combinas un framework (Tailwind, Bootstrap) con CSS propio.
/* El orden de esta línea decide quién gana, no la especificidad */
@layer reset, base, componentes, utilidades;
@layer base {
a { color: var(--marca); }
}
@layer utilidades {
.texto-alerta { color: #d93025; }
}7. CSS Nesting nativo
El anidamiento que llevabas años haciendo con Sass o PostCSS ya es CSS nativo. Sin preprocesador, sin build step para el caso simple. Funciona idéntico a lo que esperas si vienes de Sass.
.tarjeta {
padding: 1rem;
& h3 {
margin-top: 0;
}
&:hover {
box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
@media (width >= 768px) {
padding: 2rem;
}
}8. color-mix(), oklch() y la nueva paleta del web
color-mix() mezcla dos colores con un porcentaje. oklch() da acceso a espacios de color más amplios y consistentes que hsl() o rgb(). Combinados, generan paletas vivas con un puñado de variables.
:root {
--marca: oklch(62% 0.19 255);
/* Variantes calculadas a partir del color de marca */
--marca-hover: color-mix(in oklch, var(--marca), black 15%);
--marca-suave: color-mix(in oklch, var(--marca), white 85%);
}Con esto generas el hover, el activo y el deshabilitado sin tener que declarar cinco variables. El sistema de diseño se vuelve mantenible con una sola fuente de verdad.
Tabla resumen: qué función adoptar primero
| Función | Soporte (octubre de 2026) | ¿Sin polyfill? |
|---|---|---|
| Container queries (tamaño) | Baseline desde 2023 | Sí |
| :has() | Baseline desde diciembre de 2023 | Sí |
| View Transitions en la misma página | Baseline desde octubre de 2025 | Sí |
| View Transitions entre páginas | Chrome 126+ y Safari 18.2+; Firefox aún no | Sí, como mejora progresiva |
| Anchor positioning | Baseline desde enero de 2026 (Firefox 147) | Sí, con una posición de respaldo |
| Scroll-driven animations | Chrome 115+ y Safari 26+; Firefox aún no | Sí, dentro de @supports |
| Cascade layers | Baseline desde 2022 | Sí |
| CSS Nesting | Baseline desde diciembre de 2023 | Sí |
| color-mix() y oklch() | Baseline desde 2023 | Sí |
Mi orden recomendado para adoptarlas
Si nunca has tocado estas funciones, este es el orden que sigo cuando refactorizo un proyecto. Bajo riesgo, alto retorno.
- :has() y CSS Nesting: son la victoria fácil. Empieza por aquí esta misma semana.
- Container queries: sustituye un par de componentes problemáticos.
- View Transitions: añade transiciones de página en tu landing principal.
- Scroll-driven animations: reemplaza un script de scroll listener por CSS puro.
- Anchor positioning: migra el primer tooltip o popover que tengas con JS.
- Cascade layers + oklch: resérvalo para refactorización seria del sistema de diseño.
Preguntas frecuentes sobre CSS 2026
¿Qué es Interop 2026?
Es la iniciativa anual entre Apple, Google, Microsoft y Mozilla para asegurar que un grupo seleccionado de funciones CSS y HTML funcione idéntico en Safari, Chrome, Edge y Firefox antes de fin de año. En 2026 el foco ha sido animaciones, layout y compatibilidad cross-document.
¿Tengo que usar polyfills todavía?
Para las 8 funciones de este post, no. Todas tienen soporte estable cross-browser desde abril de 2026 con uso seguro en producción. Solo si tu base de usuarios incluye un porcentaje alto de navegadores antiguos conviene aplicar progressive enhancement.
¿Container queries reemplazan a las media queries?
No, las complementan. Las media queries siguen siendo útiles para layout global; las container queries son la opción correcta cuando un componente se reutiliza en contextos de ancho variable y necesita adaptarse al contenedor padre.
¿Funciona View Transitions API en SPAs y MPAs?
Sí. Las same-document transitions (dentro de la misma página) están en baseline desde 2025 y las cross-document transitions (entre páginas distintas) llegaron a soporte cross-browser en 2026. Ya puedes animar el salto entre URLs sin SPA.
¿:has() rompe el rendimiento?
No con el uso normal. Los navegadores han optimizado el selector y solo se nota impacto en árboles DOM muy grandes con selectores anidados profundamente. Para una landing o un blog medio, su coste es despreciable.
¿Qué proyecto pequeño me sirve para practicar?
Una landing personal con tarjetas en grid, un menú desplegable y una transición entre páginas cubre 5 de las 8 funciones del post. Una tarde de práctica es suficiente para interiorizarlas.
¿Estas funciones afectan al SEO?
Indirectamente sí. View Transitions mejora Core Web Vitals (sobre todo CLS) y un CSS más limpio sin JavaScript innecesario reduce LCP y TBT. Páginas más rápidas rankean mejor, así de simple.
¿Qué pasa con navegadores antiguos?
Aplica progressive enhancement: la web funciona sin estas funciones, simplemente sin las animaciones o ajustes finos. Ningún usuario verá errores, solo la versión base sin los floritos.
Es el acuerdo anual entre Apple, Google, Microsoft, Mozilla e Igalia para que una lista de funciones funcione igual en todos los navegadores. La edición de 2026 se anunció en febrero y dura todo el año. Entre sus objetivos están las View Transitions entre páginas, que hoy todavía faltan en Firefox.
Para siete de las ocho, no. Para las animaciones con scroll y las transiciones entre páginas tampoco hace falta: envuélvelas en @supports o déjalas como mejora progresiva. En Firefox la página se ve igual, solo que sin la animación. Un polyfill solo compensa si la animación es imprescindible para entender el contenido, y casi nunca lo es.
Tienes tres caminos según tu nivel
Si estás empezando: domina :has() y CSS Nesting esta semana. Son las dos funciones de mayor retorno con menos curva.
Si ya tienes nivel medio: sustituye un componente problemático por uno con container queries y añade View Transitions a tu blog. Notable mejora de UX.
Si vives del frontend: refactor de tu sistema de diseño con oklch, cascade layers y anchor positioning. Te ahorrará deuda técnica durante años.
¿Has migrado algún proyecto a CSS 2026? Cuéntame cuál fue tu mayor sorpresa en los comentarios. Disfrútalas.
