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.

23 thoughts on “CSS Signatures”

  1. Legal isso. Não sabia o nome dessa técnica, mas já usava algo parecido em http://sigasw.com.br.

    Na verdade eu alterava o div que engloba tudo e definia aclasse como a área atual:

    assim conseguia mudar as cores e a imagem principal da área em questão conforme os logos de cada serviço.

    O CSS está meio bagunçado, pois não tive tempo (nem saco) de melhorar a estrutura dele.

    Grande dica Henrique.

    PS.: impressão minha ou tá tudo muito parado por esses dias? não só aqui, mas tb no tableless, no maujor, …

  2. Hummm… Muito interessante!

    Esta matéria mostrou o peso que a experiência tem! Fazer isso, utilizar IDs para personalizar as coisas, faz parte do bê-a-bá de CSS, mas, justamente por, vou dizer assim, "falta de experiência", a maioria dos desenvolvedores iniciantes simplesmente "segue" os modelos que vê ao invés de compreender os conceitos de estilização via folhas de estilo e aplicar de formas inovadoras.

    Bem, acho que ficou um pouco confuso, mas o que eu quis dizer é que basta pensar um pouquinho que se pode conseguir resultados "simples, práticos e sem mistérios". No entanto, devido, creio eu, à EXPERIÊNCIA, que já havia citado, os desenvolvedores "veteranos" conseguem apresentar soluções muito boas, simplesmente utilizando o básico de maneira criativa!

  3. Interessante essa técnica. Utilizava através de classes, que, de acordo com a pagina em questão, carregaria um estilo diferente. Mas com isso, pode-se estilizar uma seção diferente do site sem precisar criar um bocado de classes.

    Parabéns pelo artigo!

    Abraços

  4. Muito legal a idéia Henrique, eu faço algo + – parecido.

    Crio uma id para div na home e uma ou mais para as páginas internas cada uma com sua caracteristica dada pelo css, mas agora com esse método que você nos mostrou, posso fazer de uma forma mais organizada identificando cada body.

    Parabéns pelas matérias e artigos, graças a vc, o élcio, bruno torres, o maujor e tantos outros estou aprendendo muito sobre tableless e web standards.

    Valeu.

  5. Ótima dica Henrique, já me peguei pensando nisso há algum tempo, não sabia que era tão simples.
    Abraço!

  6. Poxa, muito bom isso. Eu usava javascript pra fazer isso kakakaka, CSS é poderoso!!! hehe

    O site que fiz isso foi o
    O site geral não está pronto, mas o menu ali funcionou, pode testar nos dois primeiros itens do menu (SOBRE A-I | PLANOS).

    Muito bom esse seu post cara!! Valeuuss!

  7. Isso é muito interessante…
    Algumas vezes ja gastei basntante codigo para fazer algo parecido direto no HTML e com PHP…

    Bem mais simples…

  8. Nossa! Valeu pela dica! Eu estava querendo uma solução dessas mas tava quase apelando pro javascript! 😀

    Valeu mesmo!!!

  9. Olá pessoal, queria tirar uma dúvida, se eu entendi direito essa assinatura só pode ir no body. Como eu faria para usar essa técnica se eu uso include php para montar o topo do meu site e o body é sempre o mesmo?

  10. Ola, muito simples essa tecnica, mas é daquelas que a gente só aprende quando alguem te diz e tu pensa o quão ela pode ser util, igual a CSS+XHTML no inicio.
    Bem interessante, vou começar a usar!
    Muito bom o artigo.

  11. Só para complementar: No WordPress, onde normalmente a tag body fica sempre em um único arquivo, é possível fazer isso usando Conditional Tags. Um exemplo bem simples:

    <body id="nomedosite-<?php if (is_home()) { echo "home";} elseif (is_page()) { single_post_title(''); } elseif (is_single()) { single_post_title('');} elseif (is_category()) { single_cat_title();}?>">

  12. Putz! Valeu!… Estou reformulando o meu site e estava querendo algo parecido com isso para ter esse efeito e continuar trabalhando com includes… eu pesquisei no site da W3C para ver se não existia nenhum efeito de link parecido com o a:visited mas que identificasse a página que você está atualmente, mas nao tinha…. ai acabei fazendo uma gambiarra… mas eu nao tinha pensado em deixar uma id no body de cada página…. ótima solução. Parabéns e Obrigado pelo post!

  13. Nunca tinha ouvido falar sobre isso, mas eu uso algo parecido.

    Eu uso algo parecido usando PHP para informar a sessão que estou, e CSS para alterar a cor do menu dependendo da sessão, mas aí eu usei direto na div, alterando algo como menu e se fosse em outra sessao menu-instituicao por exemplo, direto vendo o endereço e pegando o subdominio… htp://www.cico.org.br
    Confere ae!

  14. Muito interessante,

    Eu estava usando outro include .css somente para meu index… isso solucionará esse problema =]

Leave a Reply

Your email address will not be published. Required fields are marked *