Contadores e auto-numeração em CSS2
Estive pesquisando hoje algumas técnicas novas de CSS, e me deparei com um recurso muito interessante, que nunca utilizei, e nunca reparei que fosse usado em lugar algum antes. Trata-se da possibilidade de utilizar CSS para adicionar contadores e auto-numeração para qualquer elemento HTML.
Qualquer designer CSS que se preze conhece a propriedades de numeração das listas (tags <li>), poucos mas sabem que os mesmos tipos de numerações podem ser adicionadas a qualquer conjunto de elementos, inclusive adicionando estilos personalizados aos contadores.
Veja o exemplo a seguir:
A lista acima, foi criada utilizando apenas elementos div, e os seguintes estilos:
div.list { counter-reset: my-list; /* inicializa o contador */ } div.list div { counter-increment: my-list; /* incrementa */ } div.list div:before { content: counter(my-list) ". "; /* imprime */ }
A propriedade counter-reset inicializa a contagem com o identificador my-list a cada vez que um elemento <div> com a classe list é exibido. Já a propriedade counter-increment, incrementa este contador a cada elemento <div> “filho” do primeiro.
A partir daí, podemos utilizar os pseudo-elements :before, ou :after, para adicionar o valor do contador na propriedade content, utilizando a função counter(). A propriedade content, pode também receber qualquer string adicional, permitindo o uso de separadores diversos do contador para o conteúdo do elemento.
O fragmento HTML utilizado no exemplo acima está a seguir:
<div class="list"> <div>foo bar</div> <div>foo bar</div> <div>foo bar</div> </div>
As propriedades counter-reset e counter-increment aceitam também um segundo valor, numérico, usado, respectivamente, para definir o início da contagem (padrão 0) e o valor de incremento (padrão 1).
Veja o mesmo exemplo, iniciando o contador com -4, com incremento de 2:
div.list { counter-reset: my-list -4; /* inicializa o contador */ } div.list div { counter-increment: my-list 2; /* incrementa */ }
A função counter() também aceita um segundo parâmetro, definindo o tipo de contador utilizado. Todos os tipos usados na propriedade list-style-type dos elementos <ul>, <ol> e <li> são suportados.
Para finalizar, vamos alterar os estilos e separadores dos nossos contadores, utilizando também um tipo diferente:
div.list div:before { content: "[" counter(my-list, lower-alpha) "]"; font-family: monospace; padding: 0 10px 0 0; font-weight: bold; color: red; }
…e o resultado:
Embora eu tenha utilizados elementos <div> nos meus exemplos, contadores podem ser adicionados a qualquer lista de elementos, incluindo as linhas ou colunas de uma tabela, por exemplo.
Todas as propriedades acima fazem parte das recomendações da W3C para CSS nível 2, que podem ser encontradas em http://www.w3.org/TR/CSS2/generate.html, e são suportadas pelos navegadores Firefox 3.0, MSIE 8, Google Chrome 2.0, Safari 3.0 e Opera 9.0, ou superiores.
Últimos Comentários