2 de julho de 2010Zebrando uma Lista

Uma lista zebrada muita das vezes é uma ótima opção para oferecer uma melhor leitura das informações, e nesse post vamos aprender algumas técnicas para se aplicar esse efeito.

Utilizando Classe

Esse método é o menos indicado, mas vejo que ainda é largamente usado por designers. Trata-se de adicionar de forma manual uma classe a cada “li” , “tr” ou seja qual for o elemento.

Exemplo

Marcação:

Rio de Janeiro
São Paulo
Rio de Janeiro
São Paulo
Rio de Janeiro
São Paulo

Estilo:

body { font: 12px arial; }
ul { list-style: none; }
.zebra { background: #FC9; }

Veja esse exemplo funcionando

Apesar de não ser uma maneira “errada” de se usar, sua não recomendação é simplesmente pelo fato de ser trabalhoso, desnecessário e engessador para atualizações futuras.

Utilizando Pseud:Classe

Com essa técnica estaremos fazemos o uso de css3, vamos utilizar o pseud-classe :nth-child() para declarar como argumento uma conta (2n+2) ou palavras chaves (“odd” que são para os números ímpares) ou (“even” que são para os números pares).

Exemplo

Marcação:

Rio de Janeiro
São Paulo
Rio de Janeiro
São Paulo
Rio de Janeiro
São Paulo

Estilo:

ul li:nth-child(odd) { background: #ccc; }

ou

ul li:nth-child(2n+2) { background: #ccc; }

Veja esse exemplo funcionando

Essa técnica é recomendada pois ao contrário do uso das classes, não existe a necessidade de colocarmos nenhum atributo ao nosso elemento html para que ele receba o efeito. O nosso pseud-classe faz isso automaticamente.

Porém, nem tudo são flores nesse método =(. Aqui vamos ter aquele nosso velho problema de compatibilidade. Como sempre o Internet Explorer até sua versão 8 não reconhece esse pseud-classe, só na atual versão 9 eles estão começando a dá o suporte. Firefox, Safari e Chorme funcionam normalmente. Veja a tabela de compatibilidade.

Se você quiser forçar o Internet Explorer a reconhecer esse pseud-classe e outros mais de css3, da uma olhada nesse post:
CSS3 no internet explorer

Utilizando Javascript

Eu particulamente utilizo esse método pois em todos meus sites faço o uso da biblioteca jquery e então aproveito para fazer de forma simples essa funcionalidade. Outro ponto importante é que você não depende da compatibilidade de cada fabricante de browser, essa responsabilidade de renderizar quem faz é o próprio jquery. perfeito!

Marcação:

Rio de Janeiro
São Paulo
Rio de Janeiro
São Paulo
Rio de Janeiro
São Paulo

Javascript:

$(document).ready(function(){
$("ul li:even").css("background-color","#FC9");
});

Veja esse exemplo funcionando

Bom, é isso ai pessoal. Estão ai as 3 técnicas mais utilizadas para conseguir zebrar uma lista, tabela etc. um abraçoo!!

Nenhum Comentário »

Nenhum comentário ainda.

Feed RSS dos comentários deste post URL de TrackBack

Deixe um comentário

Nome (obrigatório)

Email (não será publicado) (obrigatório)

Site

ThiagoFasano - Portfólio versão 2.0