Criando contadores apenas com CSS

Olá Web Developers!

Vocês sabiam que é possível criar contadores apenas com CSS? Com isso alguns desenvolvedores conseguem até criar jogos sem nenhuma linha de JavaScript!

Os contadores fazem parte do CSS 2, então já possuem suporte por boa parte dos navegadores. Mesmo assim, são poucas as pessoas que conhecem ou fazem uso deles.

Para quem nunca viu pode parecer meio estranho, mas vamos ver de modo simples como usá-los!

Inicializando o contador

Primeiro vamos imaginar que os contadores são simplesmente variáveis, exatamente como as das linguagens de programação. Então, vamos começar com a declaração:

.minha-classe{
   counter-reset: meucontador;
}

• meucontador é o nome do nosso contador, nossa “variável”.
• counter-reset reinicia o nosso contador.

É como se estivéssemos escrevendo:

var meucontador = 0;

Imprimindo o contador

Agora vamos apresentar o nosso contador em algum lugar. Para isso, nós usamos a propriedade content, que deve ser usada junto a um pseudo-elemento, ::before ou ::after.

<div class="imprime-contador">Minha Div</div>

.imprime-contador::after{
   content: counter(meucontador);
}

O resultado será:

Veja que colocamos a classe imprime-contador em uma div. Foi exibido o conteúdo da div, e o ::after acrescentou depois dela o que passamos em content, o valor do nosso contador.

incrementando o contador

Agora temos que incrementar o nosso contador.

.imprime-contador{
   counter-increment: meucontador
}

Diferente do counter-reset, que reinicia o nosso contador, o counter-increment incrementa o valor.

Sempre que houver uma classe onde haja o incremento do nosso contador, ele será incrementado. Seria como se executássemos o seguinte código:

// imagine "elementsList" como sendo uma lista com todos
// os elementos HTML do nosso código
elementsList.forEach((element)=>{
   if( element.classList.contains("imprime-contador") ){
      meucontador++;
   }
})

Então se colocarmos três divs:

<div class="imprime-contador">Minha Div</div>
<div class="imprime-contador">Minha Div</div>
<div class="imprime-contador">Minha Div</div>

O Resultado será:

Incrementando de acordo com a seleção do usuário

Podemos também aproveitar o seletor :checked, que indica checkboxes marcados, para utilizar como condição para o incremento dos contadores. Por exemplo:

<style>
body {
  padding: 2em;  
}

.counter-reset{
   counter-reset: checkboxcounter;
}

.meucheckbox{
   width: 20px;
   height: 20px;
   margin-right: 10px;
   appearance: checkbox;
   -moz-appearance: checkbox;
   -webkit-appearance: checkbox;
}

.counter-print::after{
   content: "Total: " counter(checkboxcounter);
}

.meucheckbox:checked{
   counter-increment: checkboxcounter;
}
</style>

Clique nos Checkboxes para ver o contador incrementar:

<div style="margin-top: 30px;">  
  <span class="counter-reset"></span>  
  <input type="checkbox" class="meucheckbox" id="checkbox1" /><label for="checkbox1" >CheckBox 1</label>  
  <input type="checkbox" class="meucheckbox" id="checkbox2" /><label for="checkbox2" >CheckBox 2</label>  
  <input type="checkbox" class="meucheckbox" id="checkbox3" /><label for="checkbox3" >CheckBox 3</label>  
  <span class="counter-print"></span>  
<div>  

Se você quiser testar:

Aqui fizemos o seguinte:

• Criamos uma classe no CSS apenas para reiniciar nosso contador, o .counter-reset;
• Criamos uma classe no CSS apenas para imprimir o total do nosso contador, o .counter-print;
• Fizemos um tipo de “condição” para o incremento, que são os checkboxes da classe .meucheckbox que estiverem marcados;

Vejam então que conseguimos fazer um contador que tem seu valor atualizado na página sem o uso de onclicks que chamam funções que calculam valores e atualizam o HTML, ou o uso de binds como os do Angular ou React. Apenas algumas linhas de CSS foram necessárias para criar este comportamento.

Alguma ideia, dúvida ou sugestão sobre como usar o CSS Counter? Compartilhe com a gente aí nos comentários!

Por hoje é só. Até o próxima o/

Curso PWA - Progressive Web Apps

Conhecer o curso