CSS em 2026: novos recursos que estão remodelando o desenvolvimento front-end

• A evolução da plataforma CSS chegou a um ponto em que até animações e interações complexas podem ser implementadas sem JavaScript
• Os recursos recém-adicionados oferecem suporte a customização de <select>, detecção de estado de rolagem, cálculo entre elementos irmãos e estilização baseada em atributos
• Com appearance: base-select e ::picker(select), é possível ter controle total de estilo mantendo acessibilidade e comportamento nativo
• Com sibling-index() e attr(), dá para implementar de forma concisa animações e estilização de cores orientadas por dados
• Essas mudanças representam uma mudança de paradigma no desenvolvimento front-end, reduzindo a dependência de JavaScript e aumentando a acessibilidade e a manutenibilidade

---

Visão geral dos novos recursos do CSS

• Em 2026, o CSS passa a contar com diversos novos recursos para interação e animação
  • appearance: base-select coloca o elemento <select> em um modo customizável
  • select::picker(select) é um pseudo-elemento que representa a superfície do dropdown e permite estilizar sombra, borda, espaçamento etc.
  • selectedcontent estiliza a área de exibição da opção selecionada
• Os recursos relacionados à rolagem também foram bastante ampliados
  • ::scroll-button() cria automaticamente botões de navegação lateral em contêineres roláveis
  • ::scroll-marker e ::scroll-marker-group funcionam como pontos de paginação ou indicadores visuais
  • scroll-target-group e :target-current destacam automaticamente o link correspondente à seção visível no momento
• Também foram adicionadas container queries baseadas no estado de rolagem
  • Com container-type: scroll-state e @container scroll-state(snapped: x), é possível alterar estilos conforme a posição de rolagem
• Foram adicionadas funções de contagem na árvore e referência tipada a atributos
  • sibling-index() e sibling-count() retornam a ordem e a quantidade de elementos irmãos
  • attr() permite ler valores de atributos como tipos como cor e usá-los diretamente em propriedades CSS
• @starting-style é uma sintaxe experimental para definir o estilo no ponto inicial da animação

Demo: customização de <select> nativo em HTML

• O elemento <select> oferece acessibilidade e estrutura semântica, mas antes tinha controle de estilo limitado
• Com os novos recursos de CSS, tornou-se possível fazer customização completa sem JavaScript
  • Ativar o modo customizável com appearance: base-select
  • Definir o estilo da superfície do dropdown com select::picker(select)
• Recursos tratados automaticamente pelo navegador
  • Gerenciamento de overflow: rolagem automática para evitar que o dropdown saia da tela
  • Ajuste de posicionamento da âncora: escolha automática da melhor posição conforme o espaço disponível na viewport
  • Gerenciamento de foco e navegação por teclado: suporte às teclas Arrow, Enter e Escape
  • Opções com conteúdo rico: inclusão de conteúdo estruturado como ícones e rótulos
• Em navegadores sem suporte, há fallback para o <select> padrão, sem necessidade de polyfill separado

Animação em cascata com sibling-index()

• Implementação de uma animação em que as opções do dropdown deslizam em sequência ao abrir
• sibling-index() retorna a posição do elemento entre os irmãos (a partir de 1)
  • Ex.: a primeira opção tem atraso de 0s, a segunda 0.2s, a terceira 0.4s
• Mesmo ao adicionar ou remover elementos, o tempo é recalculado automaticamente, facilitando a manutenção
• Isso simplifica um processo que antes precisava ser definido manualmente com :nth-child() ou propriedades customizadas

Estilização orientada por dados com attr()

• A versão tipada de attr() permite usar diretamente valores de atributos HTML nos estilos
  • Ex.: o atributo data-bg-color pode ser lido e usado com background-color: attr(data-bg-color color, transparent)
• Ao especificar o tipo do atributo, o navegador faz o parsing corretamente e também permite definir uma cor de fallback
• Isso viabiliza uma estrutura de estilização centrada em dados, na qual basta alterar a cor no HTML sem precisar mexer no CSS

Comparação: dropdown em CSS vs versão em JavaScript

• Implementar o mesmo dropdown em JavaScript exige mais de 150 linhas de código
• A versão em CSS entrega a mesma funcionalidade com um único <select> e alguns atributos
• Acessibilidade nativa, foco e controle por teclado são fornecidos automaticamente no nível da plataforma

O futuro do CSS e a direção do desenvolvimento

• Os novos recursos de CSS permitem construir UIs complexas com código declarativo simples
• Graças aos recursos oferecidos pela própria plataforma, há redução de código duplicado e da dependência de bibliotecas externas
• Na era da IA, essa estrutura simples e declarativa aumenta a estabilidade da geração automatizada de código
• Abordagem recomendada para adoção prática
  • Reavaliar componentes de UI existentes, antes centrados em JavaScript, sob uma abordagem baseada em CSS
  • Realizar testes de acessibilidade em paralelo para verificar compatibilidade com teclado e leitores de tela
  • Monitorar continuamente o suporte dos navegadores e adotar de forma gradual
• Essas mudanças mostram que o CSS está emergindo como a tecnologia central das interações no front-end