1) Container Queries e Layout Adaptativo

As container queries trazem uma mudança de paradigma: estilos responsivos com base no tamanho do contêiner de um elemento, não do viewport. Isso facilita componentes reutilizáveis que se adaptam conforme o espaço disponível, sem depender de múltiplos pontos de interrupção globais.

Como usar? Defina o contêiner com container-type e aplique regras com @container para ajustar propriedades como font-size, padding ou espaçamento conforme o inline-size (largura do contêiner).

// CSS de demonstração
.card {
  container-type: inline-size; /* o elemento é o contêiner responsivo */
  padding: 1rem;
  border-radius: .75rem;
  background: color-mix(in oklab, var(--surface) 70%, white 30%);
}
@container (min-width: 40em) {
  .card {
    padding: 1.25rem;
    font-size: 1.05rem;
  }
}
        

2) Color Functions: color-mix e paletas dinâmicas

As funções de cor permitem compor paletas mais consistentes e acessíveis. O color-mix facilita combinar tons para gerar variações sistemáticas, enquanto color-contrast pode orientar escolhas de contraste entre foreground e background (quando suportado pelo navegador).

:root {
  --primary: #4f46e5;
}
.button {
  /* mistura 70% do tom base com 30% branco para criar uma versão mais clara */
  background: color-mix(in oklab, var(--primary) 70%, white 30%);
  color: white;
}
        

3) Cascade Layers: organização de CSS com camadas explícitas

Cascade Layers (camadas) ajudam a estruturar estilos de forma previsível, reduzindo conflitos entre estilos de base, componentes e utilitários. O uso de @layer permite controlar a ordem de aplicação sem depender apenas da ordem no arquivo.

@layer reset, base, components, utilities;

:root { --radius: 8px; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}
@layer base {
  html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto; }
}
@layer components {
  .card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem;
  }
}
@layer utilities {
  .mt-2 { margin-top: 0.5rem; }
}
        

4) @property: propriedades CSS com tipagem estática

O at-rule @property permite declarar propriedades CSS com tipo, herança e valor inicial. Isso habilita transições e validação de valores para propriedades personalizadas, abrindo caminho para animações mais estáveis e previsíveis.

@property --radius {
  syntax: '';
  inherits: true;
  initial: 6px;
}
.card {
  border-radius: var(--radius);
}