Descubra como CSS puro, com sibling-index() e sibling-count(), revoluciona animações em cascata e layouts, tornando sites empresariais mais eficientes e fáceis de manter.
O Fim da Gambiarra em Animações CSS
Sabe aquela animação em que os elementos de uma lista ou grid aparecem um após o outro, criando um efeito cascata agradável? Se você gerencia um site empresarial, provavelmente já se deparou com a complexidade de implementar isso. Tradicionalmente, a solução envolvia loops em Sass para gerar dezenas de regras `:nth-child()` ou scripts em JavaScript para injetar estilos. Ambas as abordagens têm um problema em comum: informam ao navegador algo que ele já sabe. O navegador constrói a árvore DOM e tem total ciência da posição de cada elemento. Agora, o CSS finalmente pode acessar essa informação diretamente.
Conheça sibling-index() e sibling-count()
As funções `sibling-index()` e `sibling-count()` fazem parte da especificação CSS Values and Units Module Level 5. Elas trazem um poder incrível para o desenvolvimento front-end, permitindo criar efeitos complexos com uma única linha de código CSS, sem a necessidade de JavaScript ou seletores complexos.
sibling-index() retorna a posição de um elemento entre seus irmãos, começando em 1. Por exemplo, o primeiro filho é 1, o quinto é 5. É importante notar que ele conta apenas nós de elementos, ignorando nós de texto, comentários e espaços em branco.
sibling-count(), por sua vez, retorna o número total de filhos elementos que um pai possui. É o equivalente em CSS a `element.parentElement.children.length` em JavaScript.
Ambas as funções retornam um valor numérico inteiro, o que significa que você pode utilizá-las em cálculos (`calc()`), funções matemáticas (`min()`, `max()`), e até mesmo em operações trigonométricas (`sin()`, `cos()`). Isso abre um leque de possibilidades para layouts dinâmicos e responsivos.
Aplicações Práticas para o Seu Site Empresarial
A aplicação dessas funções vai muito além de simples animações. Veja como elas podem impactar positivamente a estrutura e a experiência do seu site:
- Animações em Cascata Invertida: Quer que o último item de uma lista apareça primeiro? Use
calc((sibling-count() - sibling-index()) * 80ms)para definir o atraso da animação. O último item terá um atraso de 0ms, enquanto o primeiro terá o maior atraso. - Larguras Iguais Automáticas: Para grids de cards ou abas, defina a largura de cada item como
calc(100% / sibling-count()). Se você tem 5 itens, cada um terá 20%. Adicionar um sexto item automaticamente ajusta a largura para aproximadamente 16.66%, sem a necessidade de media queries ou JavaScript. - Distribuição de Cores e Hues: Crie paletas de cores harmônicas distribuindo tons (hues) uniformemente. Por exemplo,
calc((360deg / sibling-count()) * sibling-index())pode gerar cores espaçadas igualmente em um círculo cromático para cada item. - Layouts Radiais e Circulares: Construir menus circulares ou elementos dispostos em um círculo costumava exigir cálculos complexos em JavaScript. Com
sibling-index(),sibling-count()e as novas funções trigonométricas nativas do CSS, é possível criar esses layouts puramente em CSS. - Controle de Z-Index: Facilite o empilhamento de elementos, como em um leque de cartões, usando
z-index: calc(sibling-count() - sibling-index()). O primeiro item terá o maior z-index, garantindo que ele fique por cima.
Pontos de Atenção ao Implementar
Apesar do poder dessas funções, alguns detalhes merecem atenção para evitar surpresas:
- Shadow DOM:
sibling-index()esibling-count()operam na árvore DOM real. Em Web Components, eles contarão os elementos dentro do Shadow DOM, não o conteúdo projetado pelo slot. - Pseudo-elementos Não Contam:
::beforee::afternão são contados. No entanto, você pode usar as funções dentro das declarações de pseudo-elementos; elas avaliarão o índice do elemento original. display: noneAinda Conta: Elementos ocultos comdisplay: noneainda ocupam um espaço na árvore DOM e, portanto, são contados por essas funções. Isso pode criar lacunas em layouts que dependem de contagem contínua. Para esses casos, é melhor remover o elemento do DOM ou usar JavaScript.- Propriedades Customizadas e Avaliação: Se você tentar definir uma variável customizada (custom property) no elemento pai para ser usada pelos filhos, a variável será avaliada imediatamente no pai, pegando o índice do próprio pai. A solução é aplicar a função diretamente nos elementos que precisam dela.
Desempenho e Suporte dos Navegadores
Alterar a árvore DOM (adicionar, remover ou reordenar filhos) aciona um recálculo de estilo para os irmãos afetados. Isso acontece na fase de cascata, sendo mais rápido que as abordagens antigas com JavaScript. No entanto, em cenários com milhares de elementos em constante mutação (como feeds infinitos), o uso contínuo pode ter um custo. Para esses casos extremos, o gerenciamento via JavaScript dentro de janelas de virtualização ainda é recomendado.
Quanto ao suporte, as funções `sibling-index()` e `sibling-count()` já estão disponíveis em versões estáveis do Chrome/Edge (desde junho de 2025) e Safari (versão 26.2). O Firefox está em processo de implementação. Para garantir compatibilidade com todos os navegadores, utilize a regra @supports para aplicar um fallback básico e aprimorar progressivamente onde as funções são suportadas.
Exemplo de fallback:
/* Baseline que funciona em todos os navegadores */
.item {
width: 25%;
animation-delay: 0ms;
}
/* Aprimoramento progressivo onde suportado */
@supports (z-index: sibling-index()) {
.item {
width: calc(100% / sibling-count());
animation-delay: calc(sibling-index() * 100ms);
}
}
Implementar esses recursos pode simplificar significativamente o código CSS do seu site, tornando-o mais performático, fácil de manter e pronto para as inovações do desenvolvimento web.
Fonte: Smashing Magazine
