Si tuviera que dividir las evoluciones de CSS en categorías, habríamos ido mucho más allá de los días en los que simplemente pedíamos un radio fronterizo para sentir que estábamos viviendo en el futuro. Actualmente vivimos en un momento en el que la plataforma nos brinda herramientas que no solo modifican la capa visual, sino que redefinen fundamentalmente cómo diseñamos las interfaces. Pensé que la cantidad de funciones anunciadas en 2024 no podría ser superada. Nunca me había equivocado tan felizmente.
El “CSS Wrapped 2025” del equipo de Chrome no es solo una lista de características; es un manifiesto para una web nativa y dinámica. Como alguien que ha pasado un par de años documentando estas evoluciones, desde la definición de las eras "CSS5" hasta las complejidades de las utilidades de diseño modernas, me encuentro mirando el resumen de este año con una gran sensación de entusiasmo. Estamos viendo un cambio hacia la “Ergonomía optimizada” y las “Interacciones de próxima generación” que nos permiten dejar de luchar contra el código y comenzar a esculpir interfaces en su estado natural.
En este artículo, puede encontrar una visión completa de las características destacadas del informe de Chrome, vistas a través de la lente de mis experimentos recientes y mis esperanzas para el futuro de la plataforma.
La revolución de los componentes: finalmente, una selección nativa personalizable
Durante años, hemos dependido de pesadas bibliotecas de JavaScript para diseñar menús desplegables, un "problema de décadas" que la plataforma finalmente resolvió. Como detallé en mi inmersión profunda en la historia de la selección personalizable (y artículos relacionados), este ha sido un largo camino que involucra Open UI, eliminando nombres como
La fantástica adición de permitir contenido enriquecido dentro de opciones, como imágenes o banderas, es muy divertida. Podemos crear todo tipo de selects hoy en día:
Demostración: Creé una demostración de Poké-aventura que muestra cómo el nuevo elemento
Vea la selección personalizable del Lápiz A con imágenes dentro de las opciones y el contenido seleccionado [bifurcado] por utilidad.
Demostración: una mirada completa al diseño de la selección con solo pseudoelementos.
Vea la selección personalizable de Pluma A con solo pseudoelementos [bifurcados] por utilidad.
Demostración: O puede mejorarlo con esta demostración de selección de menú usando optgroups.
Vea el lápiz Un menú de selección real con grupos de opciones [bifurcados] por utilidad. Esta característica por sí sola indica un cambio masivo en la forma en que crearemos formularios, reduciendo las dependencias y la deuda técnica. Marcadores de desplazamiento y la muerte del carrusel de JavaScript Históricamente, la creación de carruseles ha sido un punto de fricción entre desarrolladores y clientes. A los clientes les encantan, los desarrolladores temen el JavaScript necesario para hacerlos accesibles y eficaces. La llegada de los pseudoelementos ::scroll-marker y ::scroll-button() cambia esta dinámica por completo. Estas características nos permiten crear puntos de navegación y botones de desplazamiento exclusivamente con CSS, vinculados de forma nativa al contenedor de desplazamiento. Como escribí en mi blog, esta fue Amor a primera diapositiva. La capacidad de crear un control deslizante accesible y completamente funcional sin una sola línea de JavaScript no solo es conveniente; es un triunfo para el rendimiento. Existen algunas preocupaciones de accesibilidad en torno a esta función y, aunque son válidas, los desarrolladores podría haber una manera de hacerla funcionar. Lo bueno es que todos estos cambios en la interfaz de usuario lo hacen mucho más fácil que la manipulación personalizada del DOM y el arrastre de etiquetas aria, pero estoy divagando... Ahora podemos agrupar marcadores automáticamente usando scroll-marker-group y diseñar los botones usando la posición de anclaje para colocarlos exactamente donde queremos.
.carrusel { desbordamiento-x: automático; grupo-marcador-desplazamiento: después; /* Crea el contenedor para puntos */
/* Crea los botones */ &::botón de desplazamiento(final en línea),&::botón de desplazamiento(inicio en línea) { contenido: " "; posición: absoluta; /* Utilizar posicionamiento de anclaje para centrarlos */ posición-ancla: --carrusel; arriba: ancla (centro); }
/* Crea los marcadores en los niños */ div { &::marcador de desplazamiento { contenido: " "; ancho: 24px; radio fronterizo: 50%; cursor: puntero; } /* Resalta el marcador activo */ &::marcador de desplazamiento:objetivo-actual { fondo: blanco; } } }
Demostración: mi experimento creó un carrusel exclusivamente a partir de HTML y CSS, utilizando la posición de anclaje para colocar los botones.
Consulte Pen Carousel HTML y CSS puro [bifurcado] de utilidadbend.
Demostración: una nueva versión del control deslizante de la tienda web que utiliza attr() para colocar imágenes de fondo dinámicamente en los marcadores.
Vea la nueva versión del elegante control deslizante de Pen Webshop en CSS [bifurcado] de utilidadbend. Consultas de estado: ¿Algo complicado atascado? ¿Se rompió algo rápido? Durante mucho tiempo, hemos carecido de la capacidad de saber si “un objeto pegajoso está atascado” o si un “elemento ágil está roto” sin depender de los hacks de IntersectionObserver. Chrome 133 introdujo consultas de estado de desplazamiento, lo que nos permite consultar estos estados de forma declarativa. Al establecer el tipo de contenedor: estado de desplazamiento, ahora podemos diseñar elementos secundarios en función de si están atascados, rotos o desbordados. Esta es una enorme mejora en la “calidad de vida” que he estado esperando ansiosamente desde el Día CSS 2023. Incluso ha evolucionado mucho desde que también podemos ver la dirección del desplazamiento, ¡encantador! Para un ejemplo simple: finalmente podemos aplicar una sombra a un encabezado solo cuando en realidad está pegado a la parte superior de la ventana gráfica: .encabezado-contenedor { tipo de contenedor: estado de desplazamiento; posición: pegajosa; arriba: 0;
encabezado { transición: cuadro-sombra 0,5 s de salida gradual; /* La consulta comprueba el estado del contenedor */ @container estado de desplazamiento (atascado: arriba) { sombra de cuadro: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demostración: un encabezado adhesivo que solo aplica una sombra cuando en realidad está atascado.
Consulte los encabezados de Pen Sticky con consulta de estado de desplazamiento, verificando si el elemento adhesivo está atascado [bifurcado] por la utilidad.
Demostración: una lista con temática de Pokémon que utiliza consultas de estado de desplazamiento combinadas con la posición del ancla para mover un cuadro sobre el personaje actualmente capturado.
Consulte la consulta del estado de desplazamiento del lápiz para comprobar qué elemento se ajusta con CSS, versión de Pokémon [bifurcada] mediante utilidad. Ergonomía optimizada: lógica en CSS La sección "Ergonomía optimizada" de CSS Wrapped destaca las características que hacen que nuestros flujos de trabajo sean más intuitivos. Tres características se destacan como transformadoras de cómo escribimos la lógica:
Declaraciones if()Finalmente estamos obteniendo condicionales en CSS. La función if() actúa como un operador ternario para hojas de estilo, lo que nos permite aplicar valores basados en medios, soporte o consultas de estilo en línea. Esto reduce la necesidad de bloques @media detallados para cambios de propiedades individuales. Funciones @function Finalmente podemos mover algo de lógica a un lugar diferente, lo que da como resultado algunos archivos más limpios, una característica real de calidad de vida. sibling-index() y sibling-count()Estas funciones de conteo de árboles resuelven el problema de animaciones asombrosas o estilos de elementos según el tamaño de la lista. Como exploré en Diseñar hermanos con CSS nunca ha sido tan fácil, esto elimina la necesidad de codificar propiedades personalizadas (como --index: 1) en nuestro HTML.
Ejemplo: calcular diseños Ahora podemos escribir fórmulas matemáticas concisas. Por ejemplo, escalonar una animación para las tarjetas que ingresan a la pantalla se vuelve trivial: .contenedor-tarjeta > * { animación: revela 0,6 s de avance suave; /* ¡No más variables de índice manual! */ retardo de animación: calc(sibling-index() * 0.1s); }
Incluso experimenté con el uso de estas funciones junto con la trigonometría para colocar elementos en un círculo perfecto sin ningún JavaScript.
Demostración: animaciones de cartas asombrosas de forma dinámica.
Vea las tarjetas Pen Stagger usando sibling-index() [bifurcado] de utilidadbend.
Demostración: colocar elementos en un círculo perfecto usando índice de hermanos, recuento de hermanos y la nueva función CSS @function.
Vea el bolígrafo El círculo que utiliza el índice de hermanos, el recuento de hermanos y las funciones [bifurcadas] de Utilitybend. Mi lista de tareas pendientes de CSS: funciones que no puedo esperar para probar Mientras he estado ocupado esculpiendo selecciones y transiciones, el informe "CSS Wrapped 2025" está repleto de otras ventajas que aún no he tenido la oportunidad de activar en CodePen. Estos ocupan un lugar destacado en mi lista para mis próximos experimentos: Consultas de contenedores anclados Utilicé CSS Anchor Positioning para los botones en mi demostración de carrusel, pero "CSS Wrapped" resalta unaevolución de esto: Consultas de contenedor anclado. Esto resuelve un problema que todos hemos tenido con la información sobre herramientas: si el navegador voltea la información sobre herramientas de arriba a abajo debido a limitaciones de espacio, la "flecha" a menudo permanece apuntando en la dirección incorrecta. Con consultas de contenedor anclado (@container anclado(fallback: flip-block)), podemos diseñar el elemento según la posición de respaldo que realmente eligió el navegador. Grupos de transición de vistas anidadas Las transiciones de vista han sido una revolución, pero vinieron con una compensación específica: aplanaron el árbol de elementos, que a menudo rompía las transformaciones 3D o se desbordaba: recortar. Siempre tuve la sensación de que le faltaba algo y esta podría ser la respuesta. Al usar view-transition-group: near, finalmente podemos anidar grupos de transición entre sí. Esto nos permite mantener efectos de recorte o rotaciones 3D durante una transición, algo que antes era imposible porque los elementos se elevaban al nivel superior. .img de tarjeta { ver-nombre-de-transición: foto; ver-transición-grupo: más cercano; /* ¡Mantenlo anidado! */ }
Tipografía y formas Finalmente, el ergonomista que hay en mí está ansioso por probar Text Box Trim, que promete eliminar ese molesto espacio en blanco adicional encima y debajo del contenido del texto (el encabezado) para finalmente lograr una alineación vertical perfecta. Y para el lado creativo, las funciones corner-shape y shape() están abriendo diseños no rectangulares, permitiendo “cuadrículas” y caminos complejos que responden a variables CSS. Dicho esto, ¡no puedo esperar a tener un diseño lleno de ardillas! Un futuro esperanzador Somos testigos de un mundo en el que CSS se está volviendo capaz de manejar la lógica, el estado y las interacciones complejas que antes pertenecían a JavaScript. Funciones como moveBefore (preservar el estado DOM para iframes/videos) y attr() (usar tipos más allá de cadenas para colores y cuadrículas) consolidan aún más esta realidad. Si bien algunas de estas funciones son actualmente experimentales o específicas de Chrome, el impulso es innegable. Debemos esperar un soporte continuo en todos los navegadores a través de iniciativas como Interop para garantizar que estas capacidades se conviertan en la base. Dicho esto, tener motores de navegador es tan importante como tener todas estas increíbles funciones en "Chrome primero". Estas nuevas funciones deben discutirse, modificarse y probarse antes de llegar a los navegadores. Es un momento fantástico para adentrarse en CSS. Ya no nos limitamos a diseñar documentos; Estamos creando aplicaciones dinámicas, ergonómicas y robustas con un conjunto de herramientas nativo que es más poderoso que nunca. Empecemos con esta nueva era y corramos la voz. ¡Esto está envuelto en CSS!
