CSS finalizado em 2025 – Revista Smashing

Se eu dividisse as evoluções do CSS em categorias, iríamos muito além dos dias em que simplesmente pedíamos border-radius sentir como se estivéssemos 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 finalizado em 2025” não é apenas uma lista de recursos; é um manifesto para 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 – vejo-me 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 Chromevisto através das lentes de meus experimentos recentes e 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, nomes de bicicletas como e e, finalmente, chegar a uma solução que reutiliza o existente elemento.

A introdução de appearance: base-select é uma base sólida. Isso nos permite personalizar totalmente o

elemento – incluindo o botão e a lista suspensa (via ::picker(select)) — usando CSS padrão. Crucialmente, isso é construído com o aprimoramento progressivo em mente. Ao agrupar nossos estilos em uma consulta de recursos, garantimos uma experiência perfeita em todos os navegadores.

Podemos aceitar esse novo comportamento sem quebrar navegadores mais antigos:

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

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 O elemento pode clonar conteúdo rico (como um ícone de Pokébola) de uma opção diretamente no botão.

Este recurso por si só sinaliza uma grande mudança na forma como construiremos formulários, reduzindo dependências e dívidas técnicas.

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 de ::scroll-marker e ::scroll-button() pseudo-elementos mudam 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 estilize os botões usando o posicionamento da âncora para colocá-los exatamente onde queremos.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

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-stateagora podemos definir o estilo dos filhos com base no fato de eles estarem 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 apenas quando na verdade está grudado no topo da janela de visualização:

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: 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.

• 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.

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:

1. if() Declarações
Finalmente estamos obtendo condicionais em CSS. O if() function atua como um operador ternário para folhas de estilo, permitindo-nos aplicar valores baseados em mídia, suporte ou consultas de estilo inline. Isso reduz a necessidade de verboso @media blocos para alterações de propriedade única.
2. @function funções
Podemos finalmente mover alguma lógica para um local diferente, resultando em alguns arquivos mais limpos, um verdadeiro recurso de qualidade de vida.
3. sibling-index() e sibling-count()
Essas funções de contagem de árvores resolvem o problema de animações escalonadas ou de estilização 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 > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}

Até experimentei usar essas funções junto com trigonometria para colocar itens em um círculo perfeito sem qualquer JavaScript.

• Demonstração: Colocando itens em um círculo perfeito usando sibling-index, sibling-counte o novo CSS @function recurso.

Minha lista de tarefas CSS: recursos que mal posso esperar para experimentar

Embora eu tenha estado ocupado esculpindo seleções e transições, o relatório “CSS Wrapped 2025” está repleto de outras novidades que ainda não tive a oportunidade 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 uma evolução disso: Consultas de contêineres ancorados. 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 substituta 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: nearestpodemos 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.

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

Tipografia e Formas

Finalmente, o ergonomista que há em mim está ansioso para tentar Corte da caixa de textoque 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, corner-shape e 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 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) cimentam 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!