Formatador e minificador de CSS

Como formatar ou minificar CSS

1. Cola a tua folha de estilos ou clica em Abrir um ficheiro para carregar um ficheiro .css (até 10 MB).
2. Escolhe a Indentação (2 espaços, 4 espaços ou uma tabulação) e se queres uma Linha em branco entre regras.
3. Clica em Formatar (embelezar) para obteres código legível, ou em Minificar para obteres a versão mais pequena.
4. Na minificação, mantém Juntar regras ao minificar marcado para o melhor resultado, e Manter os comentários /*! */ marcado para preservar os cabeçalhos de licença.
5. Copia ou transfere o resultado. A linha de estado mostra o tamanho antes e depois, em bytes, e a percentagem poupada.

Se faltar uma chaveta, a ferramenta para e diz-te em que linha está a { por fechar ou a } a mais, em vez de produzir um resultado estragado.

Formatar: CSS legível e coerente

Formatar (embelezar) usa o js-beautify, o formatador presente em muitos editores de código. Coloca cada declaração na sua própria linha, indenta o conteúdo de cada regra e das at-rules como @media e @supports, escreve cada seletor de um grupo na sua própria linha e acrescenta um espaço depois dos dois pontos de cada declaração. As linhas em branco existentes são mantidas (no máximo uma seguida), por isso as secções lógicas do teu ficheiro continuam visíveis. O formatador nunca altera valores, a ordem das regras ou o significado dos seletores: só mexe nos espaços.

É útil para ler o CSS minificado de um site, para rever uma folha de estilos gerada por uma ferramenta ou para arrumar um ficheiro editado por várias pessoas com hábitos diferentes.

Minificar: CSS mais pequeno com o csso

Minificar usa o csso (CSS Optimizer), um minificador estrutural. Além de retirar espaços e comentários, reescreve a folha de estilos numa forma equivalente e mais curta:

• as cores são encurtadas (#ff0000 passa a red, #ffffff passa a #fff);
• as unidades e os zeros são simplificados (0px passa a 0, 0.5em passa a .5em);
• as declarações duplicadas são removidas e as propriedades abreviadas (shorthand) são combinadas quando é seguro;
• com Juntar regras ao minificar, as regras com declarações idênticas são agrupadas (a{color:red} b{color:red} passa a a,b{color:red}) e as declarações sobrepostas são eliminadas.

A reestruturação é segura em folhas de estilos normais, mas desloca declarações. Se o teu CSS depender de uma ordem de cascata muito específica, por exemplo hacks para navegadores, desmarca a opção: o csso passa então a comprimir cada regra no seu lugar.

Os comentários são removidos, exceto os comentários «importantes» que começam por /*!, usados habitualmente para licenças. Desmarca Manter os comentários /*! */ para os removeres também.

Tamanho antes e depois

A linha de estado compara o tamanho da entrada e do resultado em bytes UTF-8. O código formatado costuma ser maior do que o original; o código minificado poupa tipicamente 20 a 50 % em CSS escrito à mão. Lembra-te de que os servidores também comprimem os ficheiros com gzip ou Brotli, por isso a poupança na transferência é menor do que o valor bruto, mas a minificação continua a reduzir o tempo de análise e o tamanho dos ficheiros em cache.