Usando CSS para criar uma barra de abas

Márcio d'Ávila, 12 de outubro de 2003. Revisão 2, 07 de janeiro de 2004.
Categoria: Internet: Cliente: DHTML

Este é um exemplo de barra de abas feito inteiramente com Folhas de Estilo - Cascading Style Sheets (CSS). As abas são simplesmente links (a href), dentro de itens de uma lista ul da classe de estilo tabbar. Foi criada uma classe adicional tabact para ser usada como aba ativa.

Texto antes da barra de abas.
Texto dentro da barra de abas.
Texto depois da barra de abas. Um link fora da barra de abas.
.tabbar {
  margin-top: 10px;
  border-bottom: 7px solid #CC0000;
  padding: 2px 0px;
  font-family: sans-serif;
  font-size: 83%;
}
.tabbar ul, li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style: none;
}
.tabbar a {
  padding: 2px 1em;
  border-top: 1px solid #CC0000;
  border-left: 1px solid #CC0000;
  border-right: 1px solid #CC0000;
  border-bottom: none;
  background-color: #CCCCCC;
  color: #CC0000;
  text-decoration: none;
}
.tabbar a:hover, .tabbar a:active {
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-right: 1px solid red;
  background-color: #EEEEEE;
  color: red;
  text-decoration: underline;
}
.tabbar a.tabact {
  border-bottom: 1px solid #CC0000;
  background-color: #CC0000;
  color: white;
  font-weight: bold;
}
.tabbar a.tabact:hover,
.tabbar a.tabact:active {
  background-color: #CC0000;
  color: white;
}

A classe de estilo tabbar criada define a área de abas e é aplicada a um elemento de bloco como um div (usado neste exemplo), um p ou uma tabela. Além de definir o escopo de validade das abas, a classe também está definindo uma margem superior (margin-top) que visa distanciar qualquer conteúdo que esteja acima da aba, e uma borda inferior (border-bottom) que dá um acabamento visual integrando as abas e delimitando a área horizontal do bloco.

Dentro da área de abas, as abas efetivamente são criadas em uma lista UL, sendo links A dentro de itens LI da lista. A maior parte da formatação fica por conta do link, onde estão os estilos para a efetiva aparência de aba. A lista funciona, essencialmente, como elemento de usabilidade e acessibilidade para encapsular cada link, evitando que as abas sejam apenas um amontoado de links seguidos, do ponto de vista estrutural. Para que as abas fiquem corretamente enfileiradas horizontalmente, a propriedade display no estilo da lista UL e seus itens LI é definida como inline. Também foram zeradas as margens e afastamentos da lista e seus itens (margin: 0; padding: 0) e removido o marcador padrão de itens da lista (list-style: none).

Cada aba (link com seletor .tabbar a) define borda visível acima, à esquerda e direita (preferencialmente na mesma cor da borda inferior da barra), e nenhuma borda abaixo (border-bottom: none). Além disso, foi definida uma margem lateral (1 pixel), para garantir que uma aba nunca fique totalmente encostada ao elemento (aba ou texto) ao seu lado. Para compor o tamanho da aba, foi adicionado afastamento interno de 2 pixels na vertical (acima e abaixo) e 1 eme nas laterais (padding: 2px 1em). Por fim, adiciona-se as preferências de estilo do fundo e do texto. É interessante deixar o link sem a decoração de sublinhado convencional (text-decoration: none), enquanto não selecionado.

A composição é completada com a definição de uma classe tabact para distinções visuais da aba ativa (para ser usada na aba atualmente escolhida ou em uso), bem como diferenciações para os estados apontado (hover) e ativo (active) dos links (.tabbar a:hover, .tabbar a:active).

Uma observação técnica importante: como links são elementos de linha (inline), a definição de afastamento interno (padding) vertical faz com que os limites do link extrapolem a altura normal da linha. Portanto, deve ser adicionado padding vertical correspondente na classe tabbar. Este padding vertical em geral deve ser igual ao usado no link, mas pode variar se na classe do link for usada métrica de fonte (família, tamanho, corpo) diferente. Neste exemplo, para evitar inconsistências, a definição de fonte (sans-serif 10pt) foi colocada no escopo da classe tabbar, de forma que o afastamento vertical foi o mesmo de 2 pixels (padding: 2px 0px). Sem o afastamento interno vertical da barra acompanhando os links, a área dos links sofreria sobreposição na vertical.

Um artigo relacionado extremamente interessante foi publicado na revista on-line A List Apart (ALA) de outubro de 2003. Ele apresenta uma forma de implementar abas com aparência gráfica sofisticada usando apenas CSS: Sliding Doors of CSS, por Douglas Bowman, com continuação em Sliding Doors of CSS, Part II.


Firefox - A web de volta
Creative Commons License

© 2003-2007, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e código-fonte apresentados podem ser referenciados, distribuídos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.