As Folhas de Estilo, CSS ou Cascading Style Sheets permitem controlar todos os aspectos de layout de uma página da web através de um arquivo externo. Isto gera uma série de vantagens, entre elas:
- a possibilidade de alterar variáveis sem mexer no conteúdo do site, basta a alteração em um único arquivo que todas as páginas serão afetadas;
- ser usado como complemento de um HTML;
- o código em HTML fica mais limpo, o que facilita que os mecanismos de busca navegarem por sua página; posicionamento de blocos em qualquer lugar, independente da ordem que apareçam no HTML;
- controle satisfatório sobre os blocos que se apresentam em uma página, em conjunto;
- uma página de impressão pode ser criada a fim de que se suprima certos conteúdos e cores, por exemplo e
- as páginas carregam mais rápido.
Sobre este último ponto incide a dica de hoje. Como no caso do Compressor de JavaScript, você pode comprimir seu arquivo .css através de uma ferramenta online, o uqe lhe salvará alguns segundos no carregamento de sua página. No geral, eu escrevo as folhas de estilo da sguinte forma para facilitar a leitura e identificação dos blocos (valores imaginários):
#main{
background:#FFFFFF url(images/main.gif) no-repeat;
float:right;
margin:5px;
width:548px;
}
Entretanto, uma boa forma é evitar todos estes espaços em uma linha simples que trará o mesmo resultado:
#main{ background:#FFF url(images/main.gif) no-repeat; float:right; margin:5px; width:548px}
Este pequeno trecho, de um tamanho original de 118 bytes passou a 95 bytes, reduzindo o arquivo em 20%. Para fazer isso, basta usar uma ferramenta online disponível no site CSS Drive. Basta escolher o tipo de compressão (baixa, normal ou super compacta) e o que deseja fazer com os comentários (não alterá-los, eliminar todos ou eliminar comentários maiores que X). Feito isso, basta clicar em Compress It e copiar o novo código.
Um Trackback
[...] limpo pode ajudar bastante no carregamento de uma página da web. Já vimos aqui como otimizar as folhas de estilo e também javascript, faltava apenas o próprio html. Apresento, então, uma ferramenta [...]