CSS Moderno em 2026 sibling-index(), infinity e Container Stuck Queries na Prática

Olha só o que o CSS aprontou em 2026 👀

Vamos ser sinceros: a cada seis meses o CSS entrega algo que, dois anos atrás, a gente resolvia com uma lib de JavaScript inteira. E o pacote atual não é diferente. O Firefox 154 acabou de habilitar sibling-index(), a keyword infinity amadureceu dentro do calc(), e as container scroll-state queries finalmente chegaram no Chromium.

Se você trabalha com front-end no Brasil, sabe que a gente costuma correr atrás do suporte do Safari antes de adotar qualquer coisa. Então bora ver o que dá pra usar hoje e o que ainda é experimento.

E se você também acompanha o mundo React, dá uma olhada no nosso resumo do React Conf 2025 sobre o Compiler e o React 19.2 — combina bem com essa leitura.

Antes de sair copiando código: confere o caniuse. Em 2026 o status Baseline muda rápido demais.

Feature 1: sibling-index() para Animações

O sibling-index() retorna a posição do elemento entre os irmãos (começando em 1). Combinado com sibling-count() e calc(), você faz animação escalonada sem tocar em JavaScript.

/* Escalonar cards sem JS */
.card {
  /* Cada card ganha um delay proporcional à sua posição */
  animation-delay: calc((sibling-index() - 1) * 120ms);
  animation: fadeUp 400ms ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

O Firefox 154 libera isso em 18/08/2026, virando Baseline: Newly Available. A demo que viralizou na comunidade é uma chave de torneio (knockout bracket) feita só com CSS — sem SVG, sem máquina de estados em JS.

/* Alterna direção com base em par/ímpar */
.bracket-node {
  --dir: calc(mod(sibling-index(), 2));
  translate: calc(var(--dir) * 24px) 0;
}

O padrão pra internalizar: posição agora é um valor CSS de primeira classe. Se você ainda escreve Array.from(nodes).forEach((el, i) => el.style.setProperty('--i', i)) em 2026, pode deletar esse shim. 😎

Feature 2: A Keyword infinity no calc()

O calc() agora aceita infinity e -infinity como valores numéricos de primeira classe. À primeira vista parece firula — até você perceber que isso elimina vários hacks de edge case.

O uso mais elegante é com corner-shape:

/* Esses dois são equivalentes */
corner-shape: square;
corner-shape: superellipse(infinity);

/* E esses dois também */
corner-shape: notch;
corner-shape: superellipse(-infinity);

Ou seja: infinity deixa você expressar "arredondado até o limite teórico" — que visualmente significa nada arredondado. Perfeito pra design systems que querem um único token --radius que vai do suave ao afiado sem if.

Outros usos práticos:

• Clamp sem número mágico tipo 9999px quando você quer "sem limite superior".
• Escalas tipográficas responsivas com upper bound intencionalmente infinito.
• Restrições estilo min-content dentro de cadeias de calc().

É o tipo de primitivo que parece acadêmico até você precisar — aí vira a única resposta limpa.

Feature 3: Container Scroll-State Queries (stuck:)

As scroll-state queries deixam um filho reagir ao próprio estado de scroll — incluindo se ele está stuck num limite de position: sticky.

.sticky-header {
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .sticky-header .title {
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
  }
}

Isso substitui o clássico IntersectionObserver + toggle de classe que todo design system reimplementou umas três vezes. Sem observer, sem listener de scroll, sem layout thrash.

Realidade do suporte: só Chromium por enquanto. Safari e Firefox ainda não shipparam. Coloque atrás de @supports (container-type: scroll-state) e trate o fallback como experiência base.

Feature 4: Lazy Loading Deveria Ser Padrão?

Debate recorrente na comunidade: loading="lazy" é opt-in, mas é o default errado pra maioria das páginas. O argumento da Lea Verou é que precisamos de uma forma de virar o default no stylesheet:

/* Hipotético — ainda não shippou */
img, video { loading: lazy; }

…com override por elemento via loading="eager". Isso exigiria uma propriedade CSS mapeando pra atributo HTML — exatamente o que a antiga proposta de CAS (Cascading Attribute Sheets) tentava resolver. Não vai shippar agora, mas é a conversa certa.

Comparativo: O Que Adotar Agora vs. Depois

Sobre o Roadmap de 14 Anos do Chrome

O roadmap público do Chrome agora vai até Chrome 499 — cerca de 14 anos de milestones agendados. Não é bug: é sinal deliberado de estabilidade de longo prazo. Pra quem mantém design systems, isso significa que a superfície de spec que você mira hoje ainda vai ser relevante em 2040.

Se você curte como bibliotecas longevas evoluem sob essa pressão, dá uma olhada na nossa análise da filosofia de design da TRL v1.0.

Limitações e Cuidados

• Baseline ≠ seguro. "Newly Available" significa que a versão mais recente de cada engine suporta. Usuário no Safari do ano passado não vê sua animação com sibling-index() — vê elemento estático. Projete o estado sem animação primeiro.
• infinity não substitui design tokens. Usar pra expressar "sem arredondamento" é elegante, mas não deixe vazar pro sistema de tokens como valor semântico. Mantenha --radius-sharp: 0 e mapeie pra superellipse(infinity) só dentro do componente que precisa.
• Scroll-state queries são só Chromium. Não construa UX crítica em cima. Header que encolhe só no Chrome é progressive enhancement, não feature.
• O debate do lazy loading é problema de spec, não de framework. Nenhuma config de Next.js resolve. Se te importa, acompanhe as discussões do CSSWG.

Próximos Passos

1. Audite seu código de animação procurando o padrão --i. A maioria vira sibling-index() — ganho de uma linha.
2. Prototipe um componente corner-shape com um token --radius que vai do suave ao afiado. É a forma mais rápida de internalizar infinity.
3. Envolva seus sticky headers em @supports (container-type: scroll-state) e shippe o enhancement. Fallback é o comportamento atual — risco zero.
4. Acompanhe o CSSWG na questão do lazy loading default. Se landar, muda como todo site com muita imagem é construído.

CSS moderno em 2026 é menos sobre sintaxe nova e mais sobre deletar JavaScript. Cada feature acima existe porque alguém cansou de escrever observer. Essa é a linha que vale seguir. 🚀

Fonte: CSS-Tricks — What's !important #16