Los últimos meses han marcado el comienzo de una era dorada para la UI web. Llegaron las nuevas funciones de la plataforma con una adopción rigurosa entre navegadores que admiten más funciones web y de personalización que nunca.
Estas son 20 de las funciones más interesantes y de mayor impacto que se lanzaron hace poco o pronto estarán disponibles:
- Consultas de contenedores
- Consultas sobre el estilo
- Selector
:has() - nth-de microsintaxis
text-wrap: balanceinitial-letter- Unidades de viewport dinámico
- Espacios de color de amplia gama
color-mix()- Anidación
- Capas de cascada
- Estilos con alcance
- Funciones trigonométricas
- Propiedades de transformación individuales
- ventana emergente
- posicionamiento de los anclas
- menúdeselección
- Transiciones de propiedades discretas
- Animaciones basadas en desplazamientos
- Cómo ver transiciones
El nuevo responsivo
Comencemos con algunas capacidades nuevas de diseño adaptable. Las nuevas funciones de la plataforma te permiten crear interfaces lógicas con componentes que poseen su información de estilo adaptable, compilar interfaces que aprovechan las capacidades del sistema para ofrecer IU más nativas y permiten 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
Recientemente, las consultas de contenedores se estabilizaron en todos los navegadores modernos. Te permiten consultar el tamaño y el estilo de un elemento superior para determinar los estilos que se deben aplicar a cualquiera de sus elementos secundarios. Las consultas de medios solo pueden acceder y aprovechar la información del viewport, lo que significa que solo pueden funcionar en una vista de 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 o diseños dentro de ellos.
En el siguiente ejemplo de Recibidos, las barras laterales Prioritarios y Favoritos son contenedores. Los correos electrónicos 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, simplemente aparece en diferentes vistas
Como 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 responderán a su espacio asignado de manera 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 entrada.
Consultas de estilo
La especificación de consulta del contenedor también te permite consultar los valores de estilo de un contenedor superior. Actualmente, esta función se implementa 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, sol y nublado, para definir el estilo del fondo y del ícono 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;
}
}
Este es solo el comienzo de las consultas 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 por rango para aplicar estilos basados en un rango de valores. Esto permitiría aplicar los estilos que se muestran aquí usando un valor porcentual de la probabilidad de lluvia o nubosidad.
Puedes obtener más información y ver más demostraciones en nuestra entrada de blog sobre consultas de estilo.
:has()
Hablando de funciones potentes y dinámicas, el :has() selector es una de las nuevas capacidades de CSS más potentes que llegan a los navegadores modernos. Con :has(), puedes aplicar diseños verificando si un elemento superior contiene la presencia de elementos secundarios específicos o si estos están en un estado específico. Esto significa que, básicamente, ahora tenemos un selector de elementos superiores.
A partir del ejemplo de la consulta del contenedor, puedes usar :has() para que los componentes sean aún más dinámicos. En él, se aplica un fondo gris a un elemento con un elemento "estrella" y uno con una casilla de verificación marcada en azul.
Sin embargo, esta API no se limita a la selección superior. También puedes diseñar cualquier elemento secundario dentro del elemento superior. Por ejemplo, el título está en negrita cuando el elemento tiene presente el elemento de estrella. Esto se logra con .item:has(.star) .title. El uso del selector :has() te brinda acceso a elementos superiores, secundarios e incluso elementos del mismo nivel, lo que hace que esta API sea muy flexible, con nuevos casos de uso que aparecen todos los días.
Para obtener más información y explorar más demostraciones, consulta esta entrada de blog sobre :has().
nth-of sintaxis
Navegadores compatibles
- 111
- 111
- 113
- 9
La plataforma web ahora cuenta con una selección de nth-child más avanzada. La sintaxis avanzada de tipo nth-child proporciona una palabra clave nueva ("of"), que permite usar la microsintaxis existente de An+B, con un subconjunto más específico para realizar búsquedas.
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 será 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 con más detalle 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 dentro de nuestros estilos; la tipografía es otro lugar. A partir de Chrome 114, puedes usar el balanceo de ajuste de texto para los encabezados mediante la propiedad text-wrap con el valor balance.
Para equilibrar el texto, el navegador realiza efectivamente una búsqueda binaria del ancho más pequeño que no genere líneas adicionales, deteniendo un píxel de CSS (no un píxel de visualización). 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 agradable de la tipografía web es initial-letter. Esta propiedad de CSS te ofrece un mejor control del estilo de la terminación inyectable.
Usa initial-letter en el seudoelemento :first-letter para especificar el tamaño de la letra según la cantidad de líneas que ocupa.
El desplazamiento del bloque de la letra, o "receptor", que indica dónde se ubicará la letra.
Obtén más información para usar intial-letter aquí.
Unidades de viewport dinámico
Navegadores compatibles
- 108
- 108
- 101
- 15.4
Un problema común que enfrentan los desarrolladores web en la actualidad es el tamaño exacto y coherente del viewport completo, especialmente en dispositivos móviles. Como desarrollador, quieres que 100vh (100% de la altura del viewport) indique "ser tan alto como el viewport", pero la unidad vh no tiene en cuenta elementos como la retracción de las barras de navegación en dispositivos móviles, por lo que a veces termina demasiado y provoca el desplazamiento.
Para resolver este problema, ahora tenemos nuevos valores de unidad en la plataforma web, incluidos los siguientes:
- Altura y ancho de viewport pequeño (o svh y svw), que representan el tamaño más pequeño activo de viewport.
- Altura y ancho de viewport grande (lvh y lvw), que representan el tamaño más grande.
- Altura y ancho de viewport dinámico (dvh y dvw).
Las unidades de viewport dinámico 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 unidades nuevas, consulta el artículo Las unidades de viewport grande, pequeño y dinámico.
Espacios de color de amplia gama
Otra nueva clave que se agregó a la plataforma web son los espacios de color de amplia gama. Antes de que la amplia gama de colores estuviera disponible en la plataforma web, podías tomar una fotografía con colores vívidos y poder verla en dispositivos modernos, pero no podías conseguir un botón, un color de texto ni un fondo que coincidieran con esos valores vívidos.
Pruébalo tú mismo
Pero ahora tenemos un rango de nuevos espacios de color en la plataforma web que incluye 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 en HD.
De inmediato, en Herramientas para desarrolladores, puedes ver cómo se expandió el rango de colores, con esa línea blanca que describe dónde termina el rango de 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 grandes mejoras de gradiente. Incluso hay una herramienta nueva Adam Argyle creada para ayudarte a probar un nuevo selector de color para la Web y un creador de gradientes; pruébalo en gradient.style.
color-mix()
Expandir los espacios de color expandidos es la función color-mix(). 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 mezclan. El espacio de color en el que mezclas afecta los resultados. Trabajar en un espacio de color más perceptual como oklch pasará por un rango de colores diferente al de algo como 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 función solicitada desde hace tiempo: la capacidad de preservar los valores de color opaco y, al mismo tiempo, agregarles transparencia. Ahora, puedes usar las variables de color de tu marca mientras creas variaciones de esos colores en diferentes opacidades. La forma de hacerlo es mezclar un color con transparente. Cuando combinas el color de tu marca azul con un 10% de transparente, obtienes un color de marca 90% opaco. Puedes ver cómo esto te permite compilar rápidamente sistemas de color.
Hoy en día, puedes ver esto en acción en las Herramientas para desarrolladores de Chrome con un ícono de vista previa de Venn muy atractivo en el panel de estilos.
Encuentra más ejemplos y detalles en nuestra entrada de blog sobre color-mix o prueba esta playground de color-mix().
Fundamentos de los CSS
Una parte de la ecuación es crear nuevas capacidades que permitan lograr claramente los usuarios, pero muchas de las funciones que llegan a Chrome tienen el objetivo de mejorar la experiencia de los desarrolladores y crear una arquitectura de CSS más confiable y organizada. Estas características incluyen el anidamiento 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 las personas adoran de Sass, y una de las principales solicitudes de los desarrolladores de CSS durante años, finalmente llega a la plataforma web. Esta función permite a los desarrolladores escribir en un formato más breve y agrupado que reduce la redundancia.
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
También puede anidar consultas de medios, lo que significa que puede anidar consultas de contenedor. 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) 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 anidación de CSS.
Capas de Cascade
Otro punto débil de los desarrolladores que identificamos es garantizar la coherencia en el que los estilos prevalecen sobre los demás, y una parte de la solución de este problema es tener un mejor control sobre la cascada de CSS.
Para solucionar este problema, las capas en cascada otorgan a los usuarios control sobre las capas que 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 de cascada en este artículo.
CSS con alcance
Navegadores compatibles
- 118
- 118
- x
- 17,4
Los estilos con alcance de CSS permiten a los desarrolladores especificar los límites a los que se aplican estilos específicos, lo que básicamente crea 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 colisiones de estilos, pero pronto podrás usar @scope.
Aquí, estamos determinando el alcance de un elemento .title en un .card. Esto evitará que el elemento de título entre en conflicto con otros elementos .title de la página, como el título de una entrada de blog u otro encabezado.
@scope (.card) {
.title {
font-weight: bold;
}
}
En esta demostración en vivo, puedes ver @scope con límites de alcance junto con @layer:
Obtén más información sobre @scope en la especificación de css-cascade-6.
Funciones trigonométricas
Otro aspecto del nuevo diseño 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 radial del menú, que ahora es posible diseñar y animar con las funciones sin() y cos().
En la siguiente demostración, los puntos giran en torno a un punto central. En lugar de rotar cada punto alrededor de su propio centro y luego moverlo hacia afuera, cada punto se traslada en los ejes X e Y. Las distancias en los ejes X e Y se determinan teniendo en cuenta cos() y, respectivamente, la sin() de --angle.
Consulta nuestro artículo sobre funciones trigonométricas para obtener información más detallada sobre este tema.
Propiedades de las transformaciones individuales
La ergonomía de los desarrolladores sigue mejorando con funciones de transformación individuales. Desde la última vez que organizamos I/O, las transformaciones individuales se mantuvieron estables en todos los navegadores modernos.
Antes, se usaba la función de transformación para aplicar subfunciones a fin de escalar, rotar y traducir un elemento de la IU. Esto requería mucha repetición y resultó especialmente frustrante cuando se aplicaban múltiples 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 todo este detalle en tus animaciones de CSS si separas los tipos de transformaciones y se los aplicas de forma individual.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.target:hover {
scale: 2;
}
De esta manera, los cambios en la traslación, la rotación o la escala pueden ocurrir simultáneamente a diferentes velocidades de cambio en distintos momentos durante la animación.
Consulta esta entrada sobre las 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, trabajamos con el grupo de la comunidad de OpenUI y, para comenzar, identificamos tres soluciones:
- Funcionalidad integrada de ventana emergente con controladores de eventos, una estructura de DOM declarativa y valores predeterminados accesibles.
- Una API de CSS que conecta dos elementos entre sí para habilitar el posicionamiento de las anclas.
- Un componente de menú desplegable personalizable para cuando quieras darle estilo al contenido de una selección.
Notificación emergente
La API de popover les brinda a los elementos elementos mágicos integrados con la compatibilidad con el navegador, como los 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 descartar luz de forma gratuita en las ventanas emergentes de
auto, por lo que, cuando haces clic fuera de un elemento, la ventana emergente se descarta, se quita del árbol de accesibilidad y el enfoque se administra de forma apropiada. - Ofrece accesibilidad predeterminada para la conexión del objetivo de la ventana emergente y la propia ventana emergente.
Todo esto significa que se deberá escribir menos JavaScript para crear toda esta funcionalidad y hacer un seguimiento de todos estos estados.
La estructura del DOM del elemento emergente es declarativa y puede escribirse con la misma claridad que le da al elemento de ventana emergente un id y el atributo popover. Luego, sincronizarás 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 otras ventanas emergentes cuando se abra, recibirá el enfoque cuando se abra y podrá descartar con luz. Por el contrario, los elementos popover=manual no fuerzan el cierre de ningún otro tipo de elemento, no reciben el enfoque de inmediato ni descartan con luz. Se cierran con un botón de activación o con otra acción de cierre.
Actualmente, puedes encontrar la documentación más actualizada sobre las ventanas emergentes en MDN.
Posicionamiento del anclaje
Las ventanas emergentes también se usan con frecuencia en elementos como los cuadros de diálogo y la información sobre herramientas, que por lo general deben estar anclados a elementos específicos. Tomemos este ejemplo de evento. Cuando hagas clic en un evento de calendario, aparecerá un diálogo cerca del evento en el que hayas hecho clic. El elemento del calendario es el ancla, y la ventana emergente es el diálogo que muestra los detalles del evento.
Puedes crear un cuadro de información centrado con la función anchor() si utilizas el ancho del ancla para posicionar la información en el 50% de la posición x del ancla. Luego, usa los valores de posicionamiento existentes para aplicar el resto de los estilos de posición.
Pero ¿qué sucede si la ventana emergente no entra en el viewport en función de cómo lo posicionaste?
Para solucionar este problema, la API de Anchor Positioning incluye posiciones de resguardo que puedes personalizar. En el siguiente ejemplo, se crea una posición de resguardo llamada “top-then-bottom” (parte superior y luego inferior). El navegador primero intentará colocar la información sobre la herramienta en la parte superior y, si eso no cabe en el viewport, el navegador 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);
}
}
Obtén más información sobre el posicionamiento de los anclas en esta entrada de blog.
<selectmenu>
Con el posicionamiento tanto de ventana emergente como de anclaje, puedes crear menús de selección completamente personalizables. El grupo de la comunidad de OpenUI ha estado investigando la estructura fundamental de estos menús y buscando formas de permitir la personalización de cualquier contenido dentro de ellos. Tomemos estos ejemplos visuales:
Para crear ese ejemplo de selectmenu del extremo izquierdo, con puntos de colores correspondientes 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 transicione las ventanas emergentes de forma fluida, la Web necesita alguna forma de animar propiedades discretas. Estas son propiedades que normalmente no se podían animar en el pasado, como la animación desde y hacia la capa superior, y la animación desde y hacia display: none.
Como parte del trabajo para permitir transiciones atractivas en ventanas emergentes, menús de selección e incluso elementos existentes como diálogos o componentes personalizados, los navegadores están permitiendo el uso de nuevos elementos de fontanería para admitir estas animaciones.
En la siguiente demostración de ventana emergente, se animan las ventanas emergentes con :popover-open para el estado abierto, @starting-style para el estado antes de la apertura y se aplica un valor de transformación al elemento directamente para el estado después de la apertura y el cierre. Para que todo esto funcione con Display, es necesario agregar elementos 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 IU web.
Ya hablamos sobre la animación de propiedades discretas, pero también hay algunas APIs muy interesantes que llegan a Chrome para animaciones basadas en desplazamientos y transiciones de vistas.
Animaciones basadas en desplazamientos
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 CSS mediante el desplazamiento, usa las nuevas propiedades scroll-timeline, view-timeline y animation-timeline.
Para controlar una API de JavaScript Web Animations, pasa una instancia 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 que estas animaciones se ejecuten fuera del subproceso principal. Sí, lee esto correctamente: ahora puedes tener animaciones fluidas y fluidas, controladas por el desplazamiento, que se ejecutan fuera del subproceso principal, con solo unas pocas líneas de código adicional. ¿Y qué no?
Para obtener una guía detallada y detallada sobre cómo crear estas animaciones basadas en desplazamientos, consulta este artículo sobre las animaciones basadas en desplazamientos.
Ver transiciones
La API de transición de vistas facilita la modificación del DOM en un solo paso y, al mismo tiempo, crea una transición animada entre los dos estados. Estas pueden ser simples atenuaciones entre vistas, pero también puedes controlar la forma en que las partes individuales de la página deben hacer la transición.
Las transiciones de vistas se pueden usar como una mejora progresiva: toma tu código que actualice el DOM por cualquier método y únelo a la API de transición de vista con un resguardo para los navegadores que no admitan 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));
}
Cómo debería verse 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 trabajando mientras se produce una transición de vista.
Actualmente, las transiciones de vistas funcionan con apps de una sola página (SPA) de Chrome 111. Se está trabajando en la compatibilidad con apps de varias páginas. Para obtener más información, consulta nuestra guía completa de transiciones, que te explicará todo.
Conclusión
Mantente al tanto de los lanzamientos más recientes en CSS y HTML en developer.chrome.com y mira los videos de I/O para ver más aterrizajes en la Web.