Ajuste de CSS: 2023
Ir al contenido:
- Bases de la arquitectura
- Funciones trigonométricas
- Selección de enésima * compleja
- Alcance
- Anidación
- Diseño responsivo
- Consultas de contenedores
- Consultas sobre el estilo
- :has selector
- Cómo actualizar la consulta de medios
- Consulta de medios de secuencias de comandos
- Transparencia de consulta de medios
¡Increíble! El 2023 fue un gran año para los CSS.
Desde #Interop2023 hasta muchos nuevos aterrizajes en el espacio de IU y CSS, que permiten a los desarrolladores de capacidades que antes consideraban imposibles en la plataforma web. Ahora, todos los navegadores modernos admiten consultas de contenedores, subcuadrícula, el selector :has() y una gran cantidad de nuevos espacios de color y funciones. En Chrome, ofrecemos animaciones basadas en desplazamientos solo para CSS y animaciones sin interrupciones entre vistas web con transiciones de vista. Por último, se lanzaron muchas primitivas nuevas que brindan mejores experiencias para los desarrolladores, como la anidación de CSS y los estilos con alcance.
¡Qué año ha sido! Así que queremos terminar este año importante celebrando y reconociendo el arduo trabajo realizado por los desarrolladores de navegadores y la comunidad web que hicieron que todo esto fuera posible.
Bases de la arquitectura
Comencemos con las actualizaciones del lenguaje y las capacidades principales de CSS. Estas son funciones que son fundamentales para la forma en que creas y organizas estilos, y aportan gran poder a los desarrolladores.
Funciones trigonométricas
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 fines de animación y diseño. Por ejemplo, ahora es mucho más fácil diseñar elementos en un círculo alrededor de un centro elegido.
Obtén más información sobre las funciones trigonométricas en CSS.
Selección de enésima * compleja
Navegadores compatibles
- 111
- 111
- 113
- 9
Con el selector de seudoclase :nth-child(), es posible seleccionar elementos en el DOM según su índice. Con la microsintaxis An+B, obtienes un control detallado sobre los elementos que quieres seleccionar.
De forma predeterminada, los pseudos :nth-*() tienen en cuenta todos los elementos secundarios. A partir de Chrome 111, de manera opcional, puedes pasar una lista de selectores 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 únicamente a las muñecas pequeñas prefiltrando con of .small. Usa los menús desplegables para cambiar de forma dinámica el selector utilizado.
Obtén más información sobre las selecciones complejas de nth-*.
Alcance
Navegadores compatibles
- 118
- 118
- x
- 17,4
Chrome 118 agregó compatibilidad con @scope, una regla AT que te permite definir el alcance de la coincidencia de selectores con un subárbol específico del documento. Con este tipo de diseño, puedes seleccionar elementos muy específicos sin tener que escribir selectores demasiado específicos ni acoplarlos 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 ubicadas dentro de un bloque de alcance solo se orientarán a elementos dentro del subárbol recortado. Por ejemplo, la siguiente regla de estilo con alcance solo se orienta a los elementos <img> que se ubican 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 permiso
Demostración en vivo de Scope
@scope de CSSObté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 precedentes y cómo @scope afecta la cascada.
Anidación
Antes de anidar, cada selector debía declararse explícitamente, por separado uno del otro. Esto conduce a repeticiones, acciones masivas de hojas de estilo y una experiencia de creación dispersa. Ahora, los selectores se pueden continuar con reglas de estilo relacionadas agrupadas.
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 */
}
Presentación en pantalla del período de prueba
Demostración en vivo del período de prueba
La anidación 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 que se lanzó inicialmente con una limitación que requería el uso de & en varios lugares, pero desde entonces se quitó con una actualización de sintaxis relajada de anidación.
Obtén más información sobre la anidación.
Subcuadrícula
subgrid de CSS 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 cuadrícula adopte las filas y columnas de la cuadrícula externa como propias, ya que usa subgrid como valor para las filas o columnas de la cuadrícula.
Presentación en pantalla sobre la subcuadrícula
Demostración en vivo de Subgrid
La subcuadrícula es especialmente útil para alinear elementos del mismo nivel con el contenido dinámico del otro. Esto libera a los redactores, escritores de UX y traductores de tener que tratar de crear textos de proyectos que se ajusten al diseño. Con la subcuadrícula, se puede ajustar el diseño para que se adapte al contenido.
Obtén más información sobre la subcuadrícula.
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, redactado en el navegador sin necesidad de escribir secuencias de comandos adicionales. Despídete de las longitudes de líneas incómodas y comienza a usar la tipografía más predecible.
Letra inicial
A principios de año en Chrome 110, la propiedad initial-letter es una función de CSS pequeña pero potente que establece el estilo de la posición de las letras iniciales. Puedes colocar letras en un estado soltado o elevado. La propiedad acepta dos argumentos: el primero indica en qué medida debe colocarse la letra en el párrafo correspondiente y, en segundo lugar, cuánto debe elevar la letra que está por encima de ella. Incluso, puedes hacer una combinación de ambas, como en la siguiente demostración.
Captura de pantalla de las letras iniciales
Demostración de las letras iniciales
initial-letter del seudoelemento ::first-letter para observar cómo cambia.Obtén más información sobre la letra inicial.
text-wrap: equilibrio y atractivo
Como desarrollador, no conoces el tamaño final, el tamaño de fuente o incluso el idioma de un título o párrafo. Todas las variables necesarias para un tratamiento eficaz y estético 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, lo convierte en un gran candidato para manejar diseños de texto avanzados y de alta calidad.
Aquí es donde entran en juego dos nuevas técnicas de ajuste de texto, una llamada balance y la otra pretty. El valor balance busca crear un bloque de texto armonioso, mientras que pretty busca evitar los huérfanos y garantizar una separación silábica saludable. Ambas tareas se realizan tradicionalmente de forma manual, y es increíble darle el trabajo al navegador y que funcione para cualquier idioma traducido.
Presentación en pantalla de ajuste de texto
Demostración en vivo de unión de texto
balance y pretty en un encabezado y un párrafo. Intenta traducir la demostración a otro idioma.Obtén más información sobre ajuste de texto: saldo.
Color
El 2023 fue el año de color para la plataforma web. Con los nuevos espacios de color y funciones que permiten los temas de color dinámicos, nada te impedirá crear los temas vívidos y exuberantes que tus usuarios merecen, ni personalizarlos.
Espacios de color HD (nivel de color 4)
Desde el hardware hasta el software, desde el CSS hasta las luces intermitentes, las computadoras pueden tardar mucho trabajo en intentar representar colores tan buenos como nuestros ojos humanos pueden ver. En el 2023, tenemos más colores, más colores, nuevos espacios de color, funciones de color y nuevas capacidades.
Ahora, CSS y color pueden hacer lo siguiente:
- Comprobar si el hardware de pantalla del usuario es compatible con una amplia gama de colores HDR.
- Comprueba si el navegador del usuario comprende la sintaxis de color, por ejemplo, Oklch o Display P3.
- Especifica los colores HDR en Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ y muchos más.
- Crear gradientes con colores HDR.
- Interpolar gradientes en espacios de color alternativos.
- Combina colores con color-mix().
- Crear variantes de color con sintaxis de color relativa.
Presentación en pantalla de Color 4
Demostración de Color 4
Obtén más información sobre el color 4 y los espacios de color.
función color-mix
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 la transparencia, y hacer todo esto en cualquier espacio de color que elijas. Al mismo tiempo, es una función de color básica y una función de color avanzada.
Presentación en pantalla de color-mix()
Demostración de color-mix()
Puedes pensar en color-mix() como un momento en el tiempo a partir de un gradiente. Donde un gradiente muestra todos los pasos necesarios para pasar del azul al blanco, color-mix() muestra solo un paso. Las cosas avanzan una vez que comienzas a tener en cuenta los espacios de color y aprendes lo diferente que puede ser el espacio de color de mezcla en los resultados.
Obtén más información sobre color-mix().
Sintaxis de colores relativos
La sintaxis de color relativo (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, y RCS brinda un acceso preciso al canal de brillo y la capacidad de usar calc() en el canal para reducir o aumentar la luminosidad de manera programática.
Presentación en pantalla de RCS
Demostración en vivo de RCS
RCS te permite realizar manipulaciones relativas y absolutas a un color. Un cambio relativo consiste en tomar el valor actual de saturación o luminosidad y modificarlo con calc(). Un cambio absoluto es aquel en el que reemplazas un valor de canal por uno completamente nuevo, como configurar la opacidad en un 50%. Esta sintaxis te proporciona herramientas significativas para la aplicación de temas, solo en variantes de 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 revolucionario nos permitió crear nuevas funciones que cambiaron por completo la forma en que creamos experiencias web adaptables, y dio comienzo a un nuevo modelo de diseño responsivo basado en componentes. La combinación de consultas de contenedor y :has() admite componentes que poseen su estilo responsivo y lógico en función del tamaño de su elemento superior, así como de la presencia o el estado de cualquiera de sus elementos secundarios. ¡Eso significa que finalmente puedes separar el diseño de nivel de página del diseño de nivel de componente y escribir la lógica una vez para usar el componente en todas partes!
Tamaño de las consultas de contenedor
En lugar de usar la información del tamaño global del viewport para aplicar estilos de CSS, las consultas de contenedores admiten las consultas de un elemento superior dentro de la página. Esto significa que es posible aplicar ajustes de estilo a los componentes de manera dinámica en varios diseños y vistas. Las consultas de contenedores para el tamaño se estabilizaron 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 estás consultando 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 tamaños de consulta de contenedor. En la siguiente demostración, se usa el tamaño de consulta del contenedor cqi (que representa el tamaño del contenedor intercalado) para ajustar el tamaño del encabezado de la tarjeta.
Presentación en pantalla de @container
Demostración de @container
Obtén más información sobre cómo usar las consultas de contenedores.
Cómo aplicar diseño a consultas de contenedor
Las consultas de estilo se realizaron con 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 se configuró en un valor determinado, como @container style(--rain: true).
Captura de pantalla de la consulta sobre el diseño
Demostración de consulta de diseño
Si bien esto suena similar al uso de nombres de clase en CSS, las consultas de estilo tienen algunas ventajas. La primera es que, con las consultas de estilo, puedes actualizar el valor en CSS, según sea necesario, para los seudoestados. 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 diseño.
Selector:has()
Durante casi 20 años, los desarrolladores solicitaron un "selector superior" en CSS. Con el selector :has() que se envió en Chrome 105, esto ahora es posible. Por ejemplo, si usas .card:has(img.hero), se seleccionarán los elementos .card que tienen una hero image como elemento secundario.
Captura de pantalla de la demostración de :has()
Demostración en vivo de :has()
:has() de CSS: tarjeta sin o con imagenDebido a que :has() acepta una lista de selectores relativo como argumento, puedes seleccionar mucho más que el elemento superior. Al usar varias combinaciones de CSS, no solo es posible subir por el árbol del DOM, sino también realizar selecciones laterales. Por ejemplo, li:has(+ li:hover) seleccionará el elemento <li> que precede al elemento <li> que se coloca el cursor sobre este.
Presentación en pantalla :has()
Demostración de :has()
:has() de CSS: conectorObtén más información sobre el selector :has() de CSS.
Cómo actualizar la consulta de medios
La consulta de medios update te brinda una manera 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 relacione con las capacidades de 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 y de lectura, como los sistemas de pago de bajo consumo, pueden tener una frecuencia de actualización lenta. Saber que el dispositivo no puede procesar animaciones ni actualizaciones frecuentes significa que puedes ahorrar el uso de batería o ver actualizaciones defectuosas.
Actualizar Screencast
Actualizar demostración
Obtén más información sobre @media (actualizar).
Consulta de medios de secuencias de comandos
La consulta de medios de secuencias de comandos se puede usar para verificar si JavaScript está disponible o no. Esto es muy adecuado para la mejora progresiva. Antes de esta consulta de medios, una estrategia para detectar si JavaScript estaba disponible era colocar una clase nojs en el código HTML y quitarla con JavaScript. Estas secuencias de comandos se pueden quitar, ya que CSS ahora tiene una forma de detectar JavaScript y ajustarse en consecuencia.
Obtenga información sobre cómo habilitar o inhabilitar JavaScript en una página para realizar pruebas mediante las Herramientas para desarrolladores de Chrome aquí.
Presentación en pantalla de secuencias de comandos
Demostración de escritura de secuencias de comandos
Considera un cambio de tema en un sitio web, la consulta de medios de la secuencia de comandos puede ayudar a hacer que el cambio funcione en función de la preferencia del sistema, ya que no hay JavaScript disponible. O considera un componente de interruptor: si JavaScript está disponible, el interruptor se puede deslizar con un gesto en lugar de solo activar o desactivar la opción. Hay muchas oportunidades excelentes para mejorar la UX si la secuencia de comandos está disponible y, al mismo tiempo, se proporciona una experiencia de base significativa si la secuencia de comandos está inhabilitada.
Obtén más información sobre la secuencia de comandos.
Consulta de medios de transparencia reducida
Las interfaces no opacas pueden causar dolores de cabeza o ser una lucha visual para varios tipos de deficiencias visuales. Es por eso que Windows, macOS y iOS tienen preferencias del sistema que pueden reducir o quitar la transparencia de la IU. Esta consulta de medios para prefers-reduced-transparency se adapta bien a las otras consultas de medios de preferencia, lo que te permite ser creativo y, al mismo tiempo, ajustarse para los usuarios.
Presentación en pantalla de Transparencia reducida
Demostración de transparencia reducida
En algunos casos, puedes proporcionar un diseño alternativo que no tenga contenido que se superponga a otro contenido. En otros casos, la opacidad de un color se puede ajustar para que sea opaca o casi opaca. La siguiente entrada de blog tiene demostraciones más inspiradoras que se adaptan a las preferencias de los usuarios. Compruébalas si sientes curiosidad por los momentos en que esta consulta de medios es valiosa.
Obtén más información sobre @media (prefers-reduced-transparency).
Interacción
La interacción es una pieza fundamental de las experiencias digitales. Ayuda a los usuarios a obtener comentarios sobre lo que hicieron clic y dónde se encuentran en un espacio virtual. Este año, se lanzaron muchas funciones interesantes que facilitaron la redacción y la implementación de las interacciones, lo que permitió recorridos del usuario fluidos y una experiencia web mejor.
Cómo ver transiciones
Las transiciones de vistas tienen un gran impacto en la experiencia del usuario de una página. Con la API de View Transitions, puedes crear transiciones visuales entre dos estados de página de tu aplicación de una sola página. Estas pueden ser transiciones de página completa o elementos más pequeños en una página, como agregar o quitar un nuevo elemento de una lista.
En el núcleo de la API de View Transitions se encuentra la función document.startViewTranstion. Pasa una función que actualice el DOM al nuevo estado, y la API se encargará de todo. Para ello, se toma una instantánea del antes y el después y, luego, se hace la transición entre ambas. Con CSS, puedes controlar lo que se captura y, de manera opcional, personalizar cómo se deben animar estas instantáneas.
Presentación en pantalla de VT
Demostración de VT
La API de View Transitions para aplicaciones de una sola página incluida en Chrome 111. Obtén más información sobre las transiciones de vistas.
Función de aceleración lineal
Navegadores compatibles
- 113
- 113
- 112
- 17.2
No dejes que el nombre de esta función te engañe. La función linear() (que no se debe confundir con la palabra clave linear) te permite crear funciones de aceleración complejas de una manera sencilla, con el compromiso de perder algo de precisión.
Antes del linear(), que se envió en Chrome 113, era imposible crear efectos de rebote o de resorte en CSS. Gracias a linear(), es posible aproximar estas aceleraciones simplándolas a una serie de puntos y, luego, interpolando de forma lineal entre estos puntos.
linear() usa estos puntos y los interpola de forma lineal.Presentación en pantalla de aceleración lineal
Demostración de la aceleración lineal
linear() de CSS.Obtén más información sobre linear(). Para crear curvas linear(), usa el generador de aceleración lineal.
Objetivo de desplazamiento
Muchas interfaces incluyen interacciones de desplazamiento y, a veces, necesitan sincronizar información relevante para la posición de desplazamiento actual o recuperar datos según el estado actual. Antes del evento scrollend, tenías que usar un método de tiempo de espera incorrecto 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 un tiempo perfecto que entiende si un usuario aún está en medio de un gesto o no.
Presentación en pantalla de Scrollend
Demostración de Scrollend
Esto era importante para que el navegador fuera propietario, ya que JavaScript no puede rastrear la presencia de un dedo en la pantalla durante un desplazamiento, la información simplemente no está disponible. Ahora se pueden borrar fragmentos de código de intento de desplazamiento inexacto y se pueden reemplazar por un evento de alta precisión propio del navegador.
Obtén más información sobre scrollend.
Animaciones basadas en desplazamientos
Las animaciones basadas en desplazamientos son una función interesante disponible a partir de Chrome 115. Estas te permiten tomar una animación de CSS existente o una animación compilada con la API de Web Animations y combinarla con el desplazamiento de una barra de desplazamiento. A medida que te desplaces hacia arriba y hacia abajo, o hacia la izquierda y la derecha en una barra de desplazamiento horizontal, la animación vinculada se moverá hacia adelante y hacia atrás en respuesta directa.
Con ScrollTimeline, puedes realizar un seguimiento del progreso general de una barra de desplazamiento, 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
Con ViewTimeline, puedes realizar el seguimiento de un elemento a medida que cruza el puerto de desplazamiento. Esto funciona de manera similar a la forma en que IntersectionObserver hace el seguimiento de un elemento. En la siguiente demostración, cada imagen se revela desde el momento en que entra en el puerto de desplazamiento hasta que está en el centro.
Presentación en pantalla de demostración de SDA
Demostración en vivo de SDA
Debido a que las animaciones basadas en desplazamientos funcionan con animaciones de CSS y la API de Web Animations, puedes beneficiarte de todas las ventajas que brindan estas APIs. Esto incluye la capacidad de que estas animaciones se ejecuten fuera del subproceso principal. Ahora puedes tener animaciones fluidas y fluidas, impulsadas por desplazamiento, que se ejecuten desde el subproceso principal con solo unas pocas líneas de código adicional. ¿Qué no debería gustarte?
Para obtener más información sobre las animaciones basadas en desplazamientos, consulta este artículo que incluye todos los detalles o visita desplazamiento-driven-animations.style, que incluye muchas demostraciones.
Archivo adjunto diferido de la línea de tiempo
Cuando se aplica una animación basada en desplazamientos a través de CSS, el mecanismo de búsqueda para encontrar la barra de desplazamiento controlador siempre recorre el árbol del DOM y solo lo limita al desplazamiento principal. No obstante, 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 no principal, usa la propiedad timeline-scope en un elemento superior compartido. De esta manera, se permite que se adjunten los elementos scroll-timeline o view-timeline definidos con ese nombre, lo que le brinda un alcance más amplio. De esta forma, cualquier elemento secundario del elemento superior compartido puede usar la línea de tiempo con ese nombre.
timeline-scope declarado en el elemento superior compartido, el elemento que lo usa como su animation-timelinescroll-timeline declarado en la barra de desplazamiento
Presentación en pantalla de demostración
Demostración en directo
Obtén más información sobre timeline-scope.
Animaciones de propiedades discretas
Otra función nueva del 2023 es la de animar animaciones discretas, como animaciones 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 punto del 0%. Esto se logra con la propiedad transition-behavior usando la palabra clave allow-discrete o en la propiedad transition como una abreviatura.
Ánimo discreto. Presentación en pantalla
Ánimo discreto. Demostración
Obtén más información sobre la transición de animaciones discretas.
@estilo-de-inicio
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 darle a un elemento un estilo "antes de abrir" que el navegador puede buscar antes de que el elemento se abra en la página. Esto es muy útil para animaciones de entrada y para animar elementos como una ventana emergente o un diálogo. También puede ser útil en cualquier momento en el que estés creando un elemento y quieras darle la capacidad de animarse. Toma el siguiente ejemplo, en el que se anima, de forma fluida, un atributo popover (consulta la siguiente sección) a la vista y a la capa superior desde fuera del viewport.
Presentación en pantalla al estilo @starting
Demostración de @starting-style
Obtén más información sobre @starting-style y otras animaciones de entrada.
Superposición
Puedes agregar la nueva propiedad overlay de CSS a tu transición para permitir que los elementos con estilos de la capa superior, como popover y dialog, se animen de manera fluida fuera de la capa superior. Si no realizas una transición a la superposición, tu elemento volverá inmediatamente a ser recortado, transformado y cubierto, y la transición no se llevará a cabo. De manera similar, overlay permite que ::backdrop se anime de forma fluida cuando se agrega a un elemento de la capa superior.
Presentación en pantalla superpuesta
Demostración en vivo superpuesta
Obtén más información sobre la superposición y otras animaciones de salida.
Componentes
2023 fue un gran año para la intersección de los componentes de estilo y HTML, con la llegada de popover y mucho trabajo relacionado con el posicionamiento de los anuncios fijos y el futuro de los menús desplegables de diseño. Estos componentes facilitan la compilación de patrones de IU comunes sin la necesidad de depender de bibliotecas adicionales o de compilar tus propios sistemas de administración de estado desde cero cada vez.
Ventana emergente
La API de Popover te ayuda a compilar elementos que se ubican sobre el resto de la página. Estas podrían incluir menús, selección y, además, información sobre la herramienta. Para crear una ventana emergente 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 en la capa superior. Las ventanas emergentes aparecerán en una capa separada sobre el resto de la página, de modo que no tengas que jugar con el índice z.
- Funcionalidad para descartar ligeros. Si haces clic fuera del área de la ventana emergente, se cerrará la ventana emergente y se volverá a mostrar el enfoque.
- Administración del enfoque predeterminada: Cuando se abre la ventana emergente, la siguiente pestaña se detiene dentro de la ventana emergente.
- Vinculaciones de teclado accesibles. Si presionas la tecla
esco la presionas dos veces, se cerrará la ventana emergente y se volverá a mostrar el enfoque. - Vinculaciones de componentes accesibles. La conexión de un elemento de ventana emergente a un activador de ventana emergente de forma semántica
Presentación en pantalla de ventana emergente
Demostración en vivo de ventana emergente
Reglas horizontales en la selección
Otro pequeño cambio en Chrome y Safari este año es la capacidad de agregar elementos de reglas horizontales (etiquetas <hr>) a elementos <select> para ayudar a dividir visualmente tu contenido. Anteriormente, colocar una etiqueta <hr> en una selección simplemente no se renderizaba. Sin embargo, este año, tanto Safari como Chrome admiten esta función, lo que permite separar mejor el contenido dentro de los elementos <select>.
Seleccionar captura de pantalla
Seleccionar demostración en vivo
Más información para usar el uso de hr en select
Seudoclases válidas y no válidas para el usuario
Este año, como estables en todos los navegadores, :user-valid y :user-invalid se comportan de manera similar a las seudoclases :valid y :invalid, pero coinciden con un control de formulario solo después de que un usuario haya interactuado significativamente con la entrada. Un control de formulario obligatorio y 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 selectores nuevos, ya no es necesario escribir código con estado para realizar un seguimiento de las entradas que cambió un usuario.
:user-* Presentación en pantalla
:user-* Demostración en vivo
Obtén más información sobre el uso de los pseudoelementos de validación de formulario de usuario*.
Acordeón exclusivo
Navegadores compatibles
- 120
- 120
- x
- 17.2
Un patrón de IU común en la Web es un componente de acordeón. Para implementar este patrón, combinas algunos elementos <details>, a menudo agrupándolos visualmente para indicar que pertenecen juntos.
Como novedad de Chrome 120, se admite 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. Como máximo, se puede abrir un elemento del grupo a la vez. Cuando abras uno de los elementos <details> del grupo, se cerrará automáticamente el que ya esté abierto. Este tipo de acordeón se denomina acordeón exclusivo.
No es necesario que los elementos <details> que forman parte de un acordeón exclusivo sean elementos del mismo nivel. Pueden estar dispersas por el documento.
El CSS ha tenido un renacimiento mucho en los últimos años y, en especial, durante 2023. Si recién comienzas a usar CSS o solo quieres repasar los conceptos básicos, consulta nuestro curso gratuito Aprende sobre CSS, además de los otros cursos gratuitos que se ofrecen en web.dev.
Te deseamos una feliz temporada de festividades y esperamos que tengas la oportunidad de incorporar algunas de estas nuevas y brillantes funciones de IU y CSS en tu trabajo.
⇾ El equipo de desarrollo de IU de Chrome,
