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.

  • http://www.sigasw.com.br/ Felipe Diesel

    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, …

  • Tárcio Zemel

    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!

  • http://www.numclique.net Joares

    Muito massa isso… eu num sabia como fazia… nem q existia

  • Elyézer Mende

    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

  • http://lucasaf.wordpress.com Lucas Alves

    Muito bom cara….esses dias estava pensando em fazer algo desse tipo…valeu pelo post

  • Felipe

    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.

  • Felipe Ranieri

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

    Abraço!

  • Maicon Junches

    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!

  • http://lucas-ts.com Lucas

    Isso é muito interessante…

    Algumas vezes ja gastei basntante codigo para fazer algo parecido direto no HTML e com PHP…

    Bem mais simples…

  • Mario Suzuki

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

    Valeu mesmo!!!

  • http://dirceu.info/ Dirceu Pereira Tiegs

    Realmente bem simples mas bem interessante. Valeu pelo toque!

    Abraços

  • Alex Nunes

    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?

  • http://www.gsafe.com.br Evandro Guedes

    Muito bom o artigo, seus textos são sempre muito úteis.

  • camilo vitorino da c

    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.

  • http://danillonunes.com Marcus Danillo

    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();}?>">

  • http://msontivero.wordpress.com/ Mário S. Onti

    Bem prático, recentemente precisavamos de algo assim.

    Boa dica…

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    Bem legal a dica, no meu site eu fiz de uma outra forma, criei uma classe separada pra usar no menu, mas assim é bem mais fácil.

    Abraços!!!

  • http://www.inovastudio.com/home/ Rael B. Riolino

    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!

  • http://www.brunodulcetti.com/blog/ Bruno Dulcetti

    muito interessante henrique… nunca tinha parado pra pensar nessa técnica… sucesso…

  • http://revolucao.etc.br/ Henrique Costa Perei

    Pois é, se cada pessoa que foi beneficiada com este artigo e quiser fazer uma doação via Paypal, o autor do post ficaria feliz para escrever mais coisas úteis :D

  • http://dgmike.blogspot.com Michael

    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!

  • Lucas Ferreira

    Muito interessante,

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

  • Leonardo Proc&oacute

    Pensando nas possibilidades isso eleva muito!!!

    Muito legal!