21 de março de 2011 Client-Side

CSS3 – Abas com a pseudo-classe :target

Fazer abas sempre foi muito chato para mim. Agora, os problemas acabaram com o :target.

Por Diego Eis

O CSS está cada vez mais facilitando as coisas. Alguns problemas que eram resolvidos apenas via Javascript já podem ser resolvidos inteiramente com CSS. Obviamente que para alguns browsers temos que usar algum script para conseguir a compatibilidade. Mesmo assim, se for já possível utilizar as novas maravilhas do CSS 3 e outras compatibilidades que estão surgindo do CSS 2.1, faça-o já. Você com certeza vai se agradecer um tempo próximo!

Um caso muito comum na produção de sites é a construção de tabs. Todo desenvolvedor já deve ter feito pelo menos uma vez na vida um script de tabs. Com a pseudo-classe :target seus problemas acabaram.

Quando queremos relacionar um link na própria página, utilizamos o recurso de “âncora”. Quando colocamos um link com o valor assim:

[cc lang="html"]
Link
[/cc]

Falamos para o browser que ao clicar no LINK, ele deve encontrar um ponto na página chamado, nesse exemplo, nome-da-ancora. Ele vai encontrar o elemento na página que tenha um ID com esse nome e navegará a barra de rolagem até a posição deste elemento. Você já deve saber disso e já deve ter visto funcionando.

Com a pseudo-classe :target isso ganha nova vida. O :target consegue relacionar isso a um objeto de forma que se você estiver criando abas (tabs), ele mostra automaticamente a aba relacionada. Vamos ao exemplo. Primeiro faça um HTML como o abaixo.

[cc lang="html"]

• Aba 1
• Aba 2
• Aba 3

[/cc]

Note um detalhe muito importante: o valor do HREF dos links é exatamente o nome do ID dos DIVs referente ao conteúdo das abas.

Agora, para formatar e deixar bonitinho:

[cc lang="html"]
* {margin:0; padding:0;}
body {
font:13px verdana, arial, tahoma;
}

ul { margin:20px 20px 0; list-style:none;}
li {float:left;}
.itens a {
float:left;
border:1px solid black;
background:gray;
padding:5px 15px;
color:#FFF;
text-decoration:none;
}

.itens a:focus {background:red;}

.aba { padding:0 20px;width:400px; clear:both;}
.aba div {
background:white;
border:1px solid black;
padding:10px;
width:100%;
display:none;
}

.aba div:first-child {
display:block;
}

[/cc]

Note que a última linha está dizendo para que os DIVs referentes às tabs fiquem escondidas e que só a primeira apareça.

A coisa toda acontece aqui, com uma linha de código:
[cc lang="html"]
.aba div:target {
display:block;
}
[/cc]

Essa linha entende o valor do HREF do link, capturando o ID referente ao div que o browser deve mostrar.

Veja o exemplo completo aqui.