Abas com CSS utilizando :target

Para aumentar a usabilidade do seu site, o ponto inicial seria dar
uma maior atenção aos links internos dele. Veremos aqui a utilização do pseudo-seletor CSS3 :target,
que é utilizado para manipular as âncoras do HTML.

Para desenvolver o artigo me baseei no exemplo citado na Revista W, edição 101, onde o autor Craig Grannell nos ensina a desenvolver um menu em abas que ao clicar o conteúdo é trocado. Isso até então era possível somente com a utilização de JavaScript, mas com a utilização do pseudo seletor :target isso agora fica fácil.

Primeiramente temos que montar a nossa estrutura HTML, muito simples e de fácil entendimento:

<div id="container"><br /><br />    <ul id="tabs"><br />    	<li><a class="tab_pinceladas" href="#pinceladas" title="Pinceladas da Web" rel="me">Pinceladas da Web</a></li><br />        <li><a class="tab_css" href="#css" title="CSS no Lanche" rel="alternate">CSS no Lanche</a></li><br />    </ul><br /><br />    <div id="pinceladas"><br />    	<ul><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />        </ul><br />    </div><br /><br />    <div id="css"><br /><br />    	<ul><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />            <li><a href="#" title="Texto aqui">Texto aqui</a></li><br />        </ul><br /><br />    </div><br /><br /></div>

Utilizei de uma div #container para conter toda a estrutura de
nossas abas. Após isso, utilizei de uma lista desordenada com os links
para as tabs com nomes fictícios: pinceladas e css, vocês entenderão o
porquê disso quando virem o exemplo final. Depois, defini o conteúdo de
cada aba; na div #pinceladas o conteúdo referente à aba pinceladas e, na
div #css, o conteúdo referente à aba css. Para aqueles que já desenvolveram
sistemas de tabs com JavaScript, até agora estão se sentindo familiarizados com a estrutura, mas o grande segredo está no CSS:

* {<br />	padding: 0;<br />	margin: 0;<br />}<br />body {<br />	font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, san-serif;<br />	padding: 30px;<br />}<br />a {text-decoration:none}<br />li {<br />	font-size:1.2em;<br />	list-style:none;<br />}

Primeiramente, vamos aplicar algumas definições gerais ao nosso exemplo, como utilizar um CSS Reset
genérico. Depois definimos tamanho e família de fonte e outros estilos.
Os estilos listados abaixo serão os utilizados no exemplo:

#container {<br />	background-color:#aaa;<br />	border:10px solid #666;<br />	width: 300px;<br />	position: relative;<br />	overflow: auto;<br />	padding:20px;<br />}<br />#tabs li {<br />	float:left;<br />	text-align:center;<br />	width:150px;<br />}<br />#tabs li a {<br />	color:#000;<br />	padding:5px;<br />	display:block;<br />}<br />#pinceladas {<br />	background-color: #eaedf0;<br />}<br />#css {<br />	background-color: #69c;<br />}<br />#pinceladas a {<br />	color:#000;<br />}<br />#css a {<br />	color:#fff;<br />}<br />#pinceladas, #css {<br />	float:left;<br />	padding:10px;<br />	width:280px;<br />}<br />#pinceladas li, #css li {<br />	border-bottom: 1px dotted #000000;<br />	padding: 5px 0;<br />}<br />.tab_pinceladas {<br />	background-color:#eaedf0;<br />}<br />.tab_css {<br />	background-color:#69c;<br />}<br />#css {<br />	position: relative;<br />	margin-left: -300px;<br />	z-index: -1 !important;<br />}<br />#container :target {<br />	z-index: 1 !important;<br />}

No CSS listado acima, nos estilos das linhas 1 até a 45 não existem
segredos. É a partir da linha 46 que as coisas começam a acontecer, pois
temos que definir que uma das abas fiquem escondidas, por isso
utilizamos z-index:-1. É obrigatória a definição de float para o
conteúdo de nossas abas, como você pode verificar na linha 32, pois
depois teremos que definir uma margem negativa para a aba que ficará
escondida, caso contrário o espaço que ela ocuparia no fluxo normal da
página ficaria visível.

Agora vamos à linha 51, onde aplicamos o pseudo seletor :target, que
fará com que o usuário clique em uma das abas, seja definido um
z-index maior, e a aba que antes estava invisível ao usuário agora se
torna visível. Finalmente vamos ver agora um exemplo de tabs com CSS funcionando.

Infelizmente o seletor :target não é suportado por todos os
browsers, mas se vocês repararem no código fonte do exemplo, verão que
foi utilizado um arquivo JavaScript chamado: csstarget.js, um script
desenvolvido por Peter Ryan que faz com que o seletor :target funcione em todos os browsers que não suportam esse seletor corretamente.

O que também deve ser feito é que você deve definir uma classe no
CSS, chamada .target para aqueles browsers que não suportam o :target,
pois ela será utilizada pelo JavaScript para executar os efeitos, como
você pode ver no código abaixo:

#container .target {<br />	z-index: 1 !important;/*Para Browsers que não suportam :target*/<br />}

Vejam o exemplo. Caso tenha interesse, você pode baixar os arquivos utilizados.