Novedades de la IU web

Bramus
Una Kravets

Publicado: 1 de julio de 2026

En Google I/O 2026, compartimos una gran cantidad de actualizaciones que llegarán a la plataforma de IU web. Desde respetar las preferencias del usuario hasta implementar interacciones naturales, guiar la navegación, reducir el desorden y adaptarse a varios factores de forma, la Web moderna ofrece a los desarrolladores herramientas increíblemente potentes para crear experiencias de usuario táctiles y de alta calidad.

Aquí tienes un resumen completo de todas las funciones mencionadas en la sesión "Novedades en la IU web", estructurado según nuestro conjunto principal de principios de UX.

Parte 1: Respeta las preferencias del usuario

La personalización es fundamental para la usabilidad web. Las APIs web modernas facilitan la adaptación automática a las elecciones del usuario a nivel del sistema. Si bien estos conceptos parecen básicos y los hemos abordado durante años, en realidad hay algunas APIs y patrones nuevos que facilitan la creación de esta personalización dinámica.

1. contrast-color().

La función contrast-color() de CSS toma un color de entrada y automáticamente devuelve black o white, según cuál tenga el mayor contraste con el color de entrada según el algoritmo de contraste mínimo de WCAG AA. Esto garantiza la legibilidad sin tener que mantener manualmente los pares de color de texto y fondo.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Más información acerca de contrast-color()

2. light-dark()

La función light-dark() de CSS te permite especificar dos valores diferentes (colores o imágenes) para una propiedad, uno para el modo claro y otro para el modo oscuro, dentro de una sola declaración. El navegador selecciona automáticamente el color de contraste correcto según el color-scheme activo (que debe establecerse en light, dark o light dark en :root o un elemento superior).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Una novedad de light-dark() es que ya no se limita solo a los valores de color. A partir de Chrome 150, también acepta dos valores de imagen.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Funciones personalizadas de CSS (@function)

La regla @ @function te permite definir funciones personalizadas y reutilizables directamente en CSS nativo. Puede aceptar propiedades personalizadas con alcance local como argumentos, realizar cálculos y devolver valores con el descriptor result, lo que reduce la necesidad de usar preprocesadores.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

En combinación con las consultas de diseño de contenedor y la función if() de CSS, puedes crear una función --light-dark() personalizada que funcione con cualquier tipo de valor, como se muestra en esta demostración:

4. Consultas de diseño de contenedores

Como parte de las consultas de contenedores de CSS, las consultas de estilo permiten a los desarrolladores aplicar estilos a los elementos descendientes en función de los valores de propiedad personalizada calculados de un contenedor principal, lo que habilita componentes dinámicos sin necesidad de una contención de tamaño explícita.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

En esta demostración, se usan consultas de estilo para establecer los colores según una propiedad personalizada --theme.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Más información sobre las consultas de estilo

5. Función if() de CSS

La función if() de CSS incorpora lógica condicional intercalada directamente a los valores de las propiedades de CSS. Evalúa una serie de condiciones separadas por punto y coma (consultas de estilo, consultas de medios o consultas de funciones) y te permite establecer diferentes valores asociados a la primera condición verdadera, con una opción de resguardo else.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

En la demostración anterior, se usa la función if() para crear un color de contraste temático basado en el resultado de la función contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

La función at-rule() de CSS para usar con @supports permite a los desarrolladores detectar si un navegador reconoce una regla @ específica, como @starting-style o @view-transition.

Por ejemplo, para verificar la compatibilidad con @function, úsalo de la siguiente manera:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Usar at-rule() solo permite verificar la compatibilidad básica de la regla @ en sí y no se puede usar para probar descriptores, preámbulos o bloques completos de reglas @ específicos. Existen soluciones alternativas disponibles para detectar funciones como las búsquedas ancladas o las búsquedas de estilo.

Más información acerca de @supports at-rule

7. <meta name="text-scale">

La etiqueta meta HTML text-scale habilita la página para que el tamaño de fuente inicial del elemento raíz <html> se ajuste proporcionalmente a la configuración de tamaño de texto del SO y del navegador, lo que es especialmente importante para las plataformas móviles.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Cuando se aplica, el tamaño de fuente del elemento html ahora lo determina el sistema operativo, por lo que no es necesario que establezcas un font-size base. Si luego usas longitudes con unidades relativas, como em y rem, los valores de píxeles calculados se basan en ese tamaño de fuente base.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

En la pestaña Rendering de Herramientas para desarrolladores, puedes emular el tamaño de fuente preferido. Usa el menú desplegable para cambiar el valor.

Más información acerca de <meta name=text-scale>

Parte 2: Implementa interacciones naturales

Los movimientos físicos intuitivos y los gestos naturales son clave para que las experiencias web se sientan tan táctiles como las aplicaciones nativas. El CSS moderno te facilita lograr este objetivo.

8. Función de aceleración linear()

La función de aceleración linear() te permite crear curvas de transición personalizadas y complejas (como rebotes, resortes o sobrepasos elásticos) interpolando linealmente entre una cantidad ilimitada de puntos de progreso especificados.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

En la siguiente demostración, se usa linear() para darle al diálogo una aceleración natural a medida que se muestra o se oculta.

Más información acerca de linear()

9. @starting-style

La regla @ @starting-style de CSS define los valores iniciales de las propiedades de un elemento desde el que deseas realizar la transición cuando el elemento se renderiza por primera vez en el DOM o cuando su display cambia de none a un valor visible, para habilitar transiciones de entrada fluidas.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

En la demostración anterior, se usa para animar la entrada del objeto <dialog> cuando se hace visible por primera vez.

10. transition-behavior: allow-discrete

La propiedad transition-behavior (a menudo se usa como allow-discrete en la abreviatura transition) te permite realizar la transición de propiedades discretas como display o overlay, lo que garantiza que los elementos permanezcan visibles durante las animaciones de salida antes de ocultarse.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() y sibling-count()

Las funciones sibling-index() y sibling-count() de CSS devuelven números enteros que representan la posición basada en 1 de un elemento entre sus hermanos y el recuento total de hermanos, respectivamente. Son perfectos para calcular retrasos de animación escalonados de forma dinámica en CSS sin JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

En esta demostración, el contenido del diálogo se escalona con sibling-index() en animation-delay.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Descarte ligero del diálogo (atributo closedby)

El atributo closedby en el elemento <dialog> (con el valor any) te permite usar el comportamiento declarativo de "descarte ligero", que cierra automáticamente los diálogos modales cuando se hace clic fuera de ellos o se presiona ESC, sin necesidad de JavaScript personalizado.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Puedes probarlo en la demostración anterior.

13. corner-shape

La propiedad abreviada experimental corner-shape permite a los desarrolladores modificar las esquinas redondeadas (desde border-radius) para crear formas visuales personalizadas como bevel, scoop, notch o squircle (a través de superellipse()). Los bordes, las sombras y los contornos de enfoque se ajustan automáticamente a la forma.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Parte 3: Proporciona navegación guiada

Guiar el recorrido del usuario ayuda a mantener el contexto y comprender el flujo de la aplicación, lo que elimina las recargas desorientadoras. Puedes hacerlo de varias maneras, incluso con transiciones de vista, que recibieron algunas actualizaciones recientemente.

14. Transiciones de vista en el mismo documento

Las transiciones dentro del mismo documento, que forman parte de la API de View Transition, proporcionan un mecanismo para animar entre estados del DOM en aplicaciones de una sola página (SPA) capturando instantáneas y realizando la transición entre ellas con CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Más información sobre las transiciones de vista en el mismo documento

15. Transiciones de vista entre documentos

Extiende la API de View Transition a las aplicaciones de varias páginas (MPA), lo que te permite crear transiciones animadas y fluidas cuando navegas entre diferentes documentos haciendo coincidir elementos con el mismo view-transition-name en las páginas.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Obtén más información sobre las transiciones de vistas entre documentos

16. Transiciones de vista con alcance de elemento

Las transiciones de vista con alcance de elemento, que se introdujeron en Chrome 147, te permiten ejecutar una transición de vista solo en un subárbol DOM específico (con element.startViewTransition()) y mantener activo e interactivo el resto de la página.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Cuando se inicia una transición de vista con alcance de elemento, se ejecuta de forma aislada: solo analiza ese subárbol en busca de elementos con un view-transition-name y el seudoelemento ::view-transition se inyecta en la raíz del alcance. El aislamiento es posible gracias a la aplicación automática de view-transition-scope: all.

Esto permite que se ejecuten varias transiciones de vista al mismo tiempo, así como el anidamiento de transiciones de vista: mientras se mezclan los elementos de estas listas, también puedes intercambiar las listas.

Además, los seudoelementos de grupo se anidan automáticamente y el desbordamiento del seudoelemento group-children envolvente se recorta cuando es necesario.

Las transiciones de vista con alcance son perfectas para las microinteracciones y la transformación con estado en la página, lo que brinda al usuario más contexto cuando hay un cambio visual. Esta es una excelente manera de mejorar la usabilidad de tu aplicación y, al mismo tiempo, mejorar su aspecto y sensación. ¡Estos pequeños detalles marcan una gran diferencia!

Más información sobre las transiciones de vista con alcance de elemento

17. Transiciones de vista de dos fases

Esta es una función experimental que inicia de inmediato una transición de vista entre documentos sin esperar a que el nuevo DOM esté listo. Primero, se realiza la transición a una pantalla de esqueleto intermedia o a una IU de carga, antes de continuar con la transición de vista entre documentos.

Más información sobre las transiciones de vista de dos fases

18. Animaciones basadas en el desplazamiento

Las animaciones basadas en desplazamientos vinculan el progreso de una animación CSS directamente a la posición de desplazamiento de un contenedor de desplazamiento, lo que permite a los desarrolladores crear interfaces basadas en desplazamientos, como efectos de paralaje eficientes y indicadores de desplazamiento.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Animaciones activadas por desplazamiento

Las animaciones activadas por desplazamiento son una novedad en Chrome. Las animaciones activadas por desplazamiento activan una animación CSS estándar basada en el tiempo cuando se cruza un límite de desplazamiento (con timeline-trigger para definir el activador y animation-trigger para reproducirlo), lo que proporciona una alternativa declarativa a IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

El mecanismo subyacente para las animaciones activadas por desplazamiento son los activadores de línea de tiempo, que pueden estar activos o inactivos.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Activa el visualizador en la siguiente demostración para ver qué sucede: el primer rango es el rango de activación y determina cuándo se activa el disparador. El segundo rango es el rango activo, que determina durante cuánto tiempo debe permanecer activo.

Más información sobre las animaciones activadas por desplazamiento

20. scroll-target-group: auto

Ahora puedes crear un scrollspy de CSS nativo que destaque automáticamente los vínculos de navegación según la posición de desplazamiento del usuario. Si se establece scroll-target-group: auto en una lista de navegación, el navegador establece automáticamente aria-current="true" y aplica la seudoclase :target-current al vínculo activo. Luego, se puede usar :target-current para aplicar más estilos a los vínculos activos.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Más información sobre el CSS scroll-spy con scroll-target-group

21. Opción de contenedor scrollIntoView()

El método scrollIntoView() ahora incluye la opción container. Establecer target.scrollIntoView({container: 'nearest'}) limita el desplazamiento al elemento desplazable principal más cercano en lugar de que se propague hasta el final, lo que evita el desplazamiento desorientador a nivel de la página.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Usa la casilla de verificación de esta demostración para activar y desactivar la opción:

Más información acerca de container: "nearest"

22. Desplazamiento programático con espera

Todos los métodos de desplazamiento programático (como scroll(), scrollTo() y scrollIntoView()) ahora devuelven una promesa. Esto permite que los desarrolladores await la finalización de las animaciones de desplazamiento suave antes de ejecutar la lógica posterior (como agregar un efecto de resaltado).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

En la siguiente demostración, puedes ver cómo funciona: primero, el elemento se desplaza a la vista y, luego, se le agrega un efecto de resaltado.

Parte 4: Maximiza el contenido y reduce el ruido

Una de las experiencias web más frustrantes es esperar ver contenido y que se bloquee con banners o ventanas emergentes intrusivos. Prioriza el área de contenido eliminando el desorden visual y los bordes de la aplicación, y trasladando las acciones secundarias a la IU en capas.

23. Consultas de estado de desplazamiento (scrolled)

Las consultas scroll-state, que forman parte de las consultas de contenedores de CSS, te permiten aplicar estilos a los elementos descendientes según el estado de desplazamiento de un contenedor (con container-type: scroll-state). La consulta scrolled (por ejemplo, scroll-state(scrolled: bottom)) detecta la dirección del desplazamiento relativo más reciente, lo que permite patrones como la "barra Hidey".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Obtén más información sobre el patrón "Hidey Bar"

24. Consultas de contenedor ancladas

El posicionamiento de anclaje de CSS incluye consultas de contenedores anclados, que te permiten verificar qué posición de resguardo (por ejemplo, fallback: bottom o fallback: flip-block) está activa actualmente en un elemento posicionado con anclaje, lo que permite actualizaciones dinámicas para aplicar estilo a un elemento posicionado con anclaje (como las flechas de la información sobre herramientas).

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

En la siguiente demostración, un elemento emergente anclado se reposiciona según su posición alternativa y su posición en el viewport con consultas de contenedores anclados. Cuando se abre la información sobre herramientas sobre el invocador, se anima de abajo hacia arriba, desde la fuente. Cuando está debajo del invocador, se anima de arriba hacia abajo.

25. CSS border-shape

La propiedad border-shape te permite definir bordes no rectangulares con la misma sintaxis de forma que clip-path. A diferencia del recorte, border-shape mantiene los bordes, los contornos y las sombras alineados visualmente con la forma personalizada. También va más allá de las capacidades de corner-shape, ya que border-shape es mucho más flexible.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. Función shape() de CSS

La función shape() de CSS te permite definir rutas geométricas complejas intercaladas en CSS. Se puede usar con propiedades como clip-path, border-shape o shape-outside para crear formas orgánicas no rectangulares contra las que puede flotar el contenido.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Posicionamiento fijo por eje

Gracias a un cambio reciente en la especificación de desbordamiento que permite que los contenedores sean un desplazador para un solo eje, el posicionamiento fijo ahora puede hacer un seguimiento de dos contenedores de desplazamiento diferentes (uno para cada eje) de forma simultánea. Esto hace que la primera columna y la fila superior fijas de una tabla funcionen según lo esperado, incluso dentro de contenedores de desplazamiento de un solo eje.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Esta función está disponible para probarla en Chrome 148 con la marca Experimental Web Platform Features habilitada.

Más información sobre position: sticky por eje

Parte 5: Adaptación al factor de forma

Una de las cosas más valiosas de la Web es su flexibilidad. Los usuarios pueden navegar por la Web desde una variedad de dispositivos, cada uno con sus propios mecanismos de interacción. Los diseños deben adaptarse fundamentalmente al dispositivo y al método de entrada, ya sea que se abra un teclado virtual o que los objetivos táctiles estén activos. Tener en cuenta el factor de forma al diseñar para la Web le da a tu sitio o app web esa delicadeza adicional y alinea las expectativas del usuario.

28. Gestos de sobredesplazamiento (áreas deslizables)

Un ejemplo de adaptación al factor de forma es la capacidad de usar interacciones basadas en gestos y deslizamientos en la Web para dispositivos móviles. Puedes usar desplazadores para lograr algunos de estos efectos, pero no siempre es un enfoque intuitivo.

El equipo de Chrome está trabajando en una solución declarativa propuesta, en conversaciones con el grupo de la comunidad de OpenUI, que te permite crear áreas nativas que se pueden deslizar con gestos (por ejemplo, listas de Gmail que se pueden deslizar o menús laterales que se pueden descartar con un deslizamiento) con overscrollcontainer y activadores de comandos, que funcionan de forma natural con el desplazamiento y el tacto.

Más información sobre los gestos de sobredesplazamiento

29. HTML en Canvas

La API de HTML en Canvas es un cambio de paradigma importante que permite a los desarrolladores colocar elementos DOM reales dentro de un <canvas> (con el atributo layoutsubtree). Estos elementos siguen siendo totalmente aptos para la búsqueda y accesibles, y admiten funciones del navegador, como el autocompletado, a la vez que permiten que los sombreadores de WebGL/WebGPU interactúen con ellos de forma nativa.

Ronda relámpago

Un vistazo rápido a otras funciones potentes que impulsan la Web.

30. Movimiento que conserva el estado del DOM (moveBefore())

El método moveBefore() del DOM te permite cambiar el elemento superior de los nodos del DOM (por ejemplo, videos en reproducción, elementos iframe o entradas enfocadas) sin destruir su estado ni activar recargas.

Esto significa que los videos siguen reproduciéndose, los elementos iframe no se vuelven a cargar, las animaciones CSS no se reinician y los campos de entrada mantienen el enfoque a medida que los reasignas como elementos secundarios en tu diseño.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Más información acerca de moveBefore()

31. CSS text-fit

text-fit es una propiedad de CSS experimental que ajusta dinámicamente el tamaño de la fuente para que las líneas de texto se ajusten con precisión al ancho exacto de su elemento contenedor (por ejemplo, text-fit: grow per-line-all).

Más información acerca de text-fit

32. CSS text-box (text-box-trim y text-box-edge)

La propiedad text-box (y sus propiedades abreviadas text-box-trim y text-box-edge) recorta el espacio vertical (interlineado) por encima y por debajo del texto, lo que garantiza una alineación y un centrado verticales perfectos.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Más información acerca de text-trim

33. Decoraciones de separación de CSS

Las decoraciones de separación de CSS incorporan column-rule a la cuadrícula y a Flexbox, y presentan una nueva propiedad row-rule, que permite a los desarrolladores diseñar los medianiles entre filas y columnas. Ya no es necesario manipular bordes ni seudoelementos para aplicar estilo a las reglas entre las filas y las columnas.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Más información sobre las decoraciones de brechas de CSS

34. Unidades de viewport que tienen en cuenta la barra de desplazamiento (vw, vh, etcétera)

Las unidades de viewport, como vw y vh, restan automáticamente el tamaño de las barras de desplazamiento (si se garantiza que son visibles, con overflow-y: scroll o scrollbar-gutter: stable declarados en :root), lo que evita el desbordamiento horizontal accidental cuando se configuran elementos en 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Más información sobre las unidades de vista del puerto que tienen en cuenta la barra de desplazamiento

35. Acceso de JavaScript a seudoelementos

Las APIs web ahora exponen los seudoelementos de CSS (como ::before o ::after) a JavaScript.

Puedes recuperar una instancia de CSSPseudoElement con Element.pseudo(type) y verificar qué seudoelemento activó un evento con Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Más información acerca de CSSPseudoElement

Conclusión

Eso es todo por nuestro resumen de Novedades de la IU web. Esperamos que uses estas funciones para crear interfaces increíbles. Hasta el próximo año.