O que há de novo na especificação CSS em 2026

O CSS vem evoluindo rápido nos últimos anos. Eis um panorama das features que saíram do "quase lá" para uso seguro em produção.

Container queries

.card-wrapper { container-type: inline-size; }

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Diferente de media queries, que reagem ao tamanho da viewport inteira, container queries reagem ao tamanho do próprio elemento pai — essencial para componentes verdadeiramente reutilizáveis, que se comportam de forma diferente dependendo de onde são colocados.

:has() — o "seletor pai"

/* Estiliza um card apenas se ele contiver uma imagem */
.card:has(img) { padding-top: 0; }

Por anos o CSS não teve como selecionar um elemento com base em seus filhos. O :has() resolve isso e abre espaço para lógica que antes exigia JavaScript.

Subgrid

.item {
  display: grid;
  grid-template-columns: subgrid;
}

Permite que um item de grid herde as colunas (ou linhas) do grid pai, mantendo alinhamento perfeito entre grids aninhados — muito útil em cards com estrutura interna irregular dentro de uma listagem.

Cores em espaços mais amplos (OKLCH)

.elemento { color: oklch(64% 0.19 275); }

O espaço de cor OKLCH representa matizes de forma perceptualmente mais uniforme que HSL, o que facilita gerar variações de uma mesma cor mantendo o brilho percebido consistente.

@layer — camadas de cascata

@layer reset, base, componentes, utilitarios;

@layer base {
  body { margin: 0; }
}

Organiza a ordem de prioridade do CSS de forma explícita, reduzindo a dependência da especificidade de seletores para controlar o que "ganha" no fim.

Vale a pena adotar agora?

Para a maioria dessas features, o suporte em navegadores modernos já é amplo o suficiente para uso em produção — sempre valide a cobertura específica do seu público antes de depender delas como única solução.