Ajuste de CSS: 2023

CSS Wrapped: 2023

Ir al contenido:

• Bases arquitectónicas
• Funciones trigonométricas
• Selección compleja del n-ésimo elemento*
• Alcance
• Anidación

• Tipografía
• Initial-letter
• Balanceo o formato atractivo del texto

• Color
• Nivel de color 4
• Función de combinación de colores
• Sintaxis de colores relativos

• Diseño responsivo
• Consultas de contenedores
• Consultas de diseño
• :has selector
• Actualiza la consulta de contenido multimedia
• Consulta de contenido multimedia de secuencias de comandos
• Consulta de medios de transparencia

• Interacción
• Ver transiciones
• Función de aceleración lineal
• Scrollend
• Animaciones impulsadas por el desplazamiento
• Archivo adjunto de cronograma diferido
• Transiciones de propiedades discretas
• Regla de estilo de inicio
• Animación superpuesta

• Componentes
• Ventana emergente
• Hr en select
• Pseudóclases válidas o no válidas para el usuario
• Acordeón exclusivo

¡Vaya! El 2023 fue un gran año para CSS.

Desde #Interop2023 hasta muchos aterrizajes nuevos en el espacio de CSS y de IU que permiten que los desarrolladores alguna vez pensaban imposibles en la plataforma web. Ahora, todos los navegadores modernos admiten consultas de contenedores, subcuadrículas, el selector :has() y una gran cantidad de funciones y espacios de color nuevos. En Chrome, admitimos animaciones basadas en el desplazamiento solo con CSS y animaciones fluidas entre vistas web con transiciones de vistas. Además, hay muchas primitivas nuevas que llegaron para mejorar las experiencias de los desarrolladores, como el anidado de CSS y los estilos con alcance.

¡Qué año! Por lo tanto, queremos finalizar este año histórico celebrando y reconociendo todo el arduo trabajo de los desarrolladores de navegadores y la comunidad web que lo hicieron posible.

Busca las nuevas insignias de Baseline junto a los encabezados de las funciones. Obtén más información aquí.

• = Disponible recientemente en todas las versiones estables de los navegadores principales.

• = Disponibilidad parcial en los navegadores principales.

Bases arquitectónicas

Comencemos con las actualizaciones del lenguaje y las funciones principales de CSS. Estas son funciones fundamentales para la forma en que creas y organizas los estilos, y le brindan un gran poder al desarrollador.

Funciones trigonométricas

Navegadores compatibles

• 111
• 111
• 108
• 15.4

Origen

Chrome 111 agregó compatibilidad con las funciones trigonométricas sin(), cos(), tan(), asin(), acos(), atan() y atan2(), por lo que están disponibles en todos los motores principales. Estas funciones son muy útiles para la animación y el diseño. Por ejemplo, ahora es mucho más fácil colocar los elementos en un círculo alrededor de un centro elegido.

Demostración de funciones trigonométricas

Obtén más información sobre las funciones trigonométricas en CSS.

Selección compleja del n-ésimo elemento*

Navegadores compatibles

• 111
• 111
• 113
• 9

Con el selector de seudoclase :nth-child(), es posible seleccionar elementos en el DOM por su índice. Con la microsintaxis An+B, obtienes un control detallado sobre los elementos que deseas seleccionar.

De forma predeterminada, los seudópodos :nth-*() tienen en cuenta todos los elementos secundarios. A partir de Chrome 111, de forma opcional, puedes pasar una lista de selector a :nth-child() y :nth-last-child(). De esa manera, puedes filtrar previamente la lista de elementos secundarios antes de que An+B haga lo suyo.

En la siguiente demostración, la lógica de 3n+1 se aplica solo a las muñecas pequeñas mediante el filtrado previo con of .small. Usa los menús desplegables para cambiar de forma dinámica el selector utilizado.

Demostración compleja de selección de nth-*

Obtén más información sobre las selecciones nth-* complejas.

Alcance

Navegadores compatibles

• 118
• 118
• 
• 17.4

Origen

Chrome 118 agregó compatibilidad con @scope, una regla de at que te permite definir el alcance de la coincidencia del selector en un subárbol específico del documento. Con el diseño centrado, puedes ser muy específico sobre los elementos que seleccionas sin tener que escribir selectores demasiado específicos ni vincularlos estrechamente a la estructura del DOM.

Un subárbol con alcance se define mediante una raíz de alcance (el límite superior) y un límite de alcance opcional (el límite inferior).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Las reglas de estilo que se colocan dentro de un bloque de alcance solo se orientarán a elementos dentro del subárbol extraído. Por ejemplo, la siguiente regla de estilo con alcance solo se orienta a los elementos <img> que se encuentran entre el elemento .card y cualquier componente anidado que coincida con el selector [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

En la siguiente demostración, los elementos <img> del componente de carrusel no coinciden debido al límite de alcance aplicado.

Captura de pantalla de la demostración del alcance

Demostración en vivo de Scope

Demo de @scope de CSS

Obtén más información sobre @scope en el artículo "Cómo usar @scope para limitar el alcance de tus selectores". En este artículo, obtendrás información sobre el selector :scope, cómo se controla la especificidad, los alcances sin preludio y cómo @scope afecta a la cascada.

Anidación

Navegadores compatibles

• 120
• 120
• 117
• 17.2

Origen

Antes del anidamiento, cada selector debía declararse de forma explícita, por separado. Esto genera repetición, un gran volumen de hojas de estilo y una experiencia de autoría dispersa. Ahora, puedes continuar con los selectores con reglas de estilo relacionadas agrupadas dentro de ellas.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Presentaciones en pantalla anidadas

Demostración en vivo de anidación

Cambia el selector de anidación relajado para decidir el ganador de la carrera.

El anidamiento puede reducir el peso de una hoja de estilo, reducir la sobrecarga de los selectores repetidos y centralizar los estilos de los componentes. La sintaxis se lanzó inicialmente con una limitación que requería el uso de & en varios lugares, pero desde entonces se levantó con una actualización de sintaxis de anidamiento relajada.

Obtén más información sobre el anidado.

Subred

Navegadores compatibles

• 117
• 117
• 71
• 16

Origen

CSS subgrid te permite crear cuadrículas más complejas con una mejor alineación entre los diseños secundarios. Permite que una cuadrícula que está dentro de otra adopte las filas y columnas de la cuadrícula externa como propias usando subgrid como valor para las filas o columnas de la cuadrícula.

Presentación en pantalla de la subred

Demostración en vivo de la subcuadrícula

El encabezado, el cuerpo y los pies de página se alinean con los tamaños dinámicos de sus elementos del mismo nivel.

La subcuadrícula es especialmente útil para alinear hermanos con los contenidos dinámicos de los demás. Esto libera a los redactores, escritores de UX y traductores de intentar crear un texto del proyecto que “encaje” en el diseño. Con la subcuadrícula, el diseño se puede ajustar para que se adapte al contenido.

Obtén más información sobre la subred.

Tipografía

La tipografía web tuvo algunas actualizaciones clave en 2023. Una mejora progresiva especialmente agradable es la propiedad text-wrap. Esta propiedad habilita el ajuste del diseño tipográfico, compuesto en el navegador sin necesidad de secuencias de comandos adicionales. Despídete de las longitudes de línea incómodas y comienza a usar una tipografía más predecible.

Initial-letter

Navegadores compatibles

• 110
• 110
• x
• 9

Origen

La propiedad initial-letter, que se lanzó a principios de año en Chrome 110, es una función de CSS pequeña pero potente que establece el estilo para la posición de letras iniciales. Puedes posicionar las letras en un estado bajado o elevado. La propiedad acepta dos argumentos: el primero para determinar qué tan abajo se debe colocar la letra en el párrafo correspondiente y el segundo para determinar qué tan arriba se debe colocar la letra. Incluso puedes combinar ambas, como en la siguiente demostración.

Captura de pantalla de la letra inicial

Demostración de letras iniciales

Cambia los valores de initial-letter del seudoelemento ::first-letter para observar cómo cambia.

Más información sobre la letra inicial.

text-wrap: balance and pretty

Como desarrollador, no conoces el tamaño final, el tamaño de la fuente ni siquiera el idioma de un título o un párrafo. Todas las variables necesarias para un tratamiento estético y eficaz del ajuste de texto se encuentran en el navegador. Dado que el navegador conoce todos los factores, como el tamaño de la fuente, el idioma y el área asignada, es un excelente candidato para controlar el diseño de texto avanzado y de alta calidad.

Aquí es donde entran en juego dos nuevas técnicas de unión de texto, una llamada balance y la otra pretty. El valor balance busca crear un bloque de texto armonioso, mientras que pretty busca evitar órfanos y garantizar una correcta división en sílabas. Tradicionalmente, ambas tareas se realizaban de forma manual, y es increíble asignar el trabajo al navegador y hacer que funcione para cualquier idioma traducido.

Presentación en pantalla con ajuste de texto

Demostración en vivo de Text-wrap

En la siguiente demostración, puedes comparar los efectos de balance y pretty en un encabezado y un párrafo arrastrando el control deslizante. Prueba traducir la demostración a otro idioma.

Obtén más información sobre text-wrap: balance.

Color

El 2023 fue el año del color para la plataforma web. Con los nuevos espacios de color y las funciones que habilitan temas de colores dinámicos, nada te impide crear los temas vívidos y exuberantes que se merecen tus usuarios, y también hacerlos personalizables.

Espacios de color HD (nivel de color 4)

Navegadores compatibles

• 111
• 111
• 113
• 15

Origen

Navegadores compatibles

• 111
• 111
• 113
• 15

Origen

Desde el hardware hasta el software, el CSS y las luces intermitentes, las computadoras pueden necesitar mucho trabajo para intentar representar los colores tan bien como los ojos humanos pueden ver. En 2023, tenemos nuevos colores, más colores, nuevos espacios de color, funciones de color y nuevas capacidades.

CSS y los colores ahora pueden hacer lo siguiente: - Verificar si el hardware de la pantalla del usuario es capaz de mostrar colores HDR de amplia gama. - Verifica si el navegador del usuario comprende la sintaxis de colores, como Oklch o Display P3. - Especifica los colores HDR en Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ y mucho más. - Crear gradientes con colores HDR, - Interpolar gradientes en espacios de color alternativos - Combina colores con color-mix(). - Crea variantes de color con sintaxis relativa de colores.

Presentación en pantalla de Color 4

Demostración de Color 4

En la siguiente demostración, puedes comparar los efectos de los efectos de "balancear" y "bonito" en un encabezado y un párrafo arrastrando el control deslizante. Intenta traducir la demostración a otro idioma.

Obtén más información sobre Color 4 y los espacios de color.

Función color-mix

Navegadores compatibles

• 111
• 111
• 113
• 16.2

Origen

Mezclar colores es una tarea clásica y, en 2023, CSS también puede hacerlo. No solo puedes mezclar blanco o negro con un color, sino también transparencia, y hacer todo esto en cualquier espacio de color que elijas. Es, a la vez, una función de color básica y una función de color avanzada.

Presentación en pantalla de color-mix()

Demo de color-mix()

La demostración te permite elegir dos colores con un selector, el espacio de color y cuánto de cada color debe ser dominante en la combinación.

Puedes pensar en color-mix() como un momento en el tiempo desde un gradiente. Donde un gradiente muestra todos los pasos necesarios para pasar del azul al blanco, color-mix() muestra solo un paso. Las cosas se complican cuando empiezas a tener en cuenta los espacios de color y descubres lo diferente que puede ser el espacio de color de mezcla para los resultados.

Obtén más información sobre color-mix().

Sintaxis de colores relativas

La sintaxis de color relativa (RCS) es un método complementario a color-mix() para crear variantes de color. Es un poco más potente que color-mix(), pero también es una estrategia diferente para trabajar con colores. color-mix() puede mezclar el color blanco para aclarar un color, en el que RCS brinda acceso preciso al canal de luminosidad y la capacidad de usar calc() en el canal para reducir o aumentar la luminosidad de forma programática.

Presentación en pantalla de RCS

Demostración en vivo de RCS

Cambia el color y las escenas. Cada uno usa una sintaxis de color relativa para crear variantes a partir del color base.

Los RCS te permiten realizar manipulaciones relativas y absolutas en un color. Un cambio relativo es aquel en el que se toma el valor actual de saturación o luminosidad y se modifica con calc(). Un cambio absoluto es aquel en el que reemplazas un valor de canal por uno completamente nuevo, como establecer la opacidad en un 50%. Esta sintaxis te proporciona herramientas significativas para la asignación de temas, variantes justo a tiempo y mucho más.

Obtén más información sobre la sintaxis de colores relativos.

Diseño responsivo

El diseño responsivo evolucionó en 2023. Este año innovador habilitó nuevas funciones que cambiaron por completo la forma en que creamos experiencias web responsivas y marcó el comienzo de un nuevo modelo de diseño responsivo basado en componentes. La combinación de consultas de contenedor y :has() admite componentes que poseen su diseño responsivo y lógico según el tamaño de su elemento superior, así como la presencia o el estado de cualquiera de sus elementos secundarios. Eso significa que finalmente puedes separar el diseño a nivel de página del diseño a nivel de componente y escribir la lógica una vez para usar tu componente en todas partes.

Tamaño de las consultas de contenedores

Navegadores compatibles

• 105
• 105
• 110
• 16

Origen

En lugar de usar la información de tamaño global del viewport para aplicar estilos CSS, las consultas de contenedores admiten la consulta de un elemento principal dentro de la página. Esto significa que los componentes se pueden aplicar estilos de forma dinámica en varios diseños y en varias vistas. Las consultas de contenedores para el tamaño se volvieron estables en todos los navegadores modernos el Día de San Valentín de este año (14 de febrero).

Para usar esta función, primero configura la contención en el elemento que consultas y, luego, de manera similar a una consulta de medios, usa @container con los parámetros de tamaño para aplicar los estilos. Junto con las consultas de contenedores, obtienes los tamaños de las consultas de contenedores. En la siguiente demostración, se usa el tamaño de la consulta del contenedor cqi (que representa el tamaño del contenedor intercalado) para determinar el tamaño del encabezado de la tarjeta.

Presentaciones en pantalla de @container

Demostración de @container

Obtén más información sobre cómo usar las consultas de contenedores.

Consultas de contenedores de diseño

Navegadores compatibles

• 111
• 111
• x
• 18

Origen

Las consultas de estilo se realizaron con una implementación parcial en Chrome 111. Actualmente, con las consultas de estilo, puedes consultar el valor de las propiedades personalizadas en un elemento superior cuando usas @container style(). Por ejemplo, consulta si existe un valor de propiedad personalizada o si está establecido en un valor determinado, como @container style(--rain: true).

Captura de pantalla de la consulta de diseño

Demostración de la consulta de estilo

Cambia el color y las escenas. Cada uno usa la sintaxis de color relativa para crear variantes a partir del color base.

Si bien esto suena similar al uso de nombres de clases en CSS, las consultas de diseño tienen algunas ventajas. La primera es que, con las consultas de estilo, puedes actualizar el valor en CSS según sea necesario para los pseudoestados. Además, en versiones futuras de la implementación, podrás consultar rangos de valores para determinar el estilo aplicado, como style(60 <= --weather <= 70), y el estilo basado en pares propiedad-valor, como style(font-style: italic).

Obtén más información para usar las consultas de estilo.

Selector:has()

Navegadores compatibles

• 105
• 105
• 121
• 15.4

Origen

Durante casi 20 años, los desarrolladores pidieron un "selector superior" en CSS. Con el selector :has() que se incluyó en Chrome 105, ahora es posible. Por ejemplo, usar .card:has(img.hero) seleccionará los elementos .card que tengan una imagen hero como elemento secundario.

Captura de pantalla de la demostración de :has()

Demostración en vivo de :has()

Demostración de :has() de CSS: Tarjeta sin imagen o con imagen

Como :has() acepta una lista de selectores relativos como argumento, puedes seleccionar mucho más que el elemento superior. Con varios combinadores de CSS, es posible no solo subir en el árbol DOM, sino también hacer selecciones laterales. Por ejemplo, li:has(+ li:hover) seleccionará el elemento <li> que precede al elemento <li> sobre el que se coloca actualmente.

:has() Presentación en pantalla

Demo de :has()

Demo de :has() de CSS: Dock

Obtén más información sobre el selector :has() de CSS.

Actualiza una consulta de medios

Navegadores compatibles

• 113
• 113
• 102
• 17

Origen

La consulta de medios update te brinda una forma de adaptar la IU a la frecuencia de actualización de un dispositivo. La función puede informar un valor de fast, slow o none, que se relaciona con las capacidades de los diferentes dispositivos.

Es probable que la mayoría de los dispositivos para los que diseñas tengan una frecuencia de actualización rápida. Esto incluye computadoras de escritorio y la mayoría de los dispositivos móviles. Los dispositivos electrónicos de lectura y los dispositivos como los sistemas de pago de baja energía pueden tener una frecuencia de actualización lenta. Saber que el dispositivo no puede procesar animaciones ni actualizaciones frecuentes, permite ahorrar batería o actualizaciones de vista defectuosas.

Actualiza Screencast

Actualizar demostración

Simula (elige una opción de radio) un valor de velocidad de actualización y observa cómo afecta al pato.

Obtén más información sobre @media (actualización).

Consulta de contenido multimedia de secuencias de comandos

Navegadores compatibles

• 120
• 120
• 113
• 17

Origen

La consulta de medios de secuencias de comandos se puede usar para verificar si JavaScript está disponible o no. Esto es muy útil para la mejora progresiva. Antes de esta consulta de contenido multimedia, una estrategia para detectar si JavaScript estaba disponible era colocar una clase nojs en el HTML y quitarla con JavaScript. Estas secuencias de comandos se pueden quitar, ya que CSS ahora tiene una forma de detectar JavaScript y ajustarse según corresponda.

Aprende a habilitar e inhabilitar JavaScript en una página para realizar pruebas con las Herramientas para desarrolladores de Chrome aquí.

Presentación en pantalla de secuencias de comandos

Demostración de secuencias de comandos

Considera un cambio de tema en un sitio web. La consulta de medios de secuencias de comandos puede ayudar a que el cambio funcione con la preferencia del sistema, ya que no hay JavaScript disponible. O bien, considera un componente de interruptor: si JavaScript está disponible, el interruptor se puede deslizar con un gesto en lugar de solo activarlo o desactivarlo. Hay muchas oportunidades geniales para actualizar la UX si la escritura de secuencias de comandos está disponible y, al mismo tiempo, proporciona una experiencia básica significativa si esta se encuentra inhabilitada.

Obtén más información sobre las secuencias de comandos.

Consulta de medios de transparencia reducida

Navegadores compatibles

• 118
• 118
• 
• x

Origen

Las interfaces no opacas pueden causar dolores de cabeza o ser un problema visual para varios tipos de deficiencias visuales. Por este motivo, Windows, macOS y iOS tienen preferencias del sistema que pueden reducir o quitar la transparencia de la IU. Esta consulta de contenido multimedia para prefers-reduced-transparency se ajusta bien a las otras consultas de contenido multimedia de preferencia, lo que te permite ser creativo y, al mismo tiempo, realizar ajustes para los usuarios.

Presentación en pantalla con transparencia reducida

Demostración de transparencia reducida

En algunos casos, puedes proporcionar un diseño alternativo que no tenga contenido superpuesto. En otros casos, la opacidad de un color se puede ajustar para que sea opaco o casi opaco. En la siguiente entrada de blog, encontrarás demostraciones más inspiradoras que se adaptan a las preferencias del usuario. Échales un vistazo si te interesa saber en qué momentos esta consulta de contenido multimedia es valiosa.

Obtén más información sobre @media (prefers-reduced-transparency).

Interacción

La interacción es un elemento fundamental de las experiencias digitales. Ayuda a los usuarios a obtener comentarios sobre qué hicieron clic y dónde se encuentran en un espacio virtual. Este año, se lanzaron muchas funciones interesantes que facilitaron la composición y la implementación de las interacciones, lo que permitió recorridos del usuario fluidos y una experiencia web más refinada.

Ver transiciones

Navegadores compatibles

• 111
• 111
• x
• 18

Origen

Las transiciones de vista tienen un gran impacto en la experiencia del usuario de una página. Con la API de transiciones de vistas, puedes crear transiciones visuales entre dos estados de página en tu aplicación de una sola página. Estas transiciones pueden ser de página completa o más pequeñas en una página, como agregar o quitar un elemento nuevo a una lista.

En el centro de la API de View Transitions, se encuentra la función document.startViewTranstion. Pasa una función que actualice el DOM al estado nuevo, y la API se encargará de todo por ti. Para ello, toma una instantánea del antes y el después, y luego realiza la transición entre ambas. Con CSS, puedes controlar lo que se captura y, de manera opcional, personalizar la animación de estas instantáneas.

Presentación en pantalla de VT

Demostración de VT

Ver demostración de transiciones

La API de View Transitions para aplicaciones de una sola página se incluyó en Chrome 111. Obtén más información sobre las transiciones de vistas.

Función de suavización lineal

Navegadores compatibles

• 113
• 113
• 112
• 17.2

No te dejes engañar por el nombre de esta función. La función linear() (no debe confundirse con el operador linear) te permite crear funciones de suavización complejas de forma sencilla, con el inconveniente de perder algo de precisión.

Antes de linear(), que se envió en Chrome 113, era imposible crear efectos de rebote o resorte en CSS. Gracias a linear(), es posible aproximar estas suavizaciones simplificándolas en una serie de puntos y, luego, interpolándolas de forma lineal entre estos puntos.

La curva de rebote original en azul se simplifica con un conjunto de puntos clave que se muestran en verde. La función linear() usa estos puntos e interpola de forma lineal entre ellos.

Presentaciones en pantalla con suavización lineal

Demostración de suavización lineal

Demostración de linear() de CSS.

Obtén más información sobre linear(). Para crear curvas linear(), usa el generador de suavización lineal.

Desplazar hasta el final

Navegadores compatibles

• 114
• 114
• 109
• x

Origen

Muchas interfaces incluyen interacciones de desplazamiento y, a veces, la interfaz necesita sincronizar información relevante para la posición de desplazamiento actual o recuperar datos según el estado actual. Antes del evento scrollend, debías usar un método de tiempo de espera inexacto que podía activarse mientras el dedo del usuario aún estaba en la pantalla. Con el evento scrollend, tienes un evento de desplazamiento con el tiempo perfecto que entiende si un usuario aún está o no en medio de un gesto.

Presentación en pantalla con desplazamiento

Demostración de Scrollend

Esto era importante para que el navegador lo tuviera, ya que JavaScript no puede hacer un seguimiento de la presencia de los dedos en la pantalla durante un desplazamiento, la información simplemente no está disponible. Los fragmentos de código de intento de fin de desplazamiento incorrectos ahora se pueden borrar y reemplazar por un evento de alta precisión propiedad del navegador.

Obtén más información sobre scrollend.

Animaciones impulsadas por el desplazamiento

Navegadores compatibles

• 115
• 115
• 
• x

Origen

Las animaciones impulsadas por el desplazamiento son una función emocionante disponible a partir de la versión 115 de Chrome. Estos te permiten tomar una animación de CSS existente o una animación creada con la API de Web Animations y vincularla al desplazamiento de un control de desplazamiento. A medida que te desplazas hacia arriba y abajo, o hacia la izquierda y la derecha en un desplazamiento horizontal, la animación vinculada se arrastra hacia delante y hacia atrás en respuesta directa.

Con un ScrollTimeline, puedes realizar un seguimiento del progreso general de un desplazador, como se demuestra en la siguiente demostración. A medida que te desplazas hasta el final de la página, el texto se revela carácter por carácter.

Presentación en pantalla de SDA

Demostración de SDA

Demostración de animaciones basadas en el desplazamiento de CSS: línea de tiempo de desplazamiento

Con un ViewTimeline, puedes hacer un seguimiento de un elemento a medida que cruza el ScrollView. Esto funciona de manera similar a la forma en que IntersectionObserver realiza un seguimiento de un elemento. En la siguiente demostración, cada imagen se revela desde el momento en que entra en el desplazamiento hasta que está en el centro.

Demostración de SDA en pantalla

Demostración en vivo de SDA

Demostración de animaciones basadas en el desplazamiento de CSS: vista de cronograma

Dado que las animaciones basadas en el desplazamiento funcionan con animaciones CSS y la API de Web Animations, puedes beneficiarte de todas las ventajas que ofrecen estas APIs. Esto incluye la capacidad de ejecutar estas animaciones desde el subproceso principal. 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é más se puede pedir?

Para obtener más información sobre las animaciones impulsadas por el desplazamiento, consulta este artículo con todos los detalles o visita scroll-driven-animations.style, que incluye muchas demostraciones.

Archivo adjunto de cronograma diferido

Navegadores compatibles

• 116
• 116
• x
• x

Origen

Cuando se aplica una animación basada en desplazamientos a través de CSS, el mecanismo de búsqueda para encontrar el desplazador controlador siempre sube por el árbol del DOM y se limita solo a los elementos principales de desplazamiento. Sin embargo, con frecuencia, el elemento que se debe animar no es un elemento secundario de la barra de desplazamiento, sino un elemento ubicado en un subárbol completamente diferente.

Para permitir que el elemento animado encuentre un cronograma de desplazamiento con nombre de un elemento que no sea un ancestro, usa la propiedad timeline-scope en un elemento superior compartido. Esto permite que se adjunte el scroll-timeline o view-timeline definido con ese nombre, lo que le da un alcance más amplio. Con esto, cualquier elemento secundario de ese elemento superior compartido puede usar la línea de tiempo con ese nombre.

Con timeline-scope declarado en el elemento superior compartido, el elemento que lo usa como su animation-timeline puede encontrar el scroll-timeline declarado en el elemento de desplazamiento.

Presentación en pantalla de demostración

Demostración en directo

Demostración de animaciones basadas en el desplazamiento de CSS: adjunto de cronograma diferido

Obtén más información sobre timeline-scope.

Animaciones de propiedades discretas

Otra función nueva en 2023 es la capacidad de animar animaciones discretas, como animar desde y hacia display: none. A partir de Chrome 116, puedes usar display y content-visibility en las reglas de fotogramas clave. También puedes realizar la transición de cualquier propiedad discreta en el punto del 50% en lugar del 0%. Esto se logra con la propiedad transition-behavior usando la palabra clave allow-discrete o en la propiedad transition como abreviatura.

Animación discreta Presentación en pantalla

Discreto Áni. Demostración

Obtén más información sobre las transiciones de animaciones discretas.

@starting-style

Navegadores compatibles

• 117
• 117
• 129
• 17.5

Origen

La regla de CSS @starting-style se basa en nuevas capacidades web para realizar animaciones desde y hacia display: none. Esta regla proporciona una forma de asignarle a un elemento un estilo "antes de abrirse" que el navegador puede buscar antes de que el elemento se abra en la página. Esto es muy útil para las animaciones de entrada y para animar elementos como un popover o un diálogo. También puede ser útil cada vez que estás creando un elemento y quieres darle la capacidad de animarlo. Observa el siguiente ejemplo, que anima un atributo popover (consulta la siguiente sección) en la vista y en la capa superior sin problemas desde fuera del viewport.

Presentación en pantalla con estilo de @starting

Demo de @starting-style

Obtén más información sobre @starting-style y otras animaciones de entrada.

Superposición

Navegadores compatibles

• 117
• 117
• x
• x

Origen

La nueva propiedad overlay del CSS se puede agregar a tu transición para permitir que los elementos con estilos de capa superior, como popover y dialog, se animen fuera de la capa superior sin problemas. Si no aplicas la transición de superposición, el elemento volverá a recortarse, transformarse y cubrirse de inmediato, y no verás la transición. Del mismo modo, overlay permite que ::backdrop se anime sin problemas cuando se agrega a un elemento de capa superior.

Presentación en pantalla superpuesta

Demostración en vivo de superposición

Obtén más información sobre las superposiciones y otras animaciones de salida.

Componentes

El 2023 fue un gran año para la intersección de los componentes de estilo y HTML, con el lanzamiento de popover y mucho trabajo en el posicionamiento de anclas y el futuro de los menús desplegables de diseño. Estos componentes facilitan la compilación de patrones comunes de la IU sin necesidad de depender de bibliotecas adicionales ni de compilar tus propios sistemas de administración de estados desde cero cada vez.

Ventana emergente

Navegadores compatibles

• 114
• 114
• 125
• 17

Origen

La API de Popover te ayuda a crear elementos que se superponen al resto de la página. Estos pueden incluir menús, selección y cuadros de herramientas. Para crear un popover simple, agrega el atributo popover y un id al elemento que aparece y conecta su atributo id a un botón de invocación con popovertarget="my-popover". La API de Popover admite lo siguiente:

• Promoción a la capa superior. Los paneles emergentes aparecerán en una capa independiente sobre el resto de la página, por lo que no tendrás que jugar con el índice z.
• Función de descarte de luz Si haces clic fuera del área de la ventana emergente, se cerrará la ventana emergente y se volverá a enfocar.
• Administración predeterminada del enfoque. Al abrir la ventana emergente, la pestaña siguiente se detiene dentro de ella.
• Vinculaciones de teclas accesibles. Si presionas la tecla esc o la activas dos veces, se cerrará el menú flotante y se restablecerá el enfoque.
• Vinculaciones de componentes accesibles. Conectar un elemento de popover a un activador de popover semánticamente

Presentación en pantalla de la notificación emergente

Demostración en vivo emergente

Reglas horizontales en la selección

Otro pequeño cambio en el código HTML que se implementó en Chrome y Safari este año es la capacidad de agregar elementos de línea horizontal (etiquetas <hr>) a elementos <select> para ayudar a dividir visualmente el contenido. Anteriormente, no se renderizaba una etiqueta <hr> en una selección. Sin embargo, este año, tanto Safari como Chrome admiten esta función, lo que permite una mejor separación del contenido dentro de los elementos <select>.

Seleccionar captura de pantalla

Selecciona Demostración en vivo

Obtén más información para usar hr en select.

:Pseudoclases válidas y no válidas para el usuario

Navegadores compatibles

• 119
• 119
• 88
• 16.5

Origen

:user-valid y :user-invalid son estables en todos los navegadores este año y se comportan de manera similar a las pseudoclases :valid y :invalid, pero coinciden con un control de formulario solo después de que un usuario interactúa de forma significativa con la entrada. Un control de formulario que es obligatorio y está vacío coincidirá con :invalid, incluso si un usuario no comenzó a interactuar con la página. El mismo control no coincidirá con :user-invalid hasta que el usuario cambie la entrada y la deje en un estado no válido.

Con estos nuevos selectores, ya no es necesario escribir código con estado para realizar un seguimiento de las entradas que cambió un usuario.

:user-* Presentaciones en pantalla

Demostración en vivo de :user-*

Obtén más información para usar los pseudelementos de validación de formularios user-*.

Acordeón exclusivo

Navegadores compatibles

• 120
• 120
• 130
• 17.2

Un patrón común de la IU en la Web es un componente de acordeón. Para implementar este patrón, combinas algunos elementos <details>, a menudo, los agrupas visualmente para indicar que pertenecen juntos.

La novedad de Chrome 120 es la compatibilidad con el atributo name en los elementos <details>. Cuando se usa este atributo, varios elementos <details> que tienen el mismo valor name forman un grupo semántico. Solo se puede abrir un elemento del grupo a la vez: cuando abras uno de los elementos <details> del grupo, el que estaba abierto anteriormente se cerrará automáticamente. Este tipo de acordeón se denomina acordeón exclusivo.

Demostración exclusiva del acordeón

Los elementos <details> que forman parte de un acordeón exclusivo no necesariamente deben ser hermanos. Pueden estar dispersos en el documento.

Conclusión

El CSS ha tenido un renacimiento en los últimos años, en especial durante 2023. Si es la primera vez que usas CSS o solo quieres hacer un repaso de los conceptos básicos, consulta nuestro curso gratuito Learn CSS junto con los otros cursos gratuitos que se ofrecen en web.dev.

Te deseamos una feliz temporada de festividades y esperamos que puedas incorporar algunas de estas nuevas y brillantes funciones de IU y CSS a tu trabajo pronto.

⇾ El equipo de DevRel de la IU de Chrome

Una Kravets

Bramus

Adam Argyle