Reduza o tamanho do seu CSS
Filed Under (CSS/XHTML, Tutoriais) by Cadu de Castro Alves on 23-09-2007
No CSS, existem diversas formas de escrever os códigos. Quanto maior ele for, mais tempo levará para ser carregado. Porém, existem diversas técnicas para reduzí-lo. Uma das mais conhecidas é usando CSS Shortcuts, que são formatos reduzidos para definir os mesmos atributos.
Background
O fundo possui 5 atributos: background-attachment, background-color, background-image, background-position e background-repeat.
Formatação Normal
body {
background-attachment: scroll;
background-color: #fff;
background-image: url(body-bg.gif);
background-position: top left;
background-repeat: repeat-y;
}
Formatação Reduzida
body {
background: #fff url(body-bg.gif) repeat-y scroll top left;
}
Border
As bordas possuem 20 formas diferentes para formatar as bordas de um elemento. Porém, basicamente, temos 3 atributos para cada lado da borda: top, left, bottom e right.
Formatação Normal
div {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
}
Formatação Reduzida
div {
border: 1px solid #000;
}
Font
As fontes possuem 5 atributos diferentes: font-style, font-variant, font-weight, font-size/line-height e font-family.
Formatação Normal
p {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: Tahoma, Arial, Verdana, sans-serif;
}
Formatação Reduzida
p {
font: normal normal bold 1em/1.2em Tahoma, Arial, Verdana, sans-serif;
}
List
As listas possuem 3 atributos diferentes: list-style-type, list-style-position e list-style-image.
Formatação Normal
li {
list-style-type: disc;
list-style-position: inside;
list-style-image: url(lista.gif);
}
Formatação Reduzida
li {
list-style: disc inside url(lista.gif);
}
Margin/Padding
Margin e padding possuem 4 atributos diferentes, repectivamente: margin-top, margin-right, margin-bottom, margin-left.
Formatação Normal
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
Formatação Reduzida
div {
margin: 5px 10px 15px 20px; /* top com 5px, right com 10px, bottom com 15px, left com 20px */
padding: 5px 10px 15px 20px; /* top com 5px, right com 10px, bottom com 15px, left com 20px */
}
Nesses dois casos, existem formas ainda mais reduzidas de escrever seus atributos caso algum desses atributos possuam valores iguais. Veja as variações abaixo:
Formatação Reduzida
div {
margin: 5px; /* top, right, bottom e left com 5px */
padding: 5px; /* top, right, bottom e left com 5px */
}
p {
margin: 5px 10px; /* top e bottom com 5px, right e left com 10px */
padding: 5px 10px; /* top e bottom com 5px, right e left com 10px */
}
span {
margin: 5px 10px 15px; /* top com 5px, right e left com 10px, bottom com 15px */
padding: 5px 10px 15px; /* top com 5px, right e left com 10px, bottom com 15px */
}
Color
Existem 3 formas diferentes para definir cores: pelo seu nome (red, white, black, etc), pelo valor RGB (rbg(255, 255, 0)) ou usando números hexadecimais (#ff00cc).
Normalmente, utilizam-se os número hexadecimais. Neste caso, é possível escrevê-los de duas formas. Quaisquer cores que sejam formadas por pares repetidos de digitos podem ser definidas usando-se apenas 3 dígitos.
Formatação Normal
p {
color: #ff00cc;
}
Formatação Reduzida
p {
color: #f0c;
}
Esse método por ser usado em qualquer atributo que permita que sejam definidas as cores de um elemento. Veja o exemplo abaixo:
Formatação Normal
div {
color: #000000;
border: 1px solid #ff0000;
}
Formatação Reduzida
div {
color: #000;
border: 1px solid #f00;
}
Zero
Quando usamos os números para definir as dimensões de cada atributo usando px, em, pt, in ou qualquer outra unidade de medida, não é preciso utilizá-las quando o valor é 0 (zero). Ou seja, 0, 0px, 0em, 0pt ou 0in são exatamente iguais. A única exceção é na utilização de porcentagem. Alguns browsers apresentam problemas ao combinar valores usando porcentagem junto com o zero sem o símbolo de porcentagem (Ex.: 100% 100% 50% 0). Neste caso, aconselha-se a utilização do símbolo. Veja os exemplos:
Formatação Normal
div {
margin: 10px 5px 10px 0px;
padding: 10px 0px;
}
Formatação Reduzida
div {
margin: 10px 5px 10px 0;
padding: 10px 0;
}
Dicas
Se você usa um software visual para criar suas páginas, como o Dreamweaver ou o FrontPage, verifique se é possível configurá-lo para gerar os atributos no formato reduzido.
Juntando todos os exemplos de Formatação Normal desse tutorial num arquivo, o seu tamanho total ficou em cerca de 961 bytes. Já os respectivos exemplos na Formatação Reduzida resultaram num arquivo de cerca de 346 bytes. Obtive uma redução de 64% em relação ao primeiro arquivo.
Encontrei na internet dois sites que otimizam códigos CSS: Icey CSS Compressor e FlumpCakes CSS Optimizer. Basta que você copie o conteúdo de seu arquivo e selecione algumas opções, que ele te dá o mesmo conteúdo num formato reduzido. Experimente!
