• css
  • css2026
  • interop
  • compatibilidade
  • libs
  • frontend

CSS em 2026 tá substituindo biblioteca. E isso é bom demais.

Por muito tempo, a resposta pra "dá pra fazer só com CSS?" era quase sempre "não". Anchor Positioning, if(), @scope, Masonry nativo — o CSS de 2026 veio pra mudar esse hábito.

Letícia Vargas

Por muito tempo, a resposta pra "dá pra fazer só com CSS?" era quase sempre "não". Aí tu instalavas uma lib. Depois outra. O package.json crescia, e o problema continuava sendo o mesmo: o CSS simplesmente não conseguia fazer o que tu precisavas.

Isso mudou de vez.

O CSS de hoje substitui dependências que tu instalavas no automático, e faz isso com suporte real nos browsers, sem gambiarra. Parte disso aconteceu porque os browsers decidiram parar de brigar. O Interop é um esforço conjunto entre Chrome, Firefox e Safari para implementar as mesmas features de forma consistente, e vem funcionando muito bem: quando uma feature entra no acordo, a janela entre "Chrome tem" e "posso usar em produção" fecha muito mais rápido.

Deixa eu te mostrar alguns exemplos.

Anchor Positioning: adeus Popper.js

Quantas vezes tu instalaste uma lib só pra posicionar um tooltip corretamente? Popper.js, Floating UI, algum wrapper de React... tudo isso existia pra resolver um problema que o CSS simplesmente não conseguia antes.

O CSS Anchor Positioning muda isso:

.botao-ajuda {
  anchor-name: --ancora-ajuda;
}

.tooltip {
  position: absolute;
  position-anchor: --ancora-ajuda;
  position-area: bottom center;
  position-try-fallbacks: flip-block, flip-inline;
}

Tu defines um nome de âncora pro elemento de referência, e o tooltip sabe onde se colocar, inclusive com fallbacks automáticos pra não sair da tela. Zero JavaScript.

Suporte: Chrome 125+, Firefox 147+ e Safari 26+. Pode usar agora. CanIUse

Popover API: modais e tooltips sem JavaScript

Antes, um tooltip acessível exigia evento de foco, gestão de aria-expanded, listener de Escape, tudo na mão. Hoje:

<button popovertarget="dica">?</button>
<div id="dica" popover>Explicação aqui</div>

O browser cuida do toggle, do Escape, do gerenciamento de foco e do aria-expanded automaticamente. Combinada com Anchor Positioning, a dupla substitui o que antes exigia uma lib inteira de componentes de overlay.

Suporte: Baseline 2024, cross-browser. CanIUse

@scope: estilos com escopo sem guerra de especificidade

Um dos problemas mais irritantes do CSS é que os estilos vazam. Tu crias um .card p e sem querer afetas todos os parágrafos dentro de qualquer card no projeto. Aí vem BEM, CSS Modules, styled-components...

@scope (.card) {
  p {
    font-size: 0.875rem;
    color: #555;
  }

  h2 {
    font-size: 1.25rem;
  }
}

Os estilos dentro do @scope só afetam elementos dentro do .card. Sem criar nomes de classe longos tipo .card__content__title--highlighted só pra evitar conflito. Firefox 146 entrou no início de 2026 e fechou o quadro.

Suporte: Chrome, Firefox e Safari. Baseline Newly Available. CanIUse

Masonry nativo: o layout Pinterest sem JavaScript

O layout Masonry, aquele estilo onde os itens se encaixam em colunas sem altura fixa, sempre precisou de JavaScript ou de hacks de Flexbox que funcionavam até não funcionar mais. A spec finalmente se decidiu pelo nome grid-lanes:

.galeria {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Três linhas de CSS substituindo Masonry.js. Safari 26 já tem em produção, Chrome e Firefox chegam em breve. Vale usar hoje com @supports como progressive enhancement e acompanhar, porque quando o suporte completar vai ser um passo a menos em qualquer projeto com galeria. CanIUse

CSS if(): lógica condicional direto nas propriedades

Sim, CSS agora tem if(). E muda bastante a forma de pensar componentes com variantes.

.botao {
  background: if(style(--variante: primario): #0057ff; else: #e5e7eb);
  color: if(style(--variante: primario): white; else: #111);
}

Antes, pra ter um botão primário e um secundário a partir do mesmo elemento, criavamos duas classes, JS pra alternar estilos, ou montavamos um design system com lógica de variante em alguma camada acima do CSS. Com if(), a lógica mora onde sempre deveria morar: na própria propriedade.

Isso é especialmente poderoso em design systems, onde um componente pode ter quatro, cinco variantes e cada uma acaba virando uma classe separada só pra sobrescrever duas ou três propriedades. O if() resolve isso de forma muito mais limpa.

Suporte: Chrome 137+ já tem. Firefox e Safari ainda não. Vale estudar agora e acompanhar. CanIUse

attr() com tipos: atributos HTML direto nos valores CSS

A função attr() existe faz anos, mas era limitada a valores de texto. A versão com tipos muda o jogo:

.progresso {
  width: attr(data-valor type(<number>) em);
}
<div class="progresso" data-valor="3"></div>

O que antes exigia JS pra ler o atributo, converter pra número e aplicar como estilo, agora acontece direto no CSS. Definimos o dado no HTML como atributo e o CSS usa esse valor diretamente, com conversão de tipo incluída. Funciona com números, comprimentos, cores, percentuais.

O caso de uso mais óbvio é exatamente esse: barras de progresso, indicadores de nível, qualquer coisa onde o valor vem do HTML e precisa virar um tamanho ou cor no CSS. Mas a implicação maior é que o HTML volta a ser a fonte de verdade sem precisar de uma camada de JavaScript fazendo a ponte.

Suporte: Chrome 133+ e Edge já têm. Firefox e Safari ainda não. CanIUse

E aqui aparece uma diferença importante entre as duas: o attr() já está no Interop 2026. Isso significa que Firefox e Safari estão ativamente trabalhando pra fechar o suporte ainda esse ano, o que vai vir rápido. O if() ainda não entrou no acordo, então fica no ritmo de cada browser, sem prazo claro. São dois estágios diferentes de maturidade, e é exatamente isso que o Interop explica: não é só "qual browser tem", mas "qual browser se comprometeu a ter".

Uma observação que vale repetir: ferramentas de IA ainda alucinam bastante em CSS, e não é culpa delas, é estrutural. Os modelos têm defasagem natural de treinamento, e o CSS evoluiu muito nos últimos dois anos. O resultado são sugestões com sintaxe desatualizada ou workarounds que hoje não fazem mais sentido. O MDN e o Can I Use continuam sendo as referências mais confiáveis pra checar o que é real antes de colocar algo em produção.

O CSS não virou onipotente de uma hora pra outra. Mas o ponto de virada já passou: as features que substituem libs reais estão chegando com suporte cross-browser de verdade, e o Interop é o que faz isso acontecer no ritmo certo.

Algumas referências para continuar acompanhando o tema:

Atualizado em 03 de jul. de 2026

10