Se eu dividisse as evoluções do CSS em categorias, iríamos muito além dos dias em que simplesmente pedíamos border-radius para parecer que estávamos vivendo no futuro. Atualmente, estamos vivendo um momento em que a plataforma está nos entregando ferramentas que não apenas ajustam a camada visual, mas redefinem fundamentalmente a forma como arquitetamos interfaces. Achei que o número de recursos anunciados em 2024 não poderia ser superado. Nunca estive tão felizmente errado.
O “CSS Wrapped 2025” da equipe do Chrome não é apenas uma lista de recursos; é um manifesto por uma web dinâmica e nativa. Como alguém que passou alguns anos documentando essas evoluções – desde a definição da era “CSS5” até as complexidades dos utilitários de layout modernos – me vejo olhando para o encerramento deste ano com um enorme sentimento de entusiasmo. Estamos vendo uma mudança em direção à “Ergonomia Otimizada” e às “Interações de próxima geração” que nos permitem parar de lutar contra o código e começar a esculpir interfaces em seu estado natural.
Neste artigo, você pode encontrar uma visão abrangente dos recursos de destaque do relatório do Chrome, vistos através das lentes de meus experimentos recentes e das esperanças para o futuro da plataforma.
A revolução dos componentes: finalmente, uma seleção nativa personalizável
Durante anos, confiamos em pesadas bibliotecas JavaScript para estilizar menus suspensos, um “problema de décadas” que a plataforma finalmente resolveu. Conforme detalhei em meu mergulho profundo na história da seleção personalizável (e artigos relacionados), este tem sido um longo caminho envolvendo Open UI, eliminando nomes como
A fantástica adição de permitir conteúdo rico dentro de opções, como imagens ou bandeiras, é muito divertida. Podemos criar todos os tipos de seleções hoje em dia:
Demonstração: criei uma demonstração de Poké-aventura mostrando como o novo elemento
Veja o Pen Um select customizável com imagens dentro das opções e o conteúdo selecionado [bifurcado] pelo utilitybend.
Demonstração: uma visão abrangente do estilo do select apenas com pseudoelementos.
Veja a seleção personalizável Pen A com apenas pseudo-elementos [bifurcados] pelo utilitybend.
Demonstração: Ou você pode aumentar ainda mais com esta demonstração de seleção de menu usando optgroups.
Veja a caneta Um menu de seleção real com optgroups [bifurcados] por utilitybend. Este recurso por si só sinaliza uma grande mudança na forma como construiremos formulários, reduzindo dependências e dívidas técnicas. Marcadores de rolagem e a morte do carrossel JavaScript A criação de carrosséis tem sido historicamente um ponto de atrito entre desenvolvedores e clientes. Os clientes os adoram, os desenvolvedores temem o JavaScript necessário para torná-los acessíveis e com bom desempenho. A chegada dos pseudoelementos ::scroll-marker e ::scroll-button() altera totalmente essa dinâmica. Esses recursos nos permitem criar pontos de navegação e botões de rolagem puramente com CSS, vinculados nativamente ao contêiner de rolagem. Como escrevi no meu blog, este foi Amor ao primeiro slide. A capacidade de criar um controle deslizante totalmente funcional e acessível sem uma única linha de JavaScript não é apenas conveniente; é um triunfo para o desempenho. Existem algumas preocupações de acessibilidade em torno desse recurso e, embora sejam válidas, pode haver uma maneira de nós, desenvolvedores, fazê-lo funcionar. O bom é que todas essas mudanças na interface do usuário estão tornando tudo muito mais fácil do que a manipulação de DOM personalizado e o arrastamento de tags ária, mas discordo… Agora podemos agrupar marcadores automaticamente usando scroll-marker-group e estilizar os botões usando posicionamento de âncora para colocá-los exatamente onde queremos.
.carrossel { estouro-x: automático; grupo de marcadores de rolagem: depois; /* Cria o contêiner para pontos */
/* Cria os botões */ &::botão de rolagem (final embutido),&::botão de rolagem(início embutido) { conteúdo: " "; posição: absoluta; /* Usa o posicionamento da âncora para centralizá-los */ âncora de posição: --carousel; topo: âncora(centro); }
/* Cria os marcadores nos filhos */ div { &::marcador de rolagem { conteúdo: " "; largura: 24px; raio da fronteira: 50%; cursor: ponteiro; } /* Destaca o marcador ativo */ &::marcador de rolagem:alvo-atual { fundo: branco; } } }
Demonstração: Meu experimento criando um carrossel puramente em HTML e CSS, usando posicionamento de âncora para posicionar os botões.
Veja o Pen Carousel Pure HTML e CSS [bifurcado] do utilitybend.
Demonstração: um remake de controle deslizante elegante da Webshop usando attr() para puxar imagens de fundo dinamicamente para os marcadores.
Veja o remake do controle deslizante liso do Pen Webshop em CSS [bifurcado] por utilitybend. Consultas de estado: coisa pegajosa presa? Coisa mal-humorada estalou? Por muito tempo, não tivemos a capacidade de saber se uma “coisa pegajosa está presa” ou se um “item rápido está quebrado” sem depender dos hacks do IntersectionObserver. O Chrome 133 introduziu consultas de estado de rolagem, permitindo-nos consultar esses estados de forma declarativa. Ao definir container-type: scroll-state, agora podemos estilizar filhos com base em se eles estão presos, quebrados ou transbordando. Esta é uma grande melhoria na “qualidade de vida” que tenho esperado ansiosamente desde o CSS Day 2023. Até evoluiu muito já que também podemos ver a direção do scroll, lindo! Para um exemplo simples: podemos finalmente aplicar uma sombra a um cabeçalho somente quando ele estiver realmente grudado no topo da janela de visualização: .header-container { tipo de contêiner: estado de rolagem; posição: pegajosa; superior: 0;
cabeçalho { transição: box-shadow 0,5s de atenuação; /* A consulta verifica o estado do contêiner */ @container scroll-state(preso: topo) { sombra da caixa: rgba (0, 0, 0, 0,6) 0px 12px 28px 0px; } } }
Demonstração: um cabeçalho fixo que só aplica uma sombra quando está realmente preso.
Veja os cabeçalhos Pen Sticky com consulta de estado de rolagem, verificando se o elemento sticky está preso [bifurcado] pelo utilitybend.
Demonstração: uma lista com tema Pokémon que usa consultas de estado de rolagem combinadas com posicionamento de âncora para mover um quadro sobre o personagem atualmente capturado.
Consulte a consulta Pen Scroll-state para verificar qual item é capturado com CSS, versão do Pokémon [bifurcada] por utilitybend. Ergonomia Otimizada: Lógica em CSS A seção “Ergonomia Otimizada” do CSS Wrapped destaca recursos que tornam nossos fluxos de trabalho mais intuitivos. Três recursos se destacam como transformadores na forma como escrevemos lógica:
Instruções if()Finalmente estamos obtendo condicionais em CSS. A função if() atua como um operador ternário para folhas de estilo, permitindo-nos aplicar valores baseados em consultas de mídia, suporte ou estilo inline. Isso reduz a necessidade de blocos @media detalhados para alterações de propriedades únicas. @funções de função Podemos finalmente mover alguma lógica para um local diferente, resultando em alguns arquivos mais limpos, um recurso real de qualidade de vida. sibling-index() e sibling-count() Essas funções de contagem de árvores resolvem o problema de animações escalonadas ou estilos de itens com base no tamanho da lista. Como explorei em Estilizar irmãos com CSS nunca foi tão fácil, isso elimina a necessidade de codificar propriedades personalizadas (como --index: 1) em nosso HTML.
Exemplo: Calculando Layouts Agora podemos escrever fórmulas matemáticas concisas. Por exemplo, escalonar uma animação para cartas que entram na tela torna-se trivial: .card-container > * { animação: revela avanço de 0,6s; /* Chega de variáveis --index manuais! */ atraso de animação: calc(índice-irmão() * 0,1s); }
Até experimentei usar essas funções junto com trigonometria para colocar itens em um círculo perfeito sem qualquer JavaScript.
Demonstração: escalonamento de animações de cartas dinamicamente.
Veja os cartões Pen Stagger usando sibling-index() [forked] por utilitybend.
Demonstração: Colocando itens em um círculo perfeito usando índice de irmãos, contagem de irmãos e o novo recurso CSS @function.
Veja o Pen The Circle usando índice de irmãos, contagem de irmãos e funções [bifurcadas] por utilitybend. Minha lista de tarefas CSS: recursos que mal posso esperar para experimentar Embora eu esteja ocupado esculpindo seleções e transições, o relatório “CSS Wrapped 2025” está repleto de outras novidades que ainda não tive a chance de acessar no CodePen. Estes estão no topo da minha lista para meus próximos experimentos: Consultas de contêineres ancorados Usei CSS Anchor Positioning para os botões em minha demonstração de carrossel, mas “CSS Wrapped” destaca umevolução disso: consultas de contêiner ancoradas. Isso resolve um problema que todos nós tivemos com dicas de ferramentas: se o navegador virar a dica de cima para baixo devido a restrições de espaço, a “seta” muitas vezes permanece apontando para o lado errado. Com consultas de contêiner ancoradas (@container Anchored(fallback: flip-block)), podemos estilizar o elemento com base na posição de fallback que o navegador realmente escolheu. Grupos de transição de visualização aninhada As Transições de Visualização foram uma revolução, mas vieram com uma compensação específica: achataram a árvore de elementos, o que muitas vezes quebrava as transformações 3D ou o overflow: clip. Sempre tive a sensação de que estava faltando alguma coisa e essa poderia ser a resposta. Usando view-transition-group: mais próximo, podemos finalmente aninhar grupos de transição uns dentro dos outros. Isso nos permite manter efeitos de recorte ou rotações 3D durante uma transição — algo que antes era impossível porque os elementos eram elevados ao nível superior. .cartão img { nome da transição de visualização: foto; visualizar grupo de transição: mais próximo; /* Mantenha-o aninhado! */ }
Tipografia e Formas Finalmente, o ergonomista em mim está ansioso para experimentar o Text Box Trim, que promete remover aquele irritante espaço em branco extra acima e abaixo do conteúdo do texto (o principal) para finalmente alcançar o alinhamento vertical perfeito. E para o lado criativo, o corner-shape e a função shape() estão abrindo layouts não retangulares, permitindo “quadrados” e caminhos complexos que respondem a variáveis CSS. Dito isto, mal posso esperar para ter um design cheio de esquilos! Um futuro esperançoso Estamos testemunhando um mundo onde o CSS está se tornando capaz de lidar com lógica, estado e interações complexas que antes pertenciam ao JavaScript. Recursos como moveBefore (preservando o estado DOM para iframes/vídeos) e attr() (usando tipos além de strings para cores e grades) consolidam ainda mais essa realidade. Embora alguns desses recursos sejam atualmente experimentais ou específicos do Chrome, o impulso é inegável. Devemos esperar suporte contínuo em todos os navegadores por meio de iniciativas como a Interop para garantir que esses recursos se tornem a base. Dito isto, ter mecanismos de navegador é tão importante quanto ter todos esses recursos incríveis no “Chrome first”. Esses novos recursos precisam ser discutidos, ajustados e testados antes mesmo de chegar aos navegadores. É um momento fantástico para entrar no CSS. Não estamos mais apenas estilizando documentos; estamos criando aplicativos dinâmicos, ergonômicos e robustos com um kit de ferramentas nativo mais poderoso do que nunca. Vamos seguir em frente com esta nova era e espalhar a palavra. Isto é CSS embrulhado!
