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

Una Kravets

Bramus

Adam Argyle

Los últimos meses marcaron una época dorada para la IU web. Llegaron nuevas capacidades de la plataforma con una gran adopción en todos los navegadores que admiten más capacidades web y funciones de personalización que nunca.

Estas son 20 de las funciones más interesantes y útiles que se lanzaron recientemente o que se lanzarán pronto:

• Consultas de contenedores
• Consultas de estilo
• Selector de :has()
• Microsintaxis nth-of
• text-wrap: balance
• initial-letter
• Unidades de viewport dinámicas
• Espacios de color de amplia gama
• color-mix()
• Anidamiento
• Capas en cascada
• Estilos con alcance
• Funciones trigonométricas
• Propiedades de transformación individuales
• popover
• Posicionamiento del ancla
• selectmenu
• Transiciones de propiedades discretas
• Animaciones controladas por el desplazamiento
• Transiciones de vista

El nuevo diseño responsivo

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

Consultas de contenedores

Las consultas de contenedor se volvieron estables recientemente en todos los navegadores modernos. Te permiten consultar el tamaño y el diseño de un elemento principal 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 trabajar en una vista macro de un diseño de página. Por otro lado, las consultas de contenedor son una herramienta más precisa que puede admitir cualquier cantidad de diseños o diseños dentro de diseños.

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

Como tenemos una consulta de contenedor, los diseños de estos componentes son dinámicos. Si ajustas el tamaño y el diseño de la página, los componentes responderán al espacio asignado individualmente. 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 creación de componentes lógicos en esta publicación.

Consultas de diseño

La especificación de la consulta de contenedor también te permite consultar los valores de estilo de un contenedor principal. Actualmente, esta función se implementó parcialmente en Chrome 111, donde puedes usar propiedades personalizadas de CSS para aplicar estilos de contenedor.

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

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

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

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

Puedes obtener más información y ver más demostraciones en nuestra entrada de blog sobre las consultas de estilo.

:has()

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

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

Sin embargo, esta API no se limita a la selección de elementos superiores. También puedes aplicar un diseño a los elementos secundarios dentro del elemento principal. Por ejemplo, el título está en negrita cuando el elemento tiene el elemento de estrella presente. Esto se logra con .item:has(.star) .title. El selector :has() te permite acceder a elementos principales, secundarios y hasta hermanos, lo que la convierte en una API muy flexible, con nuevos casos de uso que surgen todos los días.

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

Sintaxis de nth-of

La plataforma web ahora tiene una selección nth-child más avanzada. La sintaxis avanzada de nth-child proporciona una nueva palabra clave ("of") que te permite usar la microsintaxis existente de An+B con un subconjunto más específico dentro del cual buscar.

Si usas 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 que también es el segundo elemento secundario. Esto contrasta con :nth-child(2 of .special), que primero prefiltrará todos los elementos .special y, luego, elegirá el segundo de esa lista.

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

text-wrap: balance

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

Para equilibrar el texto, el navegador realiza de manera eficaz una búsqueda binaria del ancho más pequeño que no genera líneas adicionales, y se detiene en un píxel de 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.

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

initial-letter

Otra mejora interesante en la tipografía web es initial-letter. Esta propiedad de CSS te brinda un mejor control para el diseño de capitulares insertadas.

Usas initial-letter en el seudoelemento :first-letter para especificar lo siguiente: El tamaño de la letra según la cantidad de líneas que ocupa. Es el desplazamiento del bloque de la letra, o “hundimiento”, donde se ubicará la letra.

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

Unidades de viewport dinámicas

Un problema común que enfrentan los desarrolladores web hoy en día es el dimensionamiento preciso y coherente de la ventana gráfica completa, especialmente en dispositivos móviles. Como desarrollador, quieres que 100vh (el 100% de la altura del viewport) signifique “ser tan alto como el viewport”, pero la unidad vh no tiene en cuenta elementos como las barras de navegación que se retraen en dispositivos móviles, por lo que, a veces, termina siendo demasiado larga y provoca desplazamiento.

Para resolver este problema, ahora tenemos nuevos valores de unidades en la plataforma web, incluidos los siguientes: - Alto y ancho del viewport pequeño (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ámicas cambian de valor cuando las barras de herramientas dinámicas adicionales del navegador, como la dirección en la parte superior o la barra de pestañas en la parte inferior, están visibles y cuando no lo están.

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

Espacios de color de amplia gama

Otra nueva incorporación clave a la plataforma web son los espacios de color de gama amplia. Antes de que los colores de amplia gama estuvieran disponibles en la plataforma web, podías tomar una fotografía con colores vivos, que se podían ver en dispositivos modernos, pero no podías hacer que un botón, el color del texto o el fondo coincidieran con esos valores vivos.

Pero ahora tenemos una variedad de nuevos espacios de color 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 color en HD.

Y puedes ver de inmediato en Herramientas para desarrolladores cómo se expandió el rango de color, con esa línea blanca que delinea dónde termina el rango sRGB y dónde comienza el rango de color de gama más amplia.

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

color-mix()

La función color-mix() amplía los espacios de color expandidos. Esta función admite la combinación de dos valores de color para crear valores nuevos basados en los canales de los colores que se combinan. El espacio de color en el que mezclas afecta los resultados. Trabajar en un espacio de color más perceptual, como oklch, abarcará un rango de color 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);

La función color-mix() proporciona una capacidad muy solicitada: la capacidad de conservar los valores de color opacos y, al mismo tiempo, agregarles algo de transparencia. Ahora puedes usar las variables de color de tu marca mientras creas variaciones de esos colores con diferentes opacidades. Para hacerlo, mezcla un color con transparente. Cuando mezclas el color azul de tu marca con un 10% de transparencia, obtienes un color de marca con un 90% de opacidad. Puedes ver cómo esto te permite compilar rápidamente sistemas de color.

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 agradable en el panel de estilos.

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

Conceptos básicos de CSS

Crear nuevas funciones que tengan beneficios claros para los usuarios es una parte de la ecuación, pero muchas de las funciones que se lanzan en Chrome tienen el objetivo de mejorar la experiencia del desarrollador y crear una arquitectura de CSS más confiable y organizada. Estas funciones incluyen la anidación de CSS, las capas en cascada, los estilos con alcance, las funciones trigonométricas y las propiedades de transformación individuales.

Anidación

El anidamiento de CSS, algo que a la gente le encanta de Sass y una de las principales solicitudes de los desarrolladores de CSS durante años, finalmente llega a la plataforma web. El anidamiento 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 también 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 de 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 el anidamiento de CSS.

Capas en cascada

Otro punto débil que identificamos para los desarrolladores es garantizar la coherencia en los estilos que se imponen 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 permiten que los usuarios controlen qué capas tienen mayor precedencia que otras, lo que significa un control más preciso de cuándo se aplican tus estilos.

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

CSS con alcance

Los estilos con alcance 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 de convenciones de nomenclatura específicas para evitar conflictos de estilo, pero pronto podrás usar @scope.

Aquí, definimos el alcance de un elemento .title para 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

Otra parte de la nueva infraestructura de CSS son las funciones trigonométricas que se agregan a las funciones matemáticas de CSS existentes. 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 se puede 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 traslada sobre los ejes X e Y. Las distancias en los ejes X e Y se determinan teniendo en cuenta el cos() y el sin() del --angle, respectivamente.

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

Propiedades de transformación individuales

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

En el pasado, dependías de la función de transformación para aplicar subfunciones para escalar, rotar y trasladar 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 CSS separando los tipos de transformaciones y aplicándolos 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 simultáneamente a diferentes velocidades de cambio en diferentes momentos durante la animación.

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

Componentes personalizables

Para asegurarnos de que la plataforma web satisfaga algunas de las necesidades clave de los desarrolladores, trabajamos con el grupo de la comunidad de OpenUI y ya identificamos tres soluciones para comenzar:

1. Funcionalidad de ventanas emergentes integrada con controladores de eventos, una estructura DOM declarativa y valores predeterminados accesibles.
2. Es una API de CSS para unir dos elementos entre sí y habilitar el posicionamiento de anclaje.
3. Es un componente de menú desplegable personalizable que se usa cuando quieres aplicar un diseño al contenido dentro de un elemento select.

Notificación emergente

La API de popover les brinda a los elementos cierta magia integrada de compatibilidad con el navegador, como las siguientes:

• Compatibilidad con la capa superior, por lo que no tienes que administrar z-index. Cuando abres una ventana emergente o un diálogo, promueves ese elemento a una capa especial en la parte superior de la página.
• Comportamiento de descarte ligero gratuito para ventanas emergentes de auto, de modo que, cuando haces clic fuera de un elemento, se descarta la ventana emergente, se quita del árbol de accesibilidad y se administra el enfoque correctamente.
• Es la accesibilidad predeterminada para el tejido conectivo del destino del elemento emergente y el elemento emergente en sí.

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

La estructura del DOM para el elemento emergente es declarativa y se puede escribir con la misma claridad que si le asignaras a tu elemento emergente un id y el atributo popover. Luego, sincroniza ese ID con el elemento que abriría la ventana emergente, 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 forzará el cierre de otros elementos emergentes cuando se abra, recibirá el enfoque cuando se abra y se podrá descartar con un deslizamiento. Por el contrario, los elementos popover=manual no fuerzan el cierre de ningún otro tipo de elemento, no reciben el enfoque de inmediato y no se descartan con un deslizamiento. 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 elementos emergentes se encuentra en MDN.

Posicionamiento del ancla

Los elementos emergentes también se usan con frecuencia en elementos como diálogos y sugerencias, que suelen tener que anclarse a elementos específicos. Veamos este ejemplo de evento. Cuando haces clic en un evento del calendario, aparece un diálogo cerca del evento en el que hiciste clic. El elemento del calendario es el anclaje, y la ventana emergente es el diálogo que muestra los detalles del evento.

Puedes crear una sugerencia centrada con la función anchor(), usando el ancho del elemento de anclaje para posicionar la sugerencia en el 50% de la posición X del elemento de anclaje. Luego, usa los valores de posición existentes para aplicar el resto de los diseños de ubicación.

Pero ¿qué sucede si la ventana emergente no cabe en la ventana gráfica según la forma en que la posicionaste?

Para resolver este problema, la API de posicionamiento de anclajes 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 sugerencia en la parte superior y, si no cabe en el viewport, la posicionará 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);
  }
}

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

<selectmenu>

Con el posicionamiento de elementos emergentes y anclajes, puedes crear selectmenus completamente 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 dentro de ellos. Observa estos ejemplos visuales:

Para crear ese ejemplo de selectmenu más a la izquierda, con puntos de colores que corresponden al color que se mostraría dentro de 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 propiedad discretas

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

Como parte del trabajo para habilitar transiciones agradables para los elementos emergentes, los menús de selección y hasta los elementos existentes, como los diálogos o los componentes personalizados, los navegadores están habilitando nuevas conexiones para admitir estas animaciones.

En la siguiente demostración de ventanas emergentes, se animan las ventanas emergentes para que aparezcan y desaparezcan con :popover-open para el estado abierto, @starting-style para el estado previo a la apertura y se aplica un valor de transformación al elemento directamente para el estado posterior a la apertura y el cierre. Para que todo esto 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

Esto 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 se lanzarán en Chrome en relación con las animaciones controladas por desplazamiento y las transiciones de vista.

Animaciones basadas en el desplazamiento

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 con 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 existentes, lo que significa que se benefician de las ventajas de estas APIs. Esto incluye la capacidad de ejecutar estas animaciones fuera del subproceso principal. Sí, leíste bien: ahora puedes tener animaciones fluidas controladas por el desplazamiento, que se ejecutan fuera del subproceso principal, con solo unas pocas líneas de código adicionales. ¿Qué más se puede pedir?

Para obtener una guía detallada sobre cómo crear estas animaciones controladas por desplazamiento, consulta este artículo sobre animaciones controladas por desplazamiento.

Transiciones de vista

La API de View Transition facilita el cambio del DOM en un solo paso, a la vez que crea una transición animada entre los dos estados. Pueden ser atenuaciones simples entre vistas, pero también puedes controlar cómo deben realizar la transición las partes individuales de la página.

Las transiciones de vista se pueden usar como una mejora progresiva: toma el código que actualiza el DOM con cualquier método y envuélvelo en la API de View Transitions con una alternativa 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));
}

La apariencia de la transición se controla a través de 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 demostró en esta maravillosa demostración de Maxi Ferreira, otras interacciones de la página, como la reproducción de un video, siguen funcionando mientras se produce una transición de vista.

Actualmente, View Transitions funciona con las aplicaciones de una sola página (SPA) a partir de Chrome 111. Estamos trabajando en la compatibilidad con 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 todos los lanzamientos más recientes de CSS y HTML aquí en developer.chrome.com y mira los videos de I/O para conocer más lanzamientos web.