Para este tutorial estarei utilizando o famoso iconset Silk do site famfamfam.com.

Faça o download dos arquivos utilizados neste tutorial clicando aqui.

Combinando Classes CSS

Você sabia que podemos combinar classes CSS umas com as outras? Apesar de ser algo óbvio para muita gente, vários web designers ainda não utilizam as vantagens desta técnica.

Além da combinação de classes, iremos usar também o seletor de atributo [], que permite selecionar qualquer atributo de uma tag HTML.

Vamos começar com um link de exemplo abaixo:

[html]
<a class=”icone” href=”arquivo.pdf”>Download do PDF</a>
[/html]

Podemos colocar um ícone de arquivo PDF do nosso banco de ícones com o seguinte código CSS:

[css]
.icone {
padding-left: 22px;
background: url(acrobat.png) no-repeat left center;
text-decoration: none;
}
[/css]

Veja o resultado aqui.

Utilizando a propriedade background e um pouco de padding, conseguimos o efeito desejado. Porém, existem formas de transformar isso em um sistema reutilizável e mais flexível.

Vamos utilizar a seguinte lista de links como exemplo:

[html]
<ul>
<li>
<a class=”icone pdf” href=”arquivo.pdf”>Download do PDF</a>
</li>
<li>
<a class=”icone doc” href=”arquivo.doc”>Download do arquivo Word</a>
</li>
<li>
<a class=”icone xls” href=”arquivo.xls”>Download do arquivo Excel</a>
</li>
</ul>
[/html]

Combinando a classe “icone” com outras, como pdf ou doc, criamos um pequeno e simples sistema de classes reutilizáveis. Veja o código CSS:

[css]
.icone {
padding-left: 22px;
background: no-repeat left center;
text-decoration: none;
}

.icone.pdf {
background-image: url(acrobat.png);
}

.icone.doc {
background-image: url(page_white_word.png);
}

.icone.xls {
background-image: url(page_white_excel.png);
}
[/css]

Veja o resultado aqui.

E se quisermos utilizar os links fora de uma lista? Podemos usar inline-block na propriedade display, que faz com que os links se comportem como bloco, porém sem perder a formatação em linha, assim respeitando corretamente margens e padding sem a necessidade de se utilizar flutuação. Código abaixo:

[css]
.icone {
padding-left: 22px;
background: no-repeat left center;
text-decoration: none;
display: inline-block;
margin-right: 1em;
}
[/css]

Veja o resultado aqui.

Utilizando as vantagens da combinação de classes, podemos também criar uma classe “esconde-texto”, para que possamos trabalhar apenas com os ícones, apenas adicionando uma classe e sem mudar mais nada no markup. HTML:

[html]
<a href=”arquivo.pdf”>Download do PDF</a>
<a href=”arquivo.doc”>Download do arquivo Word</a>
<a href=”arquivo.xls”>Download do arquivo Excel</a>
[/html]

E CSS:

[css]
.icone {
padding-left: 22px;
background: no-repeat left center;
text-decoration: none;
display: inline-block;
margin-right: 1em;
min-height: 16px; /* altura dos ícones */
}

.esconde-texto {
width: 16px;
height: 16px;
overflow: hidden;
text-indent: -9000px;
padding: 0;
}
[/css]

Veja o resultado aqui.

Selecionando atributos

Por fim, uma alternativa é é utilizar o seletor de atributo [] para deixarmos o código ainda mais limpo. Os seletores de atributo em si possuem suporte amplo nos navegadores (exceto IE6, é claro), mas aqui irei usar um específico de CSS3. Portanto, é necessário verificar o suporte para os principais navegadores. Com o seletor [$=] conseguimos verificar se o valor de um atributo termina com determinada sequência de caracteres. Ou seja, conseguimos detectar a extensão do arquivo.

Código HTML:

[html]
<a href=”arquivo.pdf”>Download do PDF</a>
<a href=”arquivo.doc”>Download do arquivo Word</a>
<a href=”arquivo.xls”>Download do arquivo Excel</a>
[/html]

E CSS:

[css]
.icone[href$='.pdf'] {
background-image: url(acrobat.png);
}

.icone[href$='.doc'] {
background-image: url(page_white_word.png);
}

.icone[href$='.xls'] {
background-image: url(page_white_excel.png);
}
[/css]

Veja o exemplo final da técnica aqui.

Concluindo, a combinação de classes CSS traz muita flexibilidade para o desenvolvimento de interfaces. Como há muita reutilização de elementos, entre links, botões, menus e outros, este tipo de técnica economiza tempo e deixa o site mais fãcil de manter. Inclusive, é algo portátil e que pode ser transportado facilmente para outros sites. Pessoalmente, mantenho snippets semelhantes a estes no meu arquivo CSS base quando inicio um novo projeto.

Convido a todos a entrarem e participarem das discussões no grupo:
https://groups.google.com/forum/?fromgroups#!forum/html-css-js-brasil

Compartilhem técnicas, tutoriais e tirem suas dúvidas!

Todo o código aqui mostrado pode ser utilizado hoje, pois devido à natureza “tolerante” dos navegadores, não irá causar nenhum problema de compatibilidade (e é código HTML5 válido). Neste documento também estarei utilizando a sintaxe do HTML, e não do XHTML, portanto as tags que auto-fecham não terão a barra “/” no final (mas nada impede de utilizar a sintaxe XHTML).

O que iremos incluir no documento:

1. DOCTYPE (para que o navegador reconheça que deve funcionar no “standards mode”)
2. Tag html com o atributo lang, para identificar a língua na qual o conteúdo do documento será escrito
3. Tag head, com as informações de cabeçalho não visíveis da página
4. Tag meta especificando a codificação da página (charset)
5. Tag title com o título da página
6. Tag body com o conteúdo da página

Vamos começar com o doctype:

[html]<!doctype html>[/html]

Bem simples, não? Este doctype até dá para decorar, ao contrário dos que utilizávamos antes. Perceba que não há uma versão do HTML especificada no doctype, o que o torna um doctype geral para qualquer versão do HTML. A sua única função é “ligar” o modo de padrões web (standards mode) dos navegadores.

Segundo, abrimos a tag html:

[html]<html lang=”pt-BR”>[/html]

Perceba o atributo lang, diferente do que era feito no XHTML para identificar a língua.

Em seguida, a tag head:

[html]<head>[/html]

Dentro, a tag meta especificando a codificação (também consideravelmente mais simples que antes):

[html]<meta charset=”UTF-8″>[/html]

Em seguida, a tag title que já conhecemos bem:

[html]<title>Uma Página HTML5 Básica</title>[/html]

Por fim, a tag body, com o conteúdo da página:

[html]
<body>
<!– conteúdo da página –>
</body>
[/html]

Abaixo, o código completo:

[html]
<!doctype html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<title>Uma Página HTML5 Básica</title>
</head>
<body>
<!– conteúdo da página –>
</body>
</html>
[/html]

Inserindo CSS e Javascript

Para finalizar, o código para inserir CSS e Javascript também fica um pouco mais simples, não precisando ser especificado o atributo type:

[html]
<script src=”arquivo.js”></script>
<link href=”arquivo.css” rel=”stylesheet”>
[/html]