Novedades de CSS e IU: Edición de I/O 2023

Una Kravets

Bramus

Adam Argyle

Los últimos meses marcaron el comienzo de una era dorada para la IU web. Se lanzaron nuevas funciones de la plataforma con una adopción multinavegador sólida que admite más funciones web y de personalización que nunca.

Estas son 20 de las funciones más emocionantes y con mayor impacto que se lanzaron recientemente o que estarán disponibles próximamente:

• Consultas de contenedores
• Consultas de diseño
• Selector :has()
• microsintaxis de nth-of
• text-wrap: balance
• initial-letter
• Unidades de viewport dinámicas
• Espacios de color de amplia gama
• color-mix()
• Anidación
• Capas en cascada
• Estilos con alcance
• Funciones trigonométricas
• Propiedades de transformación individuales
• ventana emergente
• Posicionamiento de ancla
• selectmenu
• Transiciones de propiedades discretas
• Animaciones impulsadas por el desplazamiento
• Ver transiciones

El nuevo diseño responsivo

Comencemos con algunas de las nuevas capacidades del diseño adaptable. Las nuevas funciones de la plataforma te permiten crear interfaces lógicas con componentes que poseen su información de diseño responsivo, crear interfaces que aprovechen las capacidades del sistema para ofrecer IUs más nativas y permitir que el usuario forme parte del proceso de diseño con consultas de preferencias del usuario para lograr una personalización completa.

Consultas de contenedores

Navegadores compatibles

• 105
• 105
• 110
• 16

Origen

Recientemente, las consultas de contenedores se volvieron estables en todos los navegadores modernos. Te permiten consultar el tamaño y el diseño de un elemento superior para determinar los diseños que se deben aplicar a cualquiera de sus elementos secundarios. Las consultas de medios solo pueden acceder a la información del viewport y aprovecharla, lo que significa que solo pueden funcionar en una vista macro de un diseño de página. Por otro lado, las consultas de contenedores son una herramienta más precisa que puede admitir cualquier cantidad de diseños dentro de los diseños.

En el siguiente ejemplo de Recibidos, la barra lateral Recibidos principales y Favoritos son contenedores. Los correos electrónicos que contienen ajustan su diseño de cuadrícula y muestran o ocultan la marca de tiempo según el espacio disponible. Este es exactamente el mismo componente dentro de la página, solo que aparece en diferentes vistas.

Debido a que tenemos una consulta de contenedor, los estilos de estos componentes son dinámicos. Si ajustas el tamaño y el diseño de la página, los componentes responden a su espacio asignado de forma individual. La barra lateral se convierte en una barra superior con más espacio, y vemos que el diseño se parece más a la bandeja de entrada principal. Cuando hay menos espacio, ambos se muestran en un formato condensado.

Obtén más información sobre las consultas de contenedores y la compilación de componentes lógicos en esta publicación.

Búsquedas de diseño

Navegadores compatibles

• 111
• 111
• x
• 18

Origen

La especificación de consulta de contenedor también te permite consultar los valores de estilo de un contenedor superior. Actualmente, se implementa parcialmente en Chrome 111, donde puedes usar propiedades personalizadas de CSS para aplicar diseños de contenedor.

En el siguiente ejemplo, se usan características del clima almacenadas en valores de propiedades personalizadas, como lluvia, sol y nublado, para aplicar diseño al fondo y al ícono del indicador de la tarjeta.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Esto es solo el comienzo de las búsquedas de estilo. En el futuro, tendremos consultas booleanas para determinar si existe un valor de propiedad personalizada y reducir la repetición de código. Actualmente, se están analizando las consultas de rango para aplicar estilos en función de un rango de valores. Esto permitiría aplicar los estilos que se muestran aquí con un valor porcentual para la probabilidad de lluvia o cobertura de nubes.

Para obtener más información y ver más demostraciones, consulta nuestra entrada de blog sobre las consultas de estilo.

:has()

Navegadores compatibles

• 105
• 105
• 121
• 15.4

Origen

Hablando de funciones dinámicas y potentes, el selector :has() es una de las nuevas funciones de CSS más potentes que se implementan en los navegadores modernos. Con :has(), puedes aplicar estilos verificando si un elemento superior contiene la presencia de elementos secundarios específicos o si esos elementos secundarios están en un estado específico. Esto significa que, en esencia, ahora tenemos un selector superior.

En función del ejemplo de consulta de contenedor, puedes usar :has() para que los componentes sean aún más dinámicos. En él, un elemento con una "estrella" tiene un fondo gris y un elemento con una casilla de verificación marcada tiene un fondo azul.

Sin embargo, esta API no se limita a la selección de la organización superior. También puedes aplicar ajustes de diseño a cualquier elemento secundario dentro del elemento superior. Por ejemplo, el título está en negrita cuando el elemento de estrella está presente. Esto se logra con .item:has(.star) .title. El uso del selector :has() te brinda acceso a elementos superiores, elementos secundarios y hasta elementos hermanos, lo que hace que esta sea una API realmente flexible, con nuevos casos de uso que surgen todos los días.

Nota: Para evitar ralentizaciones en el rendimiento de la renderización en árboles DOM grandes, te recomendamos que definas el alcance de este selector lo más cerca posible. Por ejemplo, usar :has() para buscar coincidencias en el elemento HTML raíz sería más lento que buscar coincidencias en una barra de navegación o en un elemento de tarjeta con un árbol más pequeño.

Obtén más información y explora otras demostraciones en esta entrada de blog sobre :has().

Sintaxis de nth-of

Navegadores compatibles

• 111
• 111
• 113
• 9

La plataforma web ahora tiene una selección más avanzada del n-ésimo elemento secundario. La sintaxis avanzada nth-child proporciona una nueva palabra clave ("de"), que te permite utilizar la microsintaxis existente de An+B, con un subconjunto más específico dentro del cual realizar la búsqueda.

Si usas un nth-child normal, como :nth-child(2) en la clase especial, el navegador seleccionará el elemento al que se le aplicó la clase especial, y también es el segundo elemento secundario. Esto contrasta con :nth-child(2 of .special), que primero filtrará previamente todos los elementos .special y, luego, elegirá el segundo de esa lista.

Explora esta función en nuestro artículo sobre la sintaxis nth-of.

text-wrap: balance

Los selectores y las consultas de estilo no son los únicos lugares en los que podemos incorporar lógica en nuestros estilos; la tipografía es otro. A partir de Chrome 114, puedes usar el balanceo de texto para los encabezados con la propiedad text-wrap con el valor balance.

Probar una demostración

Para equilibrar el texto, el navegador realiza una búsqueda binaria eficaz del ancho más pequeño que no genere líneas adicionales y se detiene en un píxel CSS (no en un píxel de pantalla). Para minimizar aún más los pasos en la búsqueda binaria, el navegador comienza con el 80% del ancho de línea promedio.

Prueba una demostración

Nota: Si bien esta es una gran mejora progresiva que puedes probar hoy, es importante tener en cuenta que esta API solo funciona con hasta 4 líneas de texto, por lo que es ideal para títulos y encabezados, pero es probable que no sea lo que buscas para contenido más extenso.

Obtén más información en este artículo.

initial-letter

Navegadores compatibles

• 110
• 110
• x
• 9

Origen

Otra buena mejora en la tipografía web es initial-letter. Esta propiedad CSS te brinda un mejor control para aplicar diseño a la letra inicial intercalada.

Usa initial-letter en el seudoelemento :first-letter para especificar: el tamaño de la letra en función de la cantidad de líneas que ocupa. Es el desplazamiento de bloque o "sumidero" de la letra para indicar dónde se colocará.

Obtén más información para usar intial-letter aquí.

Unidades de viewport dinámicas

Navegadores compatibles

• 108
• 108
• 101
• 15.4

Un problema común que enfrentan los desarrolladores web hoy en día es el tamaño preciso y coherente del viewport completo, especialmente en dispositivos móviles. Como desarrollador, quieres que 100vh (100% de la altura del viewport) signifique "ser tan alto como el viewport", pero la unidad vh no tiene en cuenta cosas como la retracción de barras de navegación en dispositivos móviles, por lo que, a veces, resulta demasiado larga y provoca desplazamientos.

Para resolver este problema, ahora tenemos nuevos valores de unidad en la plataforma web, incluidos los siguientes: - Alto y ancho de viewport pequeños (o svh y svw), que representan el tamaño de viewport activo más pequeño. - Altura y ancho grandes del viewport (lvh y lvw), que representan el tamaño más grande. - Altura y ancho dinámicos del viewport (dvh y dvw).

Las unidades de viewport dinámico cambian de valor cuando las barras de herramientas adicionales del navegador dinámico, como la dirección en la parte superior o la barra de pestañas en la parte inferior, son visibles y cuando no lo están.

Nota: Ten en cuenta que las unidades de viewport dinámicas no tienen en cuenta la presencia del teclado en pantalla. A partir de Chrome 108, puedes configurar una metaetiqueta para cambiar este comportamiento.

Para obtener más información sobre estas unidades nuevas, consulta Las unidades de viewport grandes, pequeñas y dinámicas.

Espacios de color de amplia gama

Navegadores compatibles

• 111
• 111
• 113
• 15.4

Origen

Otra incorporación clave nueva a la plataforma web son los espacios de color de gama amplia. Antes de que la amplia gama de colores estuviera disponible en la plataforma web, se podía tomar una fotografía con colores intensos, visibles en dispositivos modernos, pero no se podía obtener un botón, color de texto o fondo que coincidiera con esos valores vívidos.

Se muestra una serie de imágenes que hacen la transición entre gamas de colores amplias y estrechas, lo que ilustra la viveza del color y sus efectos.
Pruébalo tú mismo

Pero ahora tenemos una variedad de espacios de color nuevos en la plataforma web, incluidos REC2020, P3, XYZ, LAB, OKLAB, LCH y OKLCH. Conoce los nuevos espacios de color web y mucho más en la Guía de colores HD.

Además, puedes ver de inmediato en DevTools cómo se expandió el rango de colores, con esa línea blanca que delimita dónde termina el rango sRGB y dónde comienza el rango de colores de gama más amplia.

Hay muchas más herramientas disponibles para el color. Tampoco te pierdas todas las mejoras de gradientes. Incluso hay una herramienta nueva que Adam Argyle creó para ayudarte a probar un nuevo selector de colores web y un creador de gradientes. Pruébala en gradient.style.

color-mix()

Navegadores compatibles

• 111
• 111
• 113
• 16.2

Origen

La función color-mix() se expande en espacios de color expandidos. Esta función admite la combinación de dos valores de color para crear valores nuevos en función de los canales de los colores que se mezclan. El espacio de color en el que realizas la combinación afecta los resultados. Trabajar en un espacio de color más perceptual, como oklch, ejecutará un rango de colores diferente al de srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Probar la demostración

La función color-mix() proporciona una capacidad solicitada desde hace mucho tiempo: la capacidad de preservar los valores de color opaco mientras les agrega un poco de transparencia. Ahora, puedes usar las variables de color de tu marca mientras creas variaciones de esos colores con diferentes opacidades. Para ello, mezcla un color con un color transparente. Cuando mezclas el color azul de tu marca con un 10% transparente, obtienes un color de marca un 90% opaco. Puedes ver cómo esto te permite crear sistemas de colores rápidamente.

Puedes ver esto en acción en las Herramientas para desarrolladores de Chrome hoy mismo con un ícono de diagrama de Venn de vista previa muy atractivo en el panel de estilos.

Consulta más ejemplos y detalles en nuestra entrada de blog sobre color-mix o prueba este simulador de color-mix().

Fundamentos de CSS

Desarrollar nuevas capacidades que generen beneficios claros para los usuarios es una parte de la ecuación, pero muchas de las funciones que se incluyen en Chrome tienen el objetivo de mejorar la experiencia de los desarrolladores y crear una arquitectura de CSS más confiable y organizada. Estas funciones incluyen anidamiento de CSS, capas en cascada, estilos centrados, funciones trigonométricas y propiedades de transformación individuales.

Anidación

Navegadores compatibles

• 120
• 120
• 117
• 17.2

Origen

El anidamiento de CSS, algo que a los usuarios les encanta de Sass y una de las principales solicitudes de los desarrolladores de CSS durante años, finalmente llega a la plataforma web. La anidación permite a los desarrolladores escribir en un formato más conciso y agrupado que reduce la redundancia.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

También puedes anidar Consultas de medios, lo que significa que puedes anidar Consultas de contenedores. En el siguiente ejemplo, se cambia una tarjeta de un diseño vertical a uno horizontal si hay suficiente ancho en su contenedor:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

El ajuste del diseño a flex se produce cuando el contenedor tiene más (o igual a) 480px de espacio intercalado disponible. El navegador simplemente aplicará ese nuevo estilo de visualización cuando se cumplan las condiciones.

Para obtener más información y ejemplos, consulta nuestra publicación sobre anidado de CSS.

Capas en cascada

Navegadores compatibles

• 99
• 99
• 97
• 15.4

Origen

Otro problema que identificamos en los desarrolladores es garantizar la coherencia en los estilos que prevalecen sobre otros, y una parte de la solución es tener un mejor control sobre la cascada de CSS.

Las capas en cascada resuelven este problema, ya que les brindan a los usuarios control sobre qué capas tienen una precedencia más alta que otras, lo que significa un control más preciso de cuándo se aplican tus estilos.

Explora el proyecto en Codepen.

Obtén más información para usar capas en cascada en este artículo.

CSS con ámbito

Navegadores compatibles

• 118
• 118
• 
• 17.4

Origen

Los estilos con permisos de CSS permiten a los desarrolladores especificar los límites para los que se aplican estilos específicos, lo que crea esencialmente espacios de nombres nativos en CSS. Antes, los desarrolladores dependían de secuencias de comandos de terceros para cambiar el nombre de las clases, o bien convenciones de nombres específicas para evitar colisiones de estilos, pero pronto podrás usar @scope.

Aquí, definimos el alcance de un elemento .title a un .card. Esto evitaría que ese elemento de título entre en conflicto con cualquier otro elemento .title de la página, como el título de una entrada de blog o cualquier otro encabezado.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Puedes ver @scope con límites de alcance junto con @layer en esta demostración en vivo:

Obtén más información sobre @scope en la especificación css-cascade-6.

Funciones trigonométricas

Navegadores compatibles

• 111
• 111
• 108
• 15.4

Origen

Otra parte de la nueva plomería de CSS son las funciones trigonométricas que se agregan a las funciones matemáticas existentes de CSS. Estas funciones ahora son estables en todos los navegadores modernos y te permiten crear diseños más orgánicos en la plataforma web. Un gran ejemplo es este diseño de menú radial, que ahora es posible diseñar y animar con las funciones sin() y cos().

En la siguiente demostración, los puntos giran alrededor de un punto central. En lugar de rotar cada punto alrededor de su propio centro y luego moverlo hacia afuera, cada punto se traduce en los ejes X e Y. Para determinar las distancias en los ejes X e Y, se tienen en cuenta cos() y, respectivamente, sin() de --angle.

Consulta nuestro artículo sobre funciones trigonométricas para obtener información más detallada sobre este tema.

Propiedades de transformación individuales

Navegadores compatibles

• 104
• 104
• 72
• 14.1

Origen

La ergonomía de los desarrolladores sigue mejorando con las funciones de transformación individuales. Desde la última vez que realizamos I/O, las transformaciones individuales se mantuvieron estables en todos los navegadores modernos.

En el pasado, dependías de la función de transformación para aplicar subfunciones que escalaran, rotaran y translataran un elemento de la IU. Esto implicaba mucha repetición y era especialmente frustrante cuando se aplicaban varias transformaciones en diferentes momentos de la animación.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Ahora, puedes tener todos estos detalles en tus animaciones de CSS si separas los tipos de transformaciones y los aplicas de forma individual.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Con esto, los cambios en la traslación, la rotación o la escala pueden ocurrir de forma simultánea a diferentes velocidades de cambio en diferentes momentos durante la animación.

Consulta esta entrada sobre funciones de transformación individuales para obtener más información.

Componentes personalizables

Para asegurarnos de resolver algunas de las necesidades clave de los desarrolladores a través de la plataforma web, estamos trabajando con el grupo de la comunidad de OpenUI y hemos identificado tres soluciones para comenzar:

1. Función integrada de ventana emergente con controladores de eventos, una estructura declarativa de DOM y valores predeterminados accesibles.
2. Una API de CSS para vincular dos elementos entre sí y habilitar el posicionamiento de ancla
3. Es un componente de menú desplegable personalizable para cuando quieras aplicar diseño al contenido dentro de un elemento select.

Notificación emergente

La API de popover les brinda a los elementos algunos elementos mágicos de compatibilidad con el navegador incorporados, como los siguientes:

• Compatibilidad con la capa superior, por lo que no tienes que administrar z-index. Cuando abres un cuadro flotante o un diálogo, promocionas ese elemento a una capa especial en la parte superior de la página.
• Comportamiento de descarte de luz de forma gratuita en las ventanas emergentes de auto, de modo que, cuando hagas clic fuera de un elemento, la ventana emergente se descartará, se quitará del árbol de accesibilidad y se administrará correctamente el enfoque.
• Accesibilidad predeterminada para el tejido conectivo del destino del pop-up y el pop-up en sí.

Todo esto significa que se debe escribir menos JavaScript para crear toda esta funcionalidad y hacer un seguimiento de todos estos estados.

La estructura de DOM para el popover es declarativa y se puede escribir con la misma claridad que darle a tu elemento de popover un id y el atributo popover. Luego, sincronizas ese ID con el elemento que abriría el popover, como un botón con el atributo popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover es una abreviatura de popover=auto. Un elemento con popover=auto cerrará de forma forzosa otros pop-overs cuando se abra, recibirá el foco cuando se abra y podrá descartarse de forma ligera. Por el contrario, los elementos popover=manual no cierran de forma forzosa ningún otro tipo de elemento, no reciben el enfoque de inmediato y no se quitan con la luz. Se cierran con un botón de activación o con otra acción de cierre.

Actualmente, la documentación más actualizada sobre los pop-overs se encuentra en MDN.

Posicionamiento de la ancla

Los menús emergentes también se usan con frecuencia en elementos como diálogos y cuadros de herramientas, que suelen anclarse a elementos específicos. Observa este ejemplo de evento. Cuando haces clic en un evento de calendario, aparece un diálogo cerca del evento en el que hiciste clic. El elemento del calendario es el ancla, y el pop-up es el diálogo que muestra los detalles del evento.

Puedes crear una información sobre herramientas centrada con la función anchor(). Para ello, usa el ancho del ancla para posicionar la información sobre herramientas en el 50% de la posición x del ancla. Luego, usa los valores de posicionamiento existentes para aplicar el resto de los diseños de posición.

Pero ¿qué sucede si el popover no se ajusta al viewport según la forma en que lo posicionaste?

Para resolver este problema, la API de posicionamiento de anclas incluye posiciones de resguardo que puedes personalizar. En el siguiente ejemplo, se crea una posición de resguardo llamada "top-then-bottom". Primero, el navegador intentará posicionar la información sobre herramientas en la parte superior y, si no cabe en la ventana de visualización, la colocará debajo del elemento de anclaje, en la parte inferior.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Nota: Aquí puedes obtener información muy detallada, lo que puede volverse detallado, pero también es una oportunidad para que las bibliotecas y los sistemas de diseño escriban la lógica de posicionamiento y que tú la reutilices en todas partes.

Obtén más información sobre el posicionamiento de los anclajes en esta entrada de blog.

<selectmenu>

Con el posicionamiento de popover y de ancla, puedes crear menús de selección totalmente personalizables. El grupo de la comunidad de OpenUI investigó la estructura fundamental de estos menús y buscó formas de permitir la personalización de cualquier contenido que contengan. Observa estos ejemplos visuales:

Para compilar ese ejemplo de selectmenu de la izquierda, con puntos de colores que corresponden al color que se mostraría en un evento de calendario, puedes escribirlo de la siguiente manera:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Transiciones de propiedades discretas

Para que todo esto haga que los popovers aparezcan y desaparezcan sin problemas, la Web necesita una forma de animar propiedades discretas. Estas son propiedades que, por lo general, no se podían animar en el pasado, como la animación hacia y desde la capa superior y la animación hacia y desde display: none.

Como parte del trabajo para habilitar transiciones atractivas para ventanas emergentes, menús de selección e incluso elementos existentes, como diálogos o componentes personalizados, los navegadores están habilitando nuevas canalizaciones para admitir estas animaciones.

En la siguiente demostración de popovers, se animan los popovers con :popover-open para el estado abierto, @starting-style para el estado anterior al abierto y se aplica un valor de transformación al elemento directamente para el estado después de que se abre y se cierra. Para que todo funcione con la pantalla, se debe agregar a la propiedad transition de la siguiente manera:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interacciones

Lo que nos lleva a las interacciones, la última parada de este recorrido por las funciones de la IU web.

Ya hablamos sobre la animación de propiedades discretas, pero también hay algunas APIs muy interesantes que llegan en Chrome en torno a las animaciones basadas en desplazamientos y las transiciones de vistas.

Animaciones basadas en el desplazamiento

Navegadores compatibles

• 115
• 115
• 
• x

Origen

Las animaciones basadas en desplazamientos te permiten controlar la reproducción de una animación en función de la posición en un contenedor de desplazamientos. Esto significa que a medida que te desplazas hacia arriba o hacia abajo, la animación se arrastra hacia delante o hacia atrás. Además, con esta función también puedes controlar una animación según la posición de un elemento dentro de su contenedor de desplazamiento. De esta forma, puedes crear efectos interesantes como imágenes de fondo con paralaje, imágenes que se revelan a medida que se visualizan y barras de progreso para desplazarse.

Esta API admite un conjunto de clases de JavaScript y propiedades de CSS que te permiten crear fácilmente animaciones declarativas basadas en desplazamientos.

Para controlar una animación de CSS mediante el desplazamiento, usa las nuevas propiedades scroll-timeline, view-timeline y animation-timeline. Para controlar una API de Web Animations de JavaScript, pasa una instancia de ScrollTimeline o ViewTimeline como la opción timeline a Element.animate().

Estas APIs nuevas funcionan en conjunto con las APIs de Web Animations y CSS Animations, lo que significa que se benefician de las ventajas de estas APIs. Esto incluye la capacidad de ejecutar estas animaciones desde el subproceso principal. Sí, leíste bien: ahora puedes tener animaciones suaves y fluidas, impulsadas por el desplazamiento, que se ejecutan en el subproceso principal con solo unas pocas líneas de código adicional. ¿Qué no te gusta?

Si deseas obtener una guía detallada para crear estas animaciones impulsadas por el desplazamiento, consulta este artículo sobre animaciones impulsadas por el desplazamiento.

Cómo ver transiciones

Navegadores compatibles

• 111
• 111
• x
• 18

Origen

La API de View Transition facilita el cambio del DOM en un solo paso, mientras se crea una transición animada entre los dos estados. Pueden ser simples fundidos entre las vistas, pero también puedes controlar la transición de las partes individuales de la página.

Las transiciones de vistas se pueden usar como una mejora progresiva: toma el código que actualiza el DOM con cualquier método y une en la API de transición de vistas con un resguardo para los navegadores que no admiten la función.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

El aspecto que debería tener la transición se controla mediante CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Como se demuestra en esta maravillosa demostración de Maxi Ferreira, otras interacciones de la página, como un video de reproducción, siguen funcionando mientras se realiza una transición de vistas.

Actualmente, las transiciones de vistas funcionan con apps de una sola página (SPA) a partir de Chrome 111. Estamos trabajando para admitir apps de varias páginas. Para obtener más información, consulta nuestra guía completa de transiciones de vistas.

Conclusión

Mantente al tanto de las páginas de destino más recientes en CSS y HTML aquí en developer.chrome.com y consulta los videos de I/O para ver más páginas de destino web.