você está aqui: Home  → Arquivo de Mensagens

Ebook Gratuito: Dá para fazer em Shell?, com o Prof. Julio Neves

Csstidy - analisador e otimizador de código css

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 13 de junho de 2014

O aplicativo csstidy é um analisador e otimizador de código css. Está disponível como código executável para os ambientes Windows, GNU/Linux e OSX). Pode ser usado tanto através da linha de comandos como na forma de um script PHP.

Rodando o comando na folha de estilos da Dicas-L, além de aprender mais um pouco sobre a melhor forma de codificar o css, dá para ver também que é possível diminuir bastante o tamanho do arquivo.

Reproduzo a seguir um pequeno trecho das modificações sugeridas pelo programa:

csstidy style.css Style.css 

Selectors: 42 | Properties: 193
Input size: 5.707KiB  Output size: 4.091KiB  Compression ratio: 28.32%
—---------------------------------

4: Optimised number: Changed "0px" to "0"
5: Optimised number: Changed "0px" to "0"
14: Optimised color: Changed "black" to "#000"
16: Optimised color: Changed "rgb(255,255,255)" to "#FFF"
55: Optimised number: Changed "0px" to "0"
55: Optimised shorthand notation (margin): Changed "0 0 0 0" to "0"
56: Optimised number: Changed "0px" to "0"
93: Optimised shorthand notation (margin): Changed "10px 10px 10px 10px" to "10px"
94: Optimised number: Changed "0px" to "0"
97: Invalid property in CSS2.1: border-radius
98: Optimised color: Changed "#888888" to "#888"
98: Invalid property in CSS2.1: box-shadow
100: Optimised color: Changed "black" to "#000"
101: Optimised color: Changed "yellow" to "#FF0"
106: Optimised color: Changed "#3300CC" to "#30C"
108: Optimised font-weight: Changed "normal" to "400"
113: Optimised color: Changed "white" to "#FFF"
227: Fixed invalid color name: Changed "lightgrey" to "#D3D3D3"

A primeira coisa que notei é a taxa de compressão obtida: 28.32%. É muita coisa, principalmente levando-se em conta que a folha de estilos é carregada em cada página que o servidor web oferece. O benefício é duplo, as páginas de seu site irão carregar mais rapidamente, proporcionando uma melhor experiência aos seus usuários e o seu uso de banda será reduzido.

Outro exemplo, na definição do parâmetro margin, eu costumo especificar os quatro valores: margens esquerda e direita, e margens superiores e inferiores. Se o valor for o mesmo, basta especificar apenas uma vez que por padrão os demais campos assumem o mesmo valor.

55: Optimised shorthand notation (margin): Changed "0 0 0 0" to "0"

Para instalar em sistemas Debian GNU/Linux e derivados, digitar:

% sudo apt-get install csstidy


Veja a relação completa dos artigos de Rubens Queiroz de Almeida