CSS moderno: clamp(), aspect-ratio, :has() e mais — CSS moderno, acessibilidade e arquitetura

Funções matemáticas: clamp(), min(), max()

O CSS moderno traz ferramentas que antes exigiam malabarismo (ou JavaScript). Vamos começar pelas que você mais vai usar.

clamp(min, ideal, max) produz um valor fluido que cresce com a tela mas nunca cai abaixo do mínimo nem ultrapassa o máximo. Pense num segurança com dois limites. É a forma moderna de fazer tipografia e espaçamentos responsivos sem encher tudo de media queries:

h1 {
  /* nunca menos de 1.5rem, nem mais de 3rem; cresce com a largura do viewport */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

min(a, b) pega o menor dos valores: width: min(90vw, 600px).
max(a, b) pega o maior: padding: max(16px, 5vw).

Proporções com aspect-ratio

aspect-ratio fixa a relação largura/altura de uma caixa sem truques de padding:

.video {
  width: 100%;
  aspect-ratio: 16 / 9; /* a altura é calculada sozinha */
}

O seletor :has() — o "pai" que faltava

Durante anos você implorou por um "seletor pai" e a resposta era sempre a mesma: não existe. Pois agora existe, e se chama :has().

:has() seleciona um elemento de acordo com seu conteúdo ou seus irmãos. É o primeiro seletor que olha "para baixo", algo que parecia impossível:

/* um cartão que contém uma imagem recebe outro layout */
.cartao:has(img) {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* um label cujo input é inválido é pintado de vermelho */
label:has(+ input:invalid) {
  color: #b91c1c;
}

Container queries: responsivo por contêiner

As media queries olham o viewport; as container queries (@container) reagem ao tamanho do contêiner pai. Assim um mesmo componente se adapta esteja onde estiver:

.painel { container-type: inline-size; }

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

Nesting nativo

O CSS já permite aninhar regras como no Sass, sem compilar:

.menu {
  background: #fff;

  & a {
    color: var(--cor-primaria);

    &:hover { text-decoration: underline; }
  }
}

O & representa o seletor pai. O nesting aproxima o estilo da estrutura do componente e reduz a repetição. Só não exagere aninhando seis níveis, senão você recria justamente a bagunça que viemos evitar.