Estilizando os números de listas ordenadas

Publicado em: 28/11/2013

Autor: Gez Lemon
URL do original: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
Título original: Styling ordered list numbers

Uma das coisas que sempre me irritou foi a dificuldade em se estilizar os marcadores de listas ordenadas. Não raro, designers tem solicitado apresentar uma lista ordenada com marcadores outros que não uma imagem – uma fonte, um tamanho, uma cor, um fundo ou seja lá o que vier na cabeça do designer.

A solução tradicional para esse problema tem sido a de impedir a renderização da numeração dos itens da lista (elementos li) e inserir os números diretamente na marcação HTML dos textos dos itens. Isso possibilita a que se crie na marcação uma maneira de se estilizar separadamente os números da lista deixando todos felizes.

Essa solução funciona visualmente, mas não é a forma semanticamente correta de se usar listas. Se você visualizar uma lista estilizada dessa maneira com as CSS desabilitadas vai ser brindado com uma lista marcada com dois números ou se a lista não for ordenada, com uma marca (bullet) e um número. Isso para mim é um retrocesso.

Recentemente foi-me solicitado estilizar números de listas e eu considerei adotar uma solução que não implicasse em esconder a numeração nativa das listas ordenadas. Graças a crescente aderência do Internet Explorer aos padrões web e a aceitação dos usuários ao conceito do incremento progressivo eu encontrei uma solução que funciona. Isso se você (ou melhor; seu cliente) aceitar o fato de que usuários do IE7 e anteriores não serão brindados com a estilização da numeração das listas a técnica que mostrarei a seguir funciona.

A chave para a solução está na especificação do W3C CSS generated content que permite ao autor criar e inserir contadores após remover a numeração padrão da lista.

Criei uma página exemplo para você visualizar o resultado final da técnica.

A folha de estilo usada na página exemplo é mostrada a seguir:


ol {
counter-reset:li; /* Inicia o contador */      
margin-left:0; /* Remove margin padrão */      
padding-left:0; /* Remove padding padrão */  
}  

ol > li {      
position:relative; /* Cria contexto de posicionamento */      
margin:0 0 6px 2em; /* margem para abrir espaço para a numeração */      
padding:4px 8px; /* Espaçamento em volta do conteúdo */      
list-style:none; /* Desabilita numeração padrão */      
border-top:2px solid #666;      
background:#f6f6f6;  
}  

ol > li:before {      
content:counter(li); /* Define um contador como conteúdo */      
counter-increment:li; /* Incrementa o contador de 1 */      
/* Posicionamento e estilização do número */     
 position:absolute;      
 top:-2px;      
 left:-2em;      
 -moz-box-sizing:border-box;     
 -webkit-box-sizing:border-box;      
 box-sizing:border-box;      
 width:2em;      /* Espaçamento entre número e texto em navegadores que suportam conteúdo gerado, ams não o posicionam(Camino 2 por exemplo) */      
 margin-right:8px;      
 padding:4px;      
 border-top:2px solid #666;      
 color:#fff;      
 background:#666;      
 font-weight:bold;      
 font-family:"Helvetica Neue", Arial, sans-serif;      
 text-align:center;  
 }  
 
 li ol,  li ul {
 margin-top:6px;}  
 ol ol li:last-child {
 margin-bottom:0;
 }

Comentários sobre as partes relevantes da folha de estilo:

Consulte a especificação do W3C indicada nos links para explicação detalhada das propriedades.

Você pode usar a estilização que bem entender no conteúdo gerado. Convém notar que para listas com muitos níveis de aninhamento é necessário prever mais espaço para a inserção dos números, pois eles se tornam mais longos. Não é um cenário muito comum, mas esteja atento.

Como eu havia mencionado so navegadores IE 7 e anteriores não suportam a propriedade content nem os pseudo-elementos :before and :after. Usando comentários condicionais é possível repor a numeração padrão das listas sem a estilização. Para a maioria das pessoas isso é aceitável.

Atualização:Acrescentei na página exemplo o fallback para o IE7 e anteriores. Obrigado aos que me alertaram para essa falta do fallback e àqueles que apontaram os possíveis problemas com muitos níveis de aninhamento nas listas. E, obrigado à Eric Meyer por lembrar-me que há muito alguna navegadores não permitem o posicionamento de conteudos gerados, tais como o Camino 2 e o Firefox 3.0. Acrescentei algum padding e uma margem direita para os números gerados de modo a atenuar os problemas naqueles navegadores.