</Danillos>
inicio
Web Developer Blog

07 de Julho de 2010

Boas utilidades para o uso do atributo 'content' do CSS

Poucas pessoas têm o conhecimento que o CSS pode inserir conteúdos em seu documento HTML utilizando o atributo content e os pseudos elementos :before, :after. Lembrando que ele deve ser usado apenas como complemento visual, e não como um outro meio de inserir conteúdo em seu documento.

Aqui estão 3 boas ultilidades para o uso do atributo content.

Protegendo seu email contra Spams

Um bom uso do atributo content é para proteger os emails contra spams, com ele você pode esconder do código fonte do HTML os emails que você deseja exibir, fazendo com que os bots não encontrem o email para o uso em spams. A maneira mais automatizada é fazer com que o atributo content insira depois do usuário do seu email o resto do email, pegando de algum atributo do HTML.

Exemplo:

CSS:

/* Inseri no fim do elemento span.email
 o texto que está no atributo title */

span.email:after{
content: attr(title);
}

HTML:

<span class="email" title="@seuemail.com">usuario</span>

Resultado:

usuario@seuemail.com

Demo

Exibindo a url do link ao imprimir

Um outro bom uso do atributo content é para exibir a url do link na hora da impressão, assim resolvendo o problema de imprimir somente o texto do link.

/* Se existir o atributo href, 
inseri ele na hora da impressão */

@media print {
a[href]:after { content:" (" attr(href) ") "; }
}

Demo

Adicionando Aspas duplas na tag blockquote

Por padrão na maior parte dos browsers, a tag HTML blockquote que é usada para citações longas vem sem aspas duplas, com o atributo content você pode colocar elas de forma que seja cross browser e sem o uso de imagens.

Exemplo de uma citação longa com aspas duplas.
/* Aspas Duplas curvas cross browser */ 
blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

Demo

Os browsers mais utilizados (Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ e Internet Explorer 8+) suportam CSS content com o pseudo elemento :after, :before e está especificado como recomendação na W3C.

comentários
Comente aqui!
Fork me on GitHub