CSS Wrapped: 2023 - resumen completo de los cambios en CSS este año

• 2023 fue un año enorme para CSS. Llegaron muchas funciones nuevas de CSS y UI que hacen posible en la plataforma web cosas que antes se consideraban imposibles
• Todos los navegadores principales ya soportan container queries, subgrid, el selector :has() y más, además de nuevos espacios de color y funciones
• Chrome permite animaciones basadas en scroll y transiciones fluidas entre vistas usando solo CSS
• También se introdujeron muchos nuevos elementos base que mejoran la experiencia de desarrollo, como el anidamiento de CSS y los estilos con alcance definido

Fundamentos arquitectónicos

Funciones trigonométricas

• Chrome 111 agregó soporte para funciones trigonométricas como sin(), cos(), tan(), asin(), acos(), atan(), atan2()
• Estas funciones son muy útiles para animaciones y diseño de layouts

Selección compleja con nth-*

• La pseudoclase :nth-child() permite seleccionar elementos en el DOM por índice
• Desde Chrome 111, ahora también es posible pasar opcionalmente una lista de selectores a :nth-child() y :nth-last-child()

Scope

• Chrome 118 agregó soporte para @scope, que limita la coincidencia de selectores a un subárbol específico del documento
• El subárbol acotado se define con una raíz de alcance y un límite de alcance opcional

Nesting

• Antes de usar anidamiento, había que declarar todos los selectores de forma explícita por separado
• Ahora es posible agrupar reglas de estilo relacionadas y seguir reutilizando selectores

Subgrid

• CSS subgrid permite crear grids más complejos y lograr una mejor alineación entre layouts hijos
• Hace posible que un grid interno adopte como propias las filas y columnas del grid externo

Tipografía

Initial-letter

• La propiedad initial-letter, incorporada desde Chrome 110, es una función pequeña pero potente de CSS para definir la colocación de la letra inicial
• La letra puede colocarse como capitular hundida o elevada

text-wrap: balance y pretty

• Los desarrolladores no conocen el tamaño final, el tamaño de fuente ni siquiera el idioma de un titular o párrafo
• Se introdujeron dos nuevas técnicas de ajuste de texto: balance y pretty

Color

Espacios de color HD (Color Level 4)

• En 2023 llegaron nuevos colores, más colores, nuevos espacios de color, funciones de color y nuevas capacidades
• CSS y el color ahora pueden crear gradientes con colores HDR e interpolarlos en distintos espacios de color

Función color-mix

• Mezclar colores es una tarea clásica, y en el CSS de 2023 ya es posible
• Se puede mezclar con un color no solo blanco o negro, sino también transparencia, y hacerlo en el espacio de color elegido

Sintaxis de color relativa

• La sintaxis de color relativa (RCS) es un método complementario a color-mix() para generar variaciones de color
• RCS permite hacer manipulaciones relativas y absolutas del color

Diseño responsivo

Container queries por tamaño

• En lugar de usar la información de tamaño global del viewport, las container queries permiten consultar el elemento padre dentro de la página

Container queries por estilo

• Las style queries permiten consultar los valores de propiedades personalizadas del elemento padre

Selector :has()

• Durante casi 20 años, los desarrolladores pidieron un “selector de padre” en CSS
• Con el selector :has() es posible seleccionar un elemento .card que tenga una imagen hero como hijo, por ejemplo .card:has(img.hero)

Media query update

• La media query update permite ajustar la UI según la tasa de refresco del dispositivo

Media query scripting

• La media query de scripting puede usarse para verificar si JavaScript está disponible

Media query reduced-transparency

• Las interfaces translúcidas pueden provocar dolores de cabeza o resultar visualmente difíciles para distintos tipos de discapacidad visual
• Esta media query indica que el usuario tiene una preferencia del sistema para reducir o eliminar la transparencia en la UI

Interacción

View transitions

• Las transiciones de vista tienen un gran impacto en la experiencia de usuario de una página
• Con la API de View Transitions se pueden crear transiciones visuales entre dos estados de página en una single-page application

Función linear-easing

• La función linear() permite crear funciones de easing complejas de forma sencilla, a cambio de perder un poco de precisión

Scroll End

• El evento scrollend ofrece un evento de fin de scroll en el momento justo para entender si el usuario sigue haciendo el gesto o no

Animaciones impulsadas por scroll

• Las animaciones basadas en scroll permiten vincular el offset de scroll de un contenedor con animaciones creadas con CSS o con la Web Animations API

Deferred timeline attachment

• Al aplicar animaciones basadas en scroll mediante CSS, el mecanismo para encontrar el contenedor que las controla siempre recorre el árbol DOM hacia arriba, por lo que queda limitado a ancestros con scroll

Animaciones de propiedades discretas

• En 2023 se agregó como nueva capacidad la posibilidad de animar propiedades discretas, por ejemplo desde display: none

@starting-style

• La regla CSS @starting-style se basa en la nueva capacidad web de animar desde display: none

Overlay

• La nueva propiedad CSS overlay permite que elementos de estilo de capa superior como popover y dialog aparezcan con una animación fluida desde la capa superior

Componentes

Popover

• La API de Popover ayuda a crear elementos que se colocan por encima del resto de la página

Líneas horizontales en select

• Chrome y Safari agregaron este año soporte para insertar elementos de regla horizontal (etiquetas ) dentro de elementos

Pseudoclases :user-valid e invalid

• :user-valid y :user-invalid funcionan de manera similar a las pseudoclases :valid y :invalid, pero solo coinciden con controles de formulario después de que el usuario haya interactuado suficientemente con la entrada

Accordion exclusivo

• En Chrome 120, los elementos `` ahora soportan el atributo name
• Con este atributo, múltiples elementos `` con el mismo valor de name forman un grupo semántico