Dica Rápida: Usando Contadores CSS para Estilizar Elementos Numerados

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nessa dica rápida, cobriremos o básico dos Contadores CSS, uma functionalidade útil, porém, não tão conhecida do CSS. Ao terminarmos de construir nossa aplicação de demonstração, veremos exemplos do mundo real usam contadores CSS.

O Objetivo: Estilizar um Lista Ordenada

Como primeiro passo, vejamos o layout que construiremos:

Nada demais, certo? Eis o desafio, porém: Usaremos marcação semântica, evitando o uso de elementos div e span desnecessários para construir esses marcadores.

Discutamos sobre uma solução clara e flexível!

Contadores CSS

Tudo que é preciso para gerar o layout mencionado é uma lista ordenada. Você deve estar se perguntar se poderíamos usar outro elemento ou mesmo uma lista não ordenada. A resposta curta, "sim". Mas, lembre-se que a lista ordenada é o único elemento que descreve fielmente a estrutura desejada.

Você também deve querer saber se é possível customizar, totalmente, a aparência dos números da lista ordenada, construindo o layout desejado dessa forma. Estilizar os números da lista ordenada seria bem trabalhoso assim. Felizmente, há uma abordagem alternativa e cross-browser, então, escondamos os números padrão da lista e usemos os contadores CSS.

Sintaxe

Contadores CSS permitem-nos gerar números baseados em elementos repetidos e estilizá-los apropriadamente. Imagine contadores CSS como variáveis cujos valores podem ser incrementados. Vejamos a sintaxe básica:

Create a new counter — Criando um novo contador

Aqui, criamos um novo contador em listas ordenadas e definimos seu escopo. Usamos a propriedade counter-reset.

O primeiro valor é o nome do contador
seguido de um parâmetro opcional que define o valor inicial do contador (padrão: 0). Note que o contador usa a ordem crescente por padrão, logo, o primero número gerado, em nosso caso, será o 1.

styling the child element — Estilizando o elemento filho

Nesse segundo digrama, podemos ver que estilizamos o pseudo-elemento ::before dos li de nossa lista.

Adicionamos o valor do contador à propriedade content de ::before. Vale mencionar que, ao usar contadores CSS com a propriedade content, podemos concatenar (unir) os números gerados com cadeias de caracteres.
Nós referimos o nome do nosso contador
e definimos o estilo do contador como "decimal". Os possíveis valores são similares aos usados na propriedade list-style-type.
Na regra counter-increment referimos, novamente, o nome do nosso contador
e usamos um parâmetro adicional para indicar qual o incremento do contador. O valor padrão é 1.

Marcação

Baseados nisso que discutimos, eis nossa marcação:

1	<ol>
2	<li>
3	<h4>List Item</h4>
4	<p>Some text here.</p>
5	</li>
6	<li>
7	<h4>List Item</h4>
8	<p>Some text here.</p>
9	</li>
10
11	<-- more list items here -->
12	</ol>

E o CSS relacionado:

ol {
  counter-reset: section;
}

li { 
  list-style-type: none;
  font-size: 1.5rem;
  padding: 30px;
  margin-bottom: 15px;
  background: #0e0fee;
  color: #fff;
}

li::before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  position: absolute;
  left: -75px;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px;
  font-size: 2rem;
  width: 25px;
  height: 25px;
  text-align: center;
  color: #000;
  border-radius: 50%;
  border: 3px solid #000;
}

Isso nos dá o resultado mostrado abaixo:

Limitações

Vale lembrar que os pseudo-elementos não são 100% acessíveis. Para mostrar isso, criei um pequeno teste. Instalei a NVDA e usei o Chrome 50, Firefox 45 e o Internet Explorer 11 para pré-visualizar a página demonstração.

O que descobri é que quando usamos o Internet Explorer, o leitor de tela não anunciou o conteúdo gerado. Hoje em dia, a maioria dos leitores de tela reconhece conteúdo gerado dessa forma, porém, você deve estar a par das limitações e, assim, decidir qual conteúdo é seguro para ser gerado com pseudo-elementos.

Contadores CSS Mundo Afora

Agora que sabemos o básico cos contadores CSS, podemos mostrar alguns exemplos de casos de uso potenciais.

Primeiro, contadores CSS são, comumente, usados em jornais online. Na maioria das vezes, encontramos nas barras laterais:

Contadores CSS também podem ser usados dentro de seções, descrevendo passos ou dando direções. Eis um exemplo:

Exemplos de HTML Inchado

Na seção anterior, vimos dois jornais online que fazem uso de contadores CSS. Agora, vejamos outros dois jornais online que usam marcação inchada (embora acessível) ao invés de contadores CSS.

Conclusão

Nessa dica rápida, aprendemos como usar contadores CSS para estilizar items de listas ordenadas. Resumamos, rapidamente, o que falamos:

Contadores CSS são uma ótima solução para projetos que requerem ordenação dinâmica com estilos customizados. Por outro lado, não é uma solução totalmente acessível, então, esteja a par das limitações e use apropriadamente.
Para preparar contadores, temos de especificar duas propriedades (counter-reset e counter-increment) e uma função (counter() ou counters()).
Pseudo-elementos são responsáveis por mostrar os contadores. Lembre-se que usamos a propriedade content, disponível apenas em pseudo-elementos.

Você já usou contadores CSS em algum de seus projetos? Caso positivo, compartilho conosco seu trabalho!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!