Conclusión de CSS: 2023
Ir al contenido:
- Diseño responsivo
- Consultas de contenedores
- Consultas de diseño
- :tiene selector
- Actualiza una consulta de medios
- Consulta de medios de la secuencia de comandos
- Transparencia en las consultas de medios
¡Vaya! 2023 fue un gran año para los 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ícula, el selector :has() y una gran cantidad de nuevos espacios de color y funciones. En Chrome, admitimos animaciones basadas en desplazamientos solo para 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.
Fue un año increíble. Por ello, nos gustaría finalizar este año de logros, celebrando y agradeciendo el arduo trabajo realizado por los desarrolladores de navegadores y la comunidad web que hicieron posible todo esto.
Bases de la arquitectura
Comencemos con las actualizaciones del lenguaje y las capacidades principales de CSS. Estas son las funciones fundamentales para la forma en que creas y organizas estilos, y aportan un 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 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.
Obtén más información sobre las funciones trigonométricas en CSS.
Selección nth-* compleja
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, puedes controlar de forma precisa los elementos que deseas seleccionar.
De forma predeterminada, los seudos :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 dinámicamente el selector usado.
Obtén más información sobre las selecciones enth-* complejas.
Alcance
Chrome 118 agregó compatibilidad con @scope, una regla “at” que te permite hacer coincidir el selector de permisos con un subárbol específico del documento. Con el estilo con alcance, puedes ser muy específico con respecto a los elementos que seleccionas 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 los elementos dentro del subárbol tallado. Por ejemplo, la siguiente regla de estilo con alcance solo se orienta a 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 del carrusel no coinciden debido al límite de alcance aplicado.
Captura de pantalla de la demostración del alcance
Alcance de la demostración en vivo
@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 introducción y cómo @scope afecta a la cascada.
Nesting
Antes de anidar, cada selector debía declararse explícitamente, por separado entre sí. Esto conduce a la repetición, la carga masiva de hojas de estilo y la experiencia de creación 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 */
}
Presentación en pantalla del período de prueba
Demostración en vivo del período de Nesting
La anidación puede reducir el peso de una hoja de estilo, reducir la sobrecarga de la repetición de selectores y centralizar los estilos de 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.
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, mediante el uso de subgrid como valor para las filas o columnas de la cuadrícula.
Presentación en pantalla de subcuadrícula
Demostración en vivo de Subgrid
La subcuadrícula es especialmente útil para alinear hermanos con los contenidos dinámicos de los demás. Esto evita que los redactores publicitarios, los escritores de UX y los traductores intenten crear un texto de proyecto que se ajuste a sus necesidades. en el diseño. Con la subcuadrícula, el diseño se puede ajustar para que se ajuste al contenido.
Obtén más información sobre subcuadrícula.
Tipografía
La tipografía web experimentó algunas actualizaciones clave en 2023. Una mejora progresiva especialmente atractiva es la propiedad text-wrap. Esta propiedad habilita el ajuste de diseño tipográfico, compuesto en el navegador sin necesidad de escritura 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.
Letra inicial
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 colocar letras en estado descartado o elevado. La propiedad acepta dos argumentos: el primero para la medida en que la letra debe colocar la letra en el párrafo correspondiente y, el segundo, para cuánto debe elevar la letra por encima. Incluso puedes combinar ambos elementos, como se muestra 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.Más información sobre la letra inicial.
text-wrap: equilibrio y belleza
Como desarrollador, no conoces el tamaño final, el tamaño de la fuente ni 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 sí 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 el diseño de texto avanzado 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 huérfanos y garantizar la separación silábica saludable. Tradicionalmente, ambas tareas se hacen a mano, y es increíble asignarle el trabajo al navegador y que funcione en cualquier idioma traducido.
Presentación en pantalla de ajuste de texto
Demostración en vivo de ajuste de texto
balance y pretty 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 ajuste de texto: equilibrio.
Color
2023 fue el año del color para la plataforma web. Con los nuevos espacios de color y funciones que habilitan los temas de color dinámicos, no hay nada que te detenga para crear los temas vívidos y exuberantes que tus usuarios merecen, ¡y también puedes personalizarlos!
Espacios de color en HD (nivel de color 4)
desde el hardware hasta el software, el CSS y las luces intermitentes; las computadoras pueden tardar mucho trabajo en intentar representar colores tan buenos como pueden ver nuestros ojos. En 2023, tenemos nuevos colores, más colores, nuevos espacios de color, funciones de color y nuevas capacidades.
CSS y el color ahora permiten:
- Comprueba si el hardware de la pantalla de los usuarios es compatible con la amplia gama de colores HDR.
- Verifique si el navegador del usuario comprende la sintaxis de colores, como Oklch o Display P3.
- Especifica 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 los 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
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 transparencia, y haz todo esto en el 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()
Demostración de color-mix()
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 ponen más avanzadas una vez que comienzas a tener en cuenta los espacios de color y aprendes lo diferente que puede ser el espacio de color de combinación en los resultados.
Obtén más información sobre color-mix().
Sintaxis de colores relativas
La sintaxis de color relativo (RCS) es un método complementario de color-mix() para crear variantes de color. Es un poco más potente que color-mix(), pero también una estrategia diferente para trabajar con color. 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
RCS te permite realizar manipulaciones relativas y absolutas de un color. Un cambio relativo es aquel en el que se toma el valor actual de saturación o luminosidad y se lo modifica con calc(). Un cambio absoluto es aquel en el que se reemplaza el valor de un 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 relativas.
Diseño responsivo
El diseño responsivo evolucionó en 2023. Este año revolucionario permitió la creación de nuevas funciones que cambiaron completamente nuestra forma de crear experiencias web adaptables y nos dio paso a un nuevo modelo de diseño responsivo basado en componentes. La combinación de consultas de contenedores y :has() admite componentes que poseen un diseño lógico y responsivo según el tamaño del 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
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. Por lo tanto, 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 en 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. Además de las consultas de contenedores, se obtienen los tamaños de las consultas de contenedores. En la siguiente demostración, el tamaño de consulta del contenedor cqi (que representa el tamaño del contenedor intercalado) se usa para ajustar el tamaño del encabezado de la tarjeta.
Screencast 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 las consultas de contenedores
Las consultas de estilo se realizaron con una implementación parcial en Chrome 111. Con las consultas de diseño actualmente, 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 estableció en un valor determinado, como @container style(--rain: true).
Captura de pantalla de la consulta de diseño
Demostración de la 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 acerca del uso de las consultas de estilo.
Selector :has()
Durante casi 20 años, los desarrolladores solicitaron un "selector principal". en CSS. Con el selector :has() que se incluyó en Chrome 105, ahora es posible. Por ejemplo, si usas .card:has(img.hero), se seleccionarán los elementos .card que tengan una imagen principal como elemento secundario.
Captura de pantalla de demostración de :has()
Demostración en vivo de :has()
:has(): Tarjeta sin imagen o con ellaDebido a que :has() acepta una lista de selectores relativos como su argumento, puedes seleccionar mucho más que el elemento superior. Usando varios combinadores de CSS, es posible no solo subir 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> sobre el que se coloca actualmente.
:has() Presentación en pantalla
Demostración de :has()
:has() de CSS: ConectorObtén más información sobre el selector :has() de CSS.
Actualiza una consulta de medios
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 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 las computadoras de escritorio y la mayoría de los dispositivos móviles. Es posible que los dispositivos electrónicos de lectura y los dispositivos, como los sistemas de pago de baja energía, tengan 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
Obtenga más información sobre @media (update).
Consulta de medios de la secuencia de comandos
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 medios, 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 porque el CSS ahora tiene una forma de detectar JavaScript y ajustarlo en consecuencia.
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 secuencias de comandos puede ayudar a hacer que el cambio funcione según 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. Muchas grandes oportunidades para actualizar la UX si la escritura de secuencias de comandos está disponible y, al mismo tiempo, proporciona una experiencia de base significativa si la función está inhabilitada.
Obtén más información sobre secuencia de comandos.
Consulta de medios de transparencia reducida
Las interfaces no opacas pueden causar dolores de cabeza o ser una dificultad visual para varios tipos de deficiencias de visión. 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 sobre prefers-reduced-transparency se adapta bien a las otras consultas de medios de preferencias, lo que te permite ser creativo y, al mismo tiempo, ajustarte para los usuarios.
Presentación en pantalla con menor transparencia
Demostración de transparencia reducida
En algunos casos, puedes proporcionar un diseño alternativo que no tenga contenido que se superponga a otro. En otros casos, la opacidad de un color puede ajustarse para que sea opaco o casi opaco. La siguiente entrada de blog tiene demostraciones más inspiradoras que se adaptan a las preferencias de los usuarios. Dales un vistazo si tienes curiosidad por los momentos en los que esta consulta de medios es valiosa.
Obtenga más información sobre @media (prefers-reduced-transparency).
Interacción
La interacción es un pilar 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 e implementación de las interacciones, lo que permitió que los usuarios realizaran su recorrido y ofrecieran una experiencia web más refinada.
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 transiciones de vistas, puedes crear transiciones visuales entre dos estados de página de tu aplicación de una sola página. Estas transiciones pueden ser transiciones de página completa o elementos más pequeños en una página, como agregar o quitar un elemento nuevo de 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, se toma una instantánea del antes y el después y, luego, se realiza una transición entre las dos. 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
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 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 debe confundirse con la palabra clave linear) te permite crear funciones de aceleración complejas de una manera simple, con el compromiso de perder un poco 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 si las simplificas a una serie de puntos y, luego, realizas una interpolación lineal entre estos puntos.
linear() usa estos puntos e interpola de forma lineal entre ellos.Presentación en pantalla de aceleración lineal
Demostración de aceleración lineal
linear() de CSSObtén más información sobre linear(). Para crear curvas linear(), usa el generador de aceleración lineal.
Fin del desplazamiento
Muchas interfaces incluyen interacciones de desplazamiento y, a veces, la interfaz necesita sincronizar información relevante para la posición actual de desplazamiento 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 el tiempo perfecto que entiende si un usuario aún está en medio de un gesto o no.
Presentación en pantalla de desplazamiento
Demostración de Scrollend
Esto era importante para el navegador, ya que JavaScript no puede rastrear la presencia de dedos en la pantalla durante un desplazamiento; la información simplemente no está disponible. Ahora se pueden borrar fragmentos de código de intento final de desplazamiento incorrecto y reemplazarlos por un evento de alta precisión propiedad del navegador.
Obtén más información sobre scrollend.
Animaciones basadas en desplazamientos
Las animaciones basadas en desplazamientos son una función emocionante disponible en Chrome 115. Estas te permiten tomar una animación CSS existente o una animación creada con la API de Web Animations y vincularla al desplazamiento de una barra de desplazamiento. A medida que te desplaces hacia arriba o hacia abajo, o hacia la izquierda y la derecha en una barra de desplazamiento horizontal, la animación vinculada se arrastrará hacia delante y hacia atrás en una 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
Con un objeto ViewTimeline, puedes hacer el seguimiento de un elemento a medida que cruza el puerto de desplazamiento. Esto funciona de manera similar a cómo IntersectionObserver realiza el seguimiento de un elemento. En la siguiente demostración, cada imagen se revela desde el momento en que ingresa al puerto de desplazamiento hasta que se encuentra 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 las animaciones de CSS y la Web Animations API, puedes beneficiarte de todas las ventajas que estas API aportan. Eso incluye la capacidad de hacer que estas animaciones se ejecuten fuera del subproceso principal. Ahora puedes tener animaciones fluidas y sensuales, impulsadas por el desplazamiento, que se ejecutan desde el subproceso principal con solo unas pocas líneas de código adicional. ¿Qué no debería suceder?
Para obtener más información sobre las animaciones basadas en desplazamientos, consulta este artículo con todos los detalles o visitadev-driven-animations.style que incluye muchas demostraciones.
Archivo adjunto diferido en el cronograma
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 no principal, 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. Una vez hecho esto, cualquier elemento secundario de ese elemento superior compartido podrá usar el cronograma con ese nombre.
timeline-scope declarado en el elemento superior compartido, el elemento que lo usa como animation-timeline puede encontrar el scroll-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 en 2023 es la capacidad de animar animaciones discretas, como animaciones hacia y desde display: none. A partir de Chrome 116, puedes usar display y content-visibility en las reglas de fotogramas clave. También puede 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 con la palabra clave allow-discrete o en la propiedad transition como atajo.
Discreto Áni. Presentación en pantalla
Discreto Áni. Demostración
Obtén más información sobre la transición de animaciones discretas.
@starting-style
La regla de CSS @starting-style se basa en nuevas capacidades web para las animaciones hacia y desde display: none. Esta regla proporciona una forma de asignar un "antes de que se abra" a un elemento estilo 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 una ventana emergente 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, en el que se anima un atributo popover (consulta la siguiente sección) para que se vea de forma fluida y en la capa superior desde fuera del viewport.
Presentación en pantalla con estilo de @starting
Demostración de @starting-style
Obtén más información sobre @starting-style y otras animaciones de entradas.
Superposición
Puedes agregar la nueva propiedad overlay de CSS a tu transición para habilitar los elementos con estilos de la capa superior, como popover y dialog, para animarlos fuera de la capa superior sin problemas. Si no realizas la transición de superposición, tu elemento volverá a recortarse, transformarse y cubrirse de inmediato, y no verás la transición. De manera similar, overlay permite que ::backdrop se anime sin problemas cuando se agrega a un elemento de la capa superior.
Superposición de presentación en pantalla
Demostración en vivo con superposición
Obtén más información sobre las superposiciones 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 página de destino de popover y mucho trabajo en torno al posicionamiento de los anclas y el futuro del diseño de menús desplegables. 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
La API de Popover te ayuda a crear elementos que se colocan en la parte superior del resto de la página. Estas podrían incluir menús, información y selección. 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:
- Asciende a la capa superior. Las ventanas emergentes aparecerán en una capa separada sobre el resto de la página, para que no tengas que jugar con el índice z.
- Función de descarte ligero Si haces clic fuera del área de la ventana emergente, esta se cerrará y volverá al enfoque.
- Administración predeterminada del enfoque. Al abrir la ventana emergente, la pestaña siguiente se detiene dentro de ella.
- Vinculaciones de teclado accesibles. Si presionas la tecla
esco actívalas dos veces, se cerrará la ventana emergente y se volverá a enfocar. - Vinculaciones de componentes accesibles. La conexión de un elemento emergente con un activador emergente se activa de manera semántica.
Presentación en pantalla emergente
Demostración en vivo emergente
Reglas horizontales en selección
Otro pequeño cambio en HTML que llegó a Chrome y Safari este año es la capacidad de agregar elementos de reglas horizontales (etiquetas <hr>) en elementos <select> para 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 h en select
:Seudoclases válidas y no válidas por usuario
Estable en todos los navegadores este año, :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 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 haya dejado 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.
:usuario-* Presentación en pantalla
:user-* Demostración en vivo
Obtén más información para usar pseudoelementos de validación de formulario 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, debes combinar algunos elementos <details>, que a menudo los agrupan visualmente para indicar que pertenecen juntos.
Una 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. Se puede abrir, como máximo, un elemento del grupo a la vez: cuando abras uno de los elementos <details> del grupo, se cerrará automáticamente el que estaba abierto. Este tipo de acordeón se denomina acordeón exclusivo.
Los elementos <details> que forman parte de un acordeón exclusivo no necesariamente tienen que ser hermanos. Pueden estar dispersos por todo el documento.
El CSS tuvo un gran renacimiento en los últimos años y, en especial, durante 2023. Si eres nuevo en CSS o simplemente quieres hacer un repaso de los conceptos básicos, consulta nuestro curso gratuito Aprende CSS junto con 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,
