- Uma lista prática com recursos de CSS/HTML adicionados recentemente ou com suporte ampliado ao longo deste ano, cobrindo desde transições de UI e formulários até tipografia e CSS funcional
- Entre os destaques estão recursos novos como transição de tamanho para palavras-chave como
auto, HTML popover/invoker e CSS @function·if(); como muitos ainda têm suporte inicial focado no Chrome, é preciso adotar uma estratégia de aperfeiçoamento progressivo
- Recursos como entradas com expansão automática via
field-sizing, Select customizado, text-wrap: balance/pretty, easing com linear() e caminhos com shape() elevam facilmente a qualidade visual e de usabilidade
- Ferramentas de controle de valores e fluxo como
attr() aprimorado, controle de ordem de leitura com reading-flow e calc-size() ampliam o escopo de design que pode ser resolvido apenas com CSS
- Vale acompanhar Masonry,
random(), margin-trim e expansões de View Transitions, que ainda estão em padronização ou ampliação de suporte, enquanto Container Queries, :has(), dvh etc. já se consolidaram como base do trabalho prático
Animate to Auto
- Recurso que permite transições suaves entre valor fixo ↔︎
auto em elementos com altura de conteúdo variável
- Declarando
interpolate-size: allow-keywords globalmente, passam a ser permitidas transições como height: 0 → auto
- Ou, sem
interpolate-size, é possível fazer a transição com calc-size(), usando height: calc-size(auto, size)
- A vantagem é eliminar alternativas frágeis como truques com
max-height ou medição fora da tela + animação em JS, preservando o layout nativo
- O suporte atual é centrado no Chrome e, como animação é algo bom de ter, o uso com PE (Progressive Enhancement) é o mais indicado
Popovers & Invokers
- O atributo
popover é um recurso HTML que dá a qualquer elemento um comportamento de abrir/fechar e uma API JS correspondente, pertencendo à categoria de overlays leves, diferente de modais
- Com atributos Invoker, é possível fazer o controle declarativo sem JS
- A importância está em oferecer por padrão, no nível do HTML, aspectos como acessibilidade, teclado e gerenciamento de foco, reduzindo o risco de falhas na implementação
- O suporte a Popover é amplo, enquanto Invoker é prioritariamente no Chrome, com diferenças em recursos específicos como
popover="hint"
- Como existe polyfill, é viável adotar em UX essencial quando necessário
@function
- Introduz funções definidas pelo usuário no sistema de funções de valores do CSS, permitindo abstrair lógica compartilhada em formas como
@function --foo(--x) { result: ... }
- Traz ganhos de eliminação de duplicação (DRY) e simplificação das declarações, melhorando leitura e manutenção
- O suporte é prioritário no Chrome; quando fizer sentido, dá para usar um fallback gracioso com
property: fallback e na linha seguinte property: --func()
- Atenção: não é compatível com funções do Sass
if()
- A primeira função de ramificação em nível de valor do CSS, permitindo listar condições
media(), supports() e style() como em um switch, retornando o primeiro valor compatível
- Ex.: descrever
grid-template-columns por breakpoint em uma única declaração
- O efeito é melhorar a legibilidade e reduzir repetição, além de combinar bem com
@function customizado
- O suporte é prioritário no Chrome; recomenda-se declarar antes um valor de fallback e aplicar o padrão de PE
field-sizing
- Apresenta a propriedade
field-sizing, em que campos de entrada/edição crescem automaticamente de acordo com o conteúdo
- O caso mais típico é a expansão automática de altura de
<textarea>, mas também pode ser aplicada a UX de redimensionamento inline imediato
- O suporte já existe no Chrome e deve chegar ao Safari; se necessário, pode ser substituído por uma solução leve em JS
- Como é um recurso de melhoria de UX, e não funcionalidade essencial, é adequado para adoção progressiva
Custom Selects
- Permite, com opt-in explícito, não apenas estilizar a aparência do
select, mas também customizar completamente a própria UI aberta de seleção
- Tem excelente PE, porque em ambientes sem suporte há fallback seguro para o
<select> padrão
- O suporte é prioritário no Chrome, com expansão da área de controle via
appearance: base-select e ::picker(select)
text-wrap
text-wrap: balance equilibra o comprimento das linhas em textos grandes, como títulos, enquanto text-wrap: pretty melhora linhas órfãs e a estética também no corpo do texto- O efeito é ganho de legibilidade e qualidade tipográfica, perceptível de imediato sem custo adicional
- O suporte de
balance é amplo; pretty é priorizado em Chrome e Safari, sendo apropriado para PE
linear() easing
- Diferentemente da palavra-chave
linear, a função linear() permite definir curvas de easing precisas com qualquer número de pontos, sendo ótima para criar comportamentos compostos, como bounce
- Enquanto
cubic-bezier() é mais limitado, linear() oferece controle fino de timing e já tem suporte completo
- Quando necessário, é possível usar easing nomeado ou
cubic-bezier() como fallback
shape()
- A função
shape() complementa o path(), que era restrito a pixels e de sintaxe difícil, permitindo descrever caminhos arbitrários com unidades responsivas e propriedades customizadas
- Pode ser usada com
clip-path para mascarar formas arbitrárias e com offset-path para posicionamento/animação ao longo de um caminho, com integração futura prevista com shape-outside
- O suporte está em Chrome e Safari, com Firefox em andamento sob flag; no uso real, recomenda-se projetar fallbacks elegantes
More Powerful attr()
attr() passa a suportar tipagem, permitindo usar valores não textuais, como números e cores, lidos diretamente de atributos HTML como valores CSS- O significado disso é ampliar padrões em que cores de tema, contagens e tamanhos são injetados a partir do markup
- O suporte é prioritário no Chrome; recomenda-se adotar primeiro em reforços visuais, e não em dependências críticas de layout
Reading Flow
- Introdução da propriedade
reading-flow, que corrige logicamente a ordem de navegação por Tab em layouts nos quais a ordem visual e a ordem do código-fonte divergem
- Ao reorganizar um grid, por exemplo, é possível indicar um fluxo de foco compatível com o layout usando algo como
reading-flow: grid-rows
- Isso reduz riscos de acessibilidade com uma única declaração CSS, aumentando a liberdade de layout
- Como o suporte é prioritário no Chrome, recomenda-se evitar reordenações excessivas até haver suporte mais amplo
Coisas para Ficar de Olho
- O layout Masonry ainda está em organização de especificação, e a proposta de
item-flow pode ampliar as possibilidades de disposição além do grid
- A função
random() já é oferecida no Safari e é útil para criar variações visuais mais expressivas
margin-trim é útil, mas continua mais centrado no Safari; sibling-index()/count() já existe no Chrome e é útil para animações em stagger- Há boas notícias para cross-browser com
view-transition-name: match-element; em View Transitions e com o desenvolvimento em andamento no Firefox
- A racionalização de multiplicação/divisão em
calc() com mistura de unidades está perto de passar pelos experimentos, o que pode reduzir a necessidade dos antigos hacks de conversão de tipo
- Também se aponta a ausência de nomenclatura por versão como “CSS4” e é apresentada uma lista de referência com recursos novos dos últimos 5 anos
Ótimas Coisas para Lembrar
- Container Queries & unidades seguem como uma das maiores evoluções de produtividade desde media queries, mantendo posição de fundamento essencial
:has() permite seleção baseada em pai e estado, resolvendo combinações complexas de seletores apenas com CSS e com ampla utilidade prática- View Transitions, Anchor Positioning e Scroll-Driven Animations já chegaram ao Safari, reduzindo a barreira de adoção no mercado
- Unidades adicionais de viewport (dvh etc.) já fazem parte do Baseline, melhorando a estabilidade do viewport em dispositivos móveis
Destaques de código/uso
- Transição de tamanho: usar
interpolate-size: allow-keywords globalmente ou, ao alternar estados, height: calc-size(auto, size) para animar a altura do conteúdo
- Ramificação em grid: concentrar colunas de template por breakpoint em uma única declaração com o padrão
if(media(...): valor; ... else: valor;)
- Custom Select: ativar o picker customizado com
select, ::picker(select) { appearance: base-select }
- Easing com bounce: criar curvas detalhadas de reação/amortecimento com
animation-timing-function: linear( ... 다수 포인트 ... )
- Clip path: montar máscara com forma responsiva baseada em proporção via
clip-path: shape( ... )
Guia de aplicação prática
- Em itens com grande variação de suporte entre navegadores, a adoção deve priorizar fallbacks e considerar o efeito gerado versus o custo de entrada
- Animações, tipografia e efeitos visuais são bons candidatos a PE; já itens como ordem de foco/Tab, por serem centrais para acessibilidade, devem ser adotados após suporte mais amplo
- Funções próprias e ramificações oferecem maior ROI quando acompanhadas de documentação de regras de design e integração com tokens e propriedades customizadas, virando padrão compartilhado da equipe
- Melhorias de UX em formulários (
field-sizing, Custom Select) trazem ganhos perceptíveis, especialmente em cenários mobile-first
Conclusão
- O CSS moderno em 2025 é um ano em que funções de valor, ramificação lógica e controle de formas ampliam o quanto “dá para fazer mais só com CSS”, e isso tem alto valor quando adotado de forma gradual com estratégia de PE
- Um roteiro realista é manter a base em fundamentos como Container Queries,
:has() e unidades de viewport e priorizar recursos de alto impacto como animate-to-auto·if()·shape()
3 comentários
O CSS agora praticamente virou uma linguagem. Já ficou capaz de permitir implementações lógicas até certo ponto... Fico até me perguntando se ainda dá para chamar isso de folha de estilo.
Vai ter um monte de recursos bons; coisas que até agora precisavam ser implementadas com JavaScript.
O CSS realmente melhorou muito.