- 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
Aún no hay comentarios.