CSS Signatures

Existe uma técnica muito simples, muito útil e relativamente pouco utilizada no Brasil conhecida como CSS Signature, ou em bom tupiniquês, "assinatura de CSS". É com essa técnica que eu consigo por exemplo, indicar no menu do meu site, qual é a página atual em que o usuário está. Se você clicar em uma das páginas como feeds, referências, hosting etc aqui do meu site, verá que o ítem de menu correspondente a página fica "selecionado", diferenciando-se do restante dos ítens do menu para indicar para o usuário qual a página atual em que ele se encontra.

Esta técnica foi desenvolvida por Eric Meyer e consiste em colocar o atributo "id" na tag <body> do seu documento com a estrutura da sua url por exemplo, como no formato inicialmente concebido por ele:


<body id="www-revolucao-etc">

Tendo isso no body de qualquer página, como na home por exemplo, você consegue personalizar os elementos que quiser sobrescrevendo as regras declaradas acima na sua folha de estilos apenas nas páginas que possuiu determinado id. Quando Meyer publicou sobre isso nos idos de 2001, ele estava apenas dando um exemplo do que um id no body é capaz de fazer. Desde então essa técnica foi aperfeiçoada e utilizada de formas diferentes por vários profissionais.

Eu a utilizo para enriquecer a usabilidade de um site para indicar com um estilo diferente para o usuário, qual a página específica de um site ele está atualmente em menus de navegação. É uma técnica muito simples que pode ser utlizada juntamente com breadcrumb (caminho de migalhas) para enriquecer mais ainda a experiência de um usuário em sites de médio e grande porte.

No meu site eu utilizo está técnica da seguinte maneira. Imagine a seguinte regra declarada na sua folha de estilos:


.coluna ul li a { color:900; }

Se você em uma página qualquer tiver colocado uma css signature no body, você consegue sobrescrever a regra declarada acima da seguinte maneira:


.coluna ul li a { color:900; }
#www-nomedoseusite-com .coluna ul li a { color:FC0; }

Ou seja, a regra de CSS declarada abaixo utilizando o id inserido como seletor, vai sobrescrever todos os links da listagem da coluna de um site. No caso do meu site, eu coloco uma classe diferente em cada ítem do menu, e cada página possuiu um id diferente e correspondente. A página de Hosting possuiu um id igual a "hosting", a página Paypal, possuiu um id igual a "paypal" e assim por diante com cada página do site. Então minha regra de CSS fica da seguinte maneira:

#hosting .hosting a { declaração:valor da declaração; }

Ou seja, na página de hosting, se você olhar no código fonte, verá que eu coloquei um id="hosting" somente naquela página. Inserindo a regra de CSS como no exemplo acima, logo abaixo da regra genérica para todos os outros ítens de menu, eu consigo naquela página específica (hosting) dar uma aparência diferente para o hyperlink da <li> que possuiu a classe igual a "hosting". Com esta técnica, você consegue criar um layout diferente para cada página do seu site, usando o mesmo XHTML, os mesmo nomes de classe e mudando apenas o id. Simples, prático e sem mistérios! Se fizer alguma experiência disso, deixe o link aqui nos comentários para o restante dos leitores conferir.