Escondido nas profundezas da especificação CSS, você encontrará contadores de CSS. Como o nome sugere, eles permitem que você conte uma coisa em sua página com CSS incrementando o valor toda vez que aparece no documento.
Isto é principalmente útil se você tiver um site tutorial - seja sobre culinária ou desenvolvimento web - todos eles têm passos a seguir, e você provavelmente terá que escrever o número da etapa antes do conteúdo real. Os contadores de CSS podem ajudar fazendo isso automaticamente, você pode até usá-lo para contar as imagens em seu arquivo e adicionar números de figura antes das legendas.
Neste exemplo, demonstrarei como conseguir isso criando uma receita simples para panquecas e fazendo o CSS pesquisar o início de cada parágrafo e adicionando o número da etapa anterior.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
O objetivo neste HTML é que cada parágrafo é um passo diferente e com o CSS podemos adicioná-los dinamicamente escrevendo apenas 3 linhas de código.
Os contadores de CSS usam o incremento de contador de propriedade . Já existe há algum tempo, na verdade, foi implementado em CSS 2.1, para usá-lo, devemos primeiro redefinir o valor padrão do contador para 0 antes de qualquer coisa que queremos contar aparece na página, por isso é uma boa idéia definir isso no estilos de corpo, assim:
body {counter-reset: steps;}Esta linha apenas ajusta o contador de volta para 0 e também o nomeia, permitindo chamá-lo mais tarde e também permitindo que tenhamos mais de um contador na página.
O próximo passo é usar o pseudo-elemento : before para segmentar todos os parágrafos e adicionar o número da etapa antes que todo o texto comece. Para fazer isso, precisamos usar o incremento de incremento e, em seguida , especificar o conteúdo. Podemos apenas usar o número ou podemos acrescentar ou adicionar um texto, neste caso, vamos colocar "Step" antes do valor do contador, assim:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Devemos também destacar um pouco esse conteúdo e, para isso, daremos a ele um tamanho de fonte maior que os parágrafos e torná-lo-emos em negrito:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Se você quiser ver essa ideia em ação, você pode ver a caneta que criei.
Uma preocupação constante ao trabalhar com CSS é o suporte ao navegador, mas como essa é uma implementação do CSS 2.1, o suporte ao navegador é excelente: é suportado por todos os principais navegadores, desktop e dispositivos móveis, o único navegador significativo que não é compatível com IE7, e de acordo com o meu contador de estatísticas IE7 é usado por apenas 0,61% das pessoas, então eu acho que podemos dizer que o IE7 vai sair em breve. Se você precisa ou não suportar o IE7 depende das estatísticas do seu próprio site.
Contadores de CSS não são algo que você usará em todos os projetos, mas é algo que você deve manter no fundo de sua mente, porque algum dia ele pode ser útil.
Você usou contadores de CSS em um projeto? O que você pode ver para eles? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, contando imagem via Shutterstock.