Se tivese que dividir as evolucións CSS en categorías, avanzamos moito máis alá dos días nos que simplemente pedíamos o radio de fronteira para sentir que vivimos no futuro. Actualmente vivimos nun momento no que a plataforma está a entregarnos ferramentas que non só axustan a capa visual, senón que redefinin fundamentalmente como diseñamos interfaces. Pensei que o número de funcións anunciadas en 2024 non se podía superar. Nunca me equivoquei tan felizmente.
O "CSS Wrapped 2025" do equipo de Chrome non é só unha lista de funcións; é un manifesto por unha web dinámica e nativa. Como alguén que pasou un par de anos documentando estas evolucións, desde a definición de eras "CSS5" ata as complejidades das utilidades de deseño modernos, atópome mirando o resumo deste ano cunha enorme sensación de entusiasmo. Estamos a ver un cambio cara a "Ergonomía optimizada" e "Interaccións de nova xeración" que nos permiten deixar de loitar contra o código e comezar a esculpir interfaces no seu estado natural.
Neste artigo, podes atopar unha visión completa das características destacadas do informe de Chrome, vista a través da lente dos meus experimentos recentes e das esperanzas para o futuro da plataforma.
A revolución dos compoñentes: finalmente, unha selección nativa personalizable
Durante anos, confiamos en bibliotecas de JavaScript pesadas para estilizar os menús despregables, un "problema de décadas" que a plataforma finalmente resolveu. Como detallei no meu profundo mergullo na historia da selección personalizable (e artigos relacionados), este foi un longo camiño que implicou Open UI, descartar nomes como
A fantástica adición para permitir contido rico dentro de opcións, como imaxes ou bandeiras, é moi divertida. Hoxe en día podemos crear todo tipo de seleccións:
Demostración: creei unha demostración de Poké-adventure que mostra como o novo elemento
Vexa o bolígrafo Unha selección personalizable con imaxes dentro das opcións e o contido seleccionado [forked] por utilitybend.
Demostración: unha visión completa do estilo do select só con pseudoelementos.
Vexa o Pen Unha selección personalizable con só pseudoelementos [forked] por utilitybend.
Demostración: ou podes aumentar un nivel con esta demostración de selección de menús usando optgroups.
Vexa o Pen Un menú de selección real con optgroups [forked] por utilitybend. Esta característica por si soa sinala un cambio masivo na forma en que imos construír formularios, reducindo as dependencias e a débeda técnica. Os marcadores de desprazamento e a morte do carrusel de JavaScript A creación de carruseles foi historicamente un punto de fricción entre desenvolvedores e clientes. Os clientes encántanlles, os desenvolvedores temen o JavaScript necesario para facelos accesibles e eficaces. A chegada dos pseudoelementos ::scroll-marker e ::scroll-button() cambia esta dinámica por completo. Estas funcións permítennos crear puntos de navegación e botóns de desprazamento unicamente con CSS, ligados de forma nativa ao contedor de desprazamento. Como escribín no meu blog, esta foi o amor na primeira diapositiva. A posibilidade de crear un control deslizante totalmente funcional e accesible sen unha soa liña de JavaScript non é só conveniente; é un triunfo para o rendemento. Existen algúns problemas de accesibilidade ao redor desta función e, aínda que son válidas, os desenvolvedores poderían ter unha forma de facelo funcionar. O bo é que todos estes cambios na IU fan que sexa moito máis fácil que a manipulación personalizada de DOM e arrastrar as etiquetas de aria, pero divago... Agora podemos agrupar os marcadores automaticamente usando scroll-marker-group e estilizar os botóns usando o posicionamento da áncora para colocalos exactamente onde queremos.
.carrusel { overflow-x: auto; grupo de marcadores de desprazamento: despois; /* Crea o contenedor para puntos */
/* Crear os botóns */ &::botón de desprazamento (final en liña),&::botón de desprazamento (inicio en liña) { contido: " "; posición: absoluta; /* Usa o posicionamento da áncora para centralos */ posición-áncora: --carrusel; arriba: áncora (centro); }
/* Crear os marcadores nos nenos */ div { &::marcador de desprazamento { contido: " "; ancho: 24px; borde-raio: 50%; cursor: punteiro; } /* Resaltar o marcador activo */ &::scroll-marker:target-current { fondo: branco; } } }
Demostración: o meu experimento creando un carrusel exclusivamente a partir de HTML e CSS, usando o posicionamento da áncora para colocar os botóns.
Vexa o Pen Carousel Pure HTML e CSS [forked] de utilitybend.
Demostración: unha nova versión do control deslizante da tenda web que usa attr() para incorporar imaxes de fondo de forma dinámica aos marcadores.
Vexa o remake do control deslizante de Pen Webshop en CSS [forked] por utilitybend. Consultas estatais: Cousa pegajosa atascada? Cousa rápida quebrada? Durante moito tempo, carecemos da capacidade de saber se unha "cousa pegajosa está pegada" ou se un "elemento rápido se rompe" sen depender dos hacks de IntersectionObserver. Chrome 133 introduciu consultas de estado de desprazamento, o que nos permite consultar estes estados de forma declarativa. Ao establecer o tipo de contenedor: estado de desprazamento, agora podemos dar estilo aos nenos en función de se están atascados, enganchados ou desbordados. Esta é unha mellora masiva da "calidade de vida" que agardaba ansiosamente desde o CSS Day 2023. Mesmo evolucionou moito xa que tamén podemos ver a dirección do pergamiño, encantador! Por un exemplo sinxelo: por fin podemos aplicar unha sombra a unha cabeceira só cando estea realmente pegada á parte superior da ventana gráfica: .header-container { tipo de contedor: estado de desprazamento; posición: pegajosa; arriba: 0;
cabeceira { transición: caixa-sombra 0.5s ease-out; /* A consulta comproba o estado do contedor */ @container scroll-state (atascado: arriba) { caixa-sombra: rgba(0, 0, 0, 0,6) 0px 12px 28px 0px; } } }
Demostración: un encabezado pegajoso que só aplica unha sombra cando está realmente atascado.
Vexa as cabeceiras Pen Sticky coa consulta de estado de desprazamento, comprobando se o elemento adhesivo está atascado [obstruído] por utilitybend.
Demostración: unha lista temática de Pokémon que usa consultas de estado de desprazamento combinadas co posicionamento da áncora para mover un marco sobre o personaxe capturado actualmente.
Vexa a consulta de estado de desprazamento do bolígrafo para comprobar que elemento se captura con CSS, versión de Pokemon [forked] por utilitybend. Ergonomía optimizada: lóxica en CSS A sección "Ergonomía optimizada" de CSS Wrapped destaca funcións que fan que os nosos fluxos de traballo sexan máis intuitivos. Tres características destacan como transformadoras para a forma en que escribimos a lóxica:
Declaracións if()Finalmente estamos recibindo condicionais en CSS. A función if() actúa como un operador ternario para follas de estilo, o que nos permite aplicar valores baseados nos medios, soporte ou consultas de estilo en liña. Isto reduce a necesidade de bloques @media detallados para cambios de propiedade única. @function functions Finalmente podemos mover algunha lóxica a un lugar diferente, dando como resultado algúns ficheiros máis limpos, unha característica de calidade de vida real. sibling-index() e sibling-count()Estas funcións de conta de árbores solucionan o problema de escalonar animacións ou elementos de estilo en función do tamaño da lista. Como explorei en Estilizar irmáns con CSS nunca foi tan fácil, isto elimina a necesidade de codificar propiedades personalizadas (como --index: 1) no noso HTML.
Exemplo: cálculo de esquemas Agora podemos escribir fórmulas matemáticas concisas. Por exemplo, escalonar unha animación para as tarxetas que entran na pantalla faise trivial: .card-container > * { animación: revelar 0,6 s para adiante; /* Non hai máis variables manuais --index! */ retardo de animación: calc(índice de irmáns () * 0,1 s); }
Incluso experimentei co uso destas funcións xunto coa trigonometría para colocar elementos nun círculo perfecto sen JavaScript.
Demostración: animacións de tarxetas asombrosas de forma dinámica.
Vexa as tarxetas Pen Stagger usando sibling-index() [forked] por utilitybend.
Demostración: colocar elementos nun círculo perfecto mediante o índice de irmáns, o número de irmáns e a nova función CSS @function.
Vexa o bolígrafo O círculo usando sibling-index, sibling-count e funcións [forked] de utilitybend. A miña lista de tarefas CSS: funcións que non podo esperar para probar Mentres estiven ocupado esculpindo seleccións e transicións, o informe "CSS Wrapped 2025" está cheo de outras cousas que aínda non tiven a oportunidade de activar en CodePen. Estes están en primeiro lugar na miña lista para os meus próximos experimentos: Consultas de contedores ancorados Usei CSS Anchor Positioning para os botóns da miña demostración do carrusel, pero "CSS Wrapped" destaca unevolución deste: Consultas de contedores ancorados. Isto resolve un problema que todos tivemos coas informacións sobre ferramentas: se o navegador voltea a información sobre ferramentas de arriba a abaixo por mor das limitacións de espazo, a "frecha" adoita estar apuntando no camiño incorrecto. Coas consultas de contedores ancoradas (@container anchored(fallback: flip-block)), podemos estilo do elemento en función da posición de reserva que escolleu o navegador. Grupos de transición de vistas anidadas As transicións de vista foron unha revolución, pero viñeron cunha compensación específica: aplanaron a árbore de elementos, que moitas veces rompían as transformacións 3D ou desbordaban: clip. Sempre tiven a sensación de que lle faltaba algo, e esta podería ser só a resposta. Usando view-transition-group: nearest, finalmente podemos aniñar grupos de transición entre si. Isto permítenos manter os efectos de recorte ou as rotacións 3D durante unha transición, algo que antes era imposible porque os elementos se elevaban ata o nivel superior. .card img { view-transition-name: foto; ver-grupo-transición: máis próximo; /* Mantéñao aniñado! */ }
Tipografía e formas Finalmente, o ergonómico en min está ansioso por probar Text Box Trim, que promete eliminar ese molesto espazo en branco adicional por riba e por debaixo do contido do texto (o principal) para finalmente lograr un aliñamento vertical perfecto. E para o lado creativo, a forma de esquina e a función shape() están abrindo deseños non rectangulares, permitindo "escuadrículas" e camiños complexos que responden a variables CSS. Dito isto, non podo esperar a ter un deseño cheo de esquilos! Un futuro esperanzador Estamos asistindo a un mundo no que CSS se está facendo capaz de manexar a lóxica, o estado e as interaccións complexas que antes pertencían a JavaScript. Funcións como moveBefore (preservar o estado DOM para iframes/vídeos) e attr() (usando tipos máis aló das cadeas para cores e cuadrículas) consolidan aínda máis esta realidade. Aínda que algunhas destas funcións son actualmente experimentais ou específicas para Chrome, o impulso é innegable. Debemos esperar un apoio continuo en todos os navegadores mediante iniciativas como Interop para garantir que estas capacidades se convertan na liña de base. Dito isto, ter motores de navegador é tan importante como ter todas estas incribles funcións en "Chrome primeiro". Estas novas funcións deben ser discutidas, retocadas e probadas antes de chegar aos navegadores. É un momento fantástico para entrar en CSS. Xa non somos só documentos de estilo; estamos a crear aplicacións dinámicas, ergonómicas e robustas cun kit de ferramentas nativo máis potente que nunca. Seguimos con esta nova era e difundimos. Isto está envolto en CSS!
