Funciones trigonométricas

Chrome 111 agregó compatibilidad con las funciones trigonométricas sin(), cos(), tan(), asin(), acos(), atan() y atan2(), lo que las hace 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 distribuir 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 compleja del n-ésimo elemento*

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, puedes pasar una lista de selectores a :nth-child() y :nth-last-child() de forma opcional. De esta manera, puedes filtrar previamente la lista de elementos secundarios antes de que An+B haga su trabajo.

En la siguiente demostración, la lógica de 3n+1 se aplica solo a las muñecas pequeñas, ya que se filtran previamente 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 selecciónes complejas de nth-*.

Alcance

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 de Scope

Demostración en vivo de Scope

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

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, los selectores se pueden continuar con reglas de estilo relacionadas agrupadas dentro.

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 */
}

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 eliminó con una actualización de sintaxis relajada de anidación.

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

Subred

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.

La subcuadrícula es especialmente útil para alinear elementos hermanos con el contenido dinámico de cada uno. 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.

Initial-letter

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 diseño para la ubicación de las 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

Obtén más información sobre initial-letter.

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.

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

Espacios de color HD (nivel de color 4)

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 de color relativa.

Obtén más información sobre 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 hacer todo esto en cualquier espacio de color que elijas. Es una función de color básica y avanzada al mismo tiempo.

Puedes pensar en color-mix() como un momento en el tiempo de un gradiente. Mientras que un gradiente muestra todos los pasos que se necesitan 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 relativos

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.

Los RCS te permiten 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 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 brinda herramientas significativas para temas, variantes just in time y mucho más.

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

Consultas de tamaño del contenedor

En lugar de usar la información de tamaño global del viewport para aplicar estilos CSS, las consultas de contenedor admiten la consulta de un elemento superior 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.

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

Consultas de contenedores de diseño

Las consultas de diseño se implementaron de forma 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

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()

Durante casi 20 años, los desarrolladores pidieron un "selector superior" en CSS. Ahora es posible hacerlo con el selector :has() que se envió en Chrome 105. 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()

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 el cursor.

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

Actualiza la consulta de contenido multimedia

La consulta de contenido multimedia 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 lectores electrónicos y los dispositivos como los sistemas de pago de baja potencia pueden tener una velocidad de actualización lenta. Saber que el dispositivo no puede controlar la animación o las actualizaciones frecuentes significa que puedes ahorrar el uso de batería o las actualizaciones de vista defectuosas.

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

Consulta de contenido multimedia 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 ú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.

Obtén más información para habilitar y deshabilitar JavaScript en una página para realizar pruebas con Chrome DevTools aquí.

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. También puedes considerar un componente de interruptor. Si JavaScript está disponible, el interruptor se puede deslizar con un gesto en lugar de solo activarse y desactivarse. Hay muchas oportunidades para actualizar la UX si la escritura de secuencias de comandos está disponible y, al mismo tiempo, proporcionar una experiencia de base significativa si 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 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.

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).

Ver transiciones

Las transiciones de vista 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 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 cómo se deben animar estas instantáneas.

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

Función de suavización lineal

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.

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

Desplazar hasta el final

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 fin de desplazamiento con el tiempo perfecto que comprende si un usuario aún está en medio de un gesto o no.

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

Las animaciones impulsadas por el desplazamiento son una función interesante 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 animaciones web y vincularla al desplazamiento de un elemento 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 hacer un seguimiento del progreso general de un control de desplazamiento, como se muestra 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.

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.

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

Cuando se aplica una animación basada en el desplazamiento a través de CSS, el mecanismo de búsqueda para encontrar el control deslizante de control siempre sube por el árbol del DOM, lo que lo limita solo a los ancestros del desplazamiento. Sin embargo, con frecuencia, el elemento que se debe animar no es un elemento secundario del objeto 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 el scroll-timeline o view-timeline definido con ese nombre se adjunte a él, 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.

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.

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

@starting-style

La regla CSS @starting-style se basa en nuevas funciones web para animar 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 cuando creas un elemento y quieres darle la capacidad de animarse. 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.

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

Superposición

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.

Obtén más información sobre la superposición y otras animaciones de salida.

Ventana emergente

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 del cuadro emergente, este se cerrará y se restablecerá el enfoque.
• Administración de enfoque predeterminada. Si abres el cuadro emergente, el siguiente punto de parada de pestaña se ubicará dentro de él.
• 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

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

: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 hacer un seguimiento de la entrada que cambió un usuario.

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

Accordion exclusivo

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.

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