Otimizando seu CSS

CSS Sprites

CSS Sprites consiste em unirmos imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML.

O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu site ganhe performance e economize banda.

Imagem

Para começar, unimos todas as imagens utilizadas em apenas uma:

HTML

Montamos uma lista inserindo uma classe para cada “a”, desta forma conseguiremos manipular cada imagem separadamente:

<ul>
<li><a href="#" title="Aspira Soldier" class="aspira_soldier">Aspira Soldier</a></li>
<li><a href="#" title="Elite Soldier" class="elite_soldier">Elite Soldier</a></li>
<li><a href="#" title="Sniper Soldier" class="sniper_soldier">Sniper Soldier</a></li>
<li><a href="#" title="Gas Soldier" class="gas_soldier">Gas Soldier</a></li>
</ul>

CSS

Definimos no “a” o background com a imagem e nas classes criadas manipulamos onde serão buscados os trechos desejados da imagem através da propriedade “background-position”.

Seguindo esta mesma linha, definimos o “a:hover” de cada classe:

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Soldiers */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;border:1px solid #eee;width:100px;height:100px;text-indent:-15000px;background-image:url(soldiers.gif)}
ul li a:hover{border-color:#999}

/* Aspira Soldier */
ul li a.aspira_soldier{background-position:0 0}
ul li a.aspira_soldier:hover{background-position:0 -100px}

/* Elite Soldier */
ul li a.elite_soldier{background-position:-100px 0}
ul li a.elite_soldier:hover{background-position:-100px -100px}

/* Sniper Soldier */
ul li a.sniper_soldier{background-position:-200px 0}
ul li a.sniper_soldier:hover{background-position:-200px -100px}

/* Gas Soldier */
ul li a.gas_soldier{background-position:-300px 0}
ul li a.gas_soldier:hover{background-position:-300px -100px}

Resultado

Neste caso temos o efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra:

Declaração única

A declaração única consiste em compactar diversas propriedades com a mesma finalidade em apenas uma.

Aqui veremos quais são essas propriedades e como utilizar a declaração única corretamente.

Margin e padding

Se todos os valores forem iguais:

/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

/* Declaração única */
seletor{margin:10px}

Se os valores top/bottom e right/left forem iguais:

/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}

/* Declaração única */
seletor{margin:10px 20px}

Se os valores right/left forem iguais:

/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}

/* Declaração única */
seletor{padding:10px 20px 30px}

Se nenhum valor for igual:

/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

/* Declaração única */
seletor{padding:10px 20px 30px 40px}

Border

/* Declaração normal */
seletor {
border-width: 1px;
border-style: solid;
border-color: #666666;
}

/* Declaração única */
seletor{border:1px solid #666}

Font

/* Declaração normal */
seletor {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 18px;
font-family: arial;
}

/* Declaração única */
seletor{font:italic small-caps bold 12px/18px arial}

Background

/* Declaração normal */
seletor {
background-color: #666666;
background-image: url(imagem.gif);
background-repeat: repeat-x;
background-position: top;
}

/* Declaração única */
seletor{background:#666 url(imagem.gif) repeat-x top}

List-style

/* Declaração normal */
seletor {
list-style-type: disc;
list-style-position: inside;
list-style-image: url(imagem.gif);
}

/* Declaração única */
seletor{list-style:disc inside url(imagem.gif)}

Color

Se todos os hexadecimais forem iguais:

/* Declaração normal */
seletor {
color: #666666;
}

/* Declaração única */
seletor{color:#666}

Se todos os pares de hexadecimais forem iguais:

/* Declaração normal */
seletor {
color: #6699cc;
}

/* Declaração única */
seletor{color:#69c}

Importante

Na declaração única os valores sempre devem seguir o sentido horário (top/right/bottom/left) e a compactação dos hexadecimais pode ser aplicada em qualquer propriedade que contenha cor (border-color, background-color, etc).

Método otimizado

Diferente da identação convencional utilizada no HTML (com TAB’s) o CSS pode utilizar um método otimizado.

Exemplo utilizando a identação convencional (355 bytes):

/* CSS Reset */

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
}

/* Menu */

ul li {
float: left;
}

ul li a {
float: left;
display: inline;
margin-right: 5px;
padding: 10px;
border: 1px solid #eee;
font: bold 12px arial;
color: #666;
background: #fff;
}

ul li a:hover {
border-color: #999;
}

Exemplo utilizando o método otimizado (291 bytes):

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Menu */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;padding:10px;border:1px solid #eee;font:bold 12px arial;color:#666;background:#fff}
ul li a:hover{border-color:#999}

Lembrando que cada TAB, quebra de linha ou espaço consumirá 1 byte, devemos eliminá-los mesclando todos os seletores, propriedades e valores, removendo sempre o último “;” (ponto e vírgula) antes do fechamento da “}” (chave).

A idéia é termos um documento leve afim de economizar R$ por conta da diminuição do consumo de banda, porém a organização é essencial para justificar a ausência da identação, para isso, procure adotar um padrão na ordem das propriedades e identifique cada bloco utilizando comentários.

Parece pouco?

Vamos supor que um grande portal tenha em média 1 milhão de acessos por dia:

355 bytes * 1.000.000 = 355.000.000 bytes (identação convencional)
291 bytes * 1.000.000 = 291.000.000 bytes (método otimizado)
355.000.000 bytes – 291.000.000 bytes = 64.000.000 bytes (economia)
64.000.000 bytes = 62.500 megabytes = 61 gigabytes

Economia de 61 gigabytes por dia para um trechinho de CSS! Ainda parece pouco?

Você pode deixar uma resposta, ou trackback de seu site.