Chrome 146, Firefox 149, Safari 26.4: Lo que recibieron los desarrolladores frontend en marzo de 2026

Animaciones controladas por scroll en CSS. Sin JavaScript. Para mí, esa es la gran novedad de Chrome 146.

Durante años hemos recurrido a ScrollMagic, GSAP ScrollTrigger o, como mínimo, a un callback de IntersectionObserver para hacer lo que CSS ahora puede hacer de forma nativa:

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

La animación se ejecuta en el hilo del compositor, así que es más fluida que las alternativas basadas en JS. Y no hay ninguna biblioteca que descargar. Por ahora solo funciona en Chrome, así que hay que tratarlo como progressive enhancement. Funciona como un extra en Chrome y en el resto de navegadores los elementos simplemente aparecen sin animación. Un compromiso aceptable para la mayoría de los sitios.

Container queries en todas partes

La otra gran novedad de marzo son las @container queries name-only, que ya funcionan en Firefox 149 y Safari 26.4. Chrome las tiene desde la versión 111, pero «funciona en Chrome» y «funciona en todas partes» son afirmaciones muy distintas.

Si ha construido sistemas de diseño basados en componentes, conoce el problema. Las media queries preguntan por el viewport, no por el contenedor. ¿El mismo componente de tarjeta en una barra lateral y en el área de contenido principal? Dos conjuntos de breakpoints o (más realista) un solo conjunto que funciona «casi siempre».

.card-wrapper {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

El componente se adapta al espacio del que dispone, no al ancho de la ventana. Las queries name-only van más allá. Puede consultar un contenedor con nombre sin definir su tipo, lo que simplifica los diseños profundamente anidados. Si su sitio sigue usando media queries donde las container queries serían más limpias, quizá sea momento de refactorizar. Escribimos sobre esto en el contexto del diseño web responsive.

Grid-lanes para masonry

Safari 26.4 añadió display: grid-lanes. Diseño masonry en CSS puro. Al estilo Pinterest.

¿Sinceramente? Todavía no sé qué pensar. Safari lo tiene, Chrome y Firefox no. Hasta que al menos dos navegadores lo incorporen, no lo usaría en producción. Pero vale la pena seguirlo de cerca. El masonry en CSS puro sería importante para páginas de portfolio, galerías y diseños con muchas tarjetas. Durante años hemos usado Masonry.js, Isotope o hacks de columnas CSS, y ninguno ha terminado de encajar del todo.

Las novedades menores

Safari 26.4 admite min(), max() y clamp() dentro del atributo sizes para imágenes responsive. Pequeño pero práctico. Antes sizes solo aceptaba media queries y valores fijos.

Firefox 149 lanzó CloseWatcher, la API nativa para gestionar las teclas Esc y Atrás y cerrar diálogos, popovers y modales. Chrome la tuvo primero. Ahora puede cerrar elementos de forma fiable en el móvil mediante el gesto Atrás del sistema, sin escribir su propio manejador de eventos.

Los popovers recibieron dos actualizaciones: Firefox 149 añadió el valor hint (un popover que se cierra automáticamente al abrir otro hint, pero no cierra los popovers normales) y Chrome 146 añadió trigger-scope para controlar mejor qué activa qué.

Iterator.concat() llegó a Chrome 146 y Safari 26.4, y encadena iteradores sin convertirlos antes en arrays. Útil, aunque no cambiará su forma de escribir código en el día a día.

Todos los detalles en web.dev. Para más fundamentos de frontend, consulte nuestra guía sobre los elementos de una web de calidad.

Si su sitio se basa en patrones antiguos y quiere saber dónde puede eliminar JavaScript innecesario, podemos hacer una auditoría de frontend.