Introdução

Fala pessoal, o post de hoje é mais um daqueles super simples de CSS, mas que talvez vocês não conheçam.

Enquanto escrevo, vou ouvindo uma banda de metalcore muito boa chamada Architects. Se nunca ouviu e curte um som mais pesado, pode ouvir que você vai curtir.

Chega de papo furado e vamos direto ao assunto.

O que são CSS Counters?

São propriedades do CSS que permitem gerar um conteúdo numérico para elementos, baseados na localização deles no html.

Como assim?

Basicamente as propriedades são:

• counter-reset: é usada para definir ou inicializar um ou mais contadores.
• counter-increment: usada para especificar o valor de incremento para os contadores.
• counter(): é uma função usada junto com o content para mostrar o valor do contador.

Tá, mas como funciona na prática?

São três passos bem simples. Vamos lá. Digamos que tenhamos o seguinte html:

<div class="content">
  <h2>Escolha um nome para o counter</h2>
  <h2>Incremente o counter</h2>
  <h2>Assinale o counter no seu elemento</h2>
</div>

Digamos que eu queira adicionar um número para cada título, então primeiro eu preciso inicializar o nosso counter no elemento pai, que nesse caso é o content, para isso, farei:

.content {
  counter-reset: section; // pode ser qualquer nome desejado
}

Depois eu preciso adicionar o incremento:

h2:before {
  counter-increment: section;
}

O método de counter-increment recebe o contador e também o valor para iniciar a contagem, se nada for passado, será a partir do 1 como padrão.

E por último, basta eu inicializar a função do contador:

h2:before {
  counter-increment: section;
  content: counter(section);
}

Aí adicionando um pouquinho de estilo, já podemos ter a nossa numeração dinâmica com CSS:

See the Pen by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

Nested Counters

Nós podemos também numerar conteúdos internos. Digamos que tenhamos a seguinte lista:

<ul class="services">
  <li class="services__item">
    Design
    <ul>
      <li>Web</li>
      <li>Mobile</li>
      <li>Graphic</li>
    </ul>
  </li>
  <li class="services__item">Web Development</li>
  <li class="services__item">
    Mobile Development
    <ul>
      <li>iOS</li>
      <li>Android</li>
      <li>Windows Phone</li>
    </ul>
  </li>
</ul>

Para termos uma lista tendo 1 e sub-níveis como 1.1, podemos fazer o css da seguinte forma:

// Definimos o contador principal
.services {
  counter-reset: services;
}

.services__item:before {
  counter-increment: services;
  content: counter(services) '.';
}

// Definimos o contador para os sub-níveis
.services__item ul {
  counter-reset: sub-services;
}

// Nosso `content` pode ser estilizado para conter qualquer coisa, até palavras
.services__item li:before {
  counter-increment: sub-services;
  content: counter(services) '.' counter(sub-services);
}

Segue abaixo o exemplo pronto:

See the Pen by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

Bem legal isso daí, mas e a compatibilidade?

Pode ficar despreocupado! Isso funciona até no IE8, como você pode ver no Can I use.

Conclusão

Como disse, era um post mega simples, mas que se você não conhecia, agora já conhece! E se você já conhecia, passe adiante!