Como minificar código CSS e interpretar o resultado

Para que serve a minificação de CSS

O CSS Minifier serve para tornar um texto CSS mais compacto através de transformações de espaço, comentários e pontuação. É útil quando pretende preparar uma folha de estilos para uma entrega mais enxuta, comparar o tamanho antes e depois ou obter uma versão sem formatação excedente, sem ter de editar cada regra manualmente.

Como minificar um texto CSS

1. Reúna o texto CSS que pretende transformar. Inclua regras, seletores, declarações e comentários de bloco que façam parte do conteúdo a tratar.

2. Cole o CSS no campo de texto opcional da ferramenta. O campo começa vazio, por isso confirme que o conteúdo foi inserido antes de continuar.

3. Submeta o conteúdo para obter o resultado transformado. A ferramenta remove os comentários de bloco e o espaço em torno de chavetas, ponto e vírgula, dois-pontos e vírgulas. O espaço consecutivo que permanecer é reduzido a um único espaço, e os espaços no início e no fim são retirados.

4. Verifique o CSS devolvido antes de o utilizar. Confirme, em particular, se os comentários desapareceram e se a separação entre valores, seletores e declarações continua legível para o seu caso.

5. Compare os dados apresentados para a entrada não vazia. A ferramenta indica o tamanho do texto original, o tamanho transformado, a diferença entre ambos e uma percentagem de poupança arredondada a uma casa decimal. Use esses valores para avaliar a redução obtida no conteúdo que submeteu.

Como interpretar o resultado

O resultado é uma versão textual mais compacta do CSS fornecido. A transformação atua sobre comentários de bloco, espaços selecionados e o ponto e vírgula colocado imediatamente antes de uma chaveta de fecho; não deve ser lida como uma alteração geral de toda a estrutura do CSS.

Para entrada não vazia, a diferença entre os dois tamanhos mostra quantos caracteres foram retirados, enquanto a percentagem resume essa redução relativamente ao texto original. Uma percentagem baixa pode ser normal quando o CSS já tem pouca formatação ou poucos comentários.

Se o campo receber uma cadeia vazia ou apenas espaços, o resultado é devolvido vazio e os tamanhos original e transformado ficam a zero. Nesse cenário, não há conteúdo sobre o qual calcular uma poupança. Depois da transformação, faça uma revisão do resultado no contexto do seu projeto, sobretudo se o texto tiver construções que dependam de espaçamento específico.

Exemplo prático

Está a preparar uma regra CSS de menu e quer comparar o texto original com uma versão mais compacta.

Cole o texto /* menu */ .menu { color: #333; margin: 0 10px; } no campo CSS e submeta-o para transformação.

O resultado tem o comentário de bloco ausente, espaços selecionados reduzidos e o ponto e vírgula antes da chaveta de fecho removido. Para a entrada não vazia, são apresentados os dois tamanhos, a diferença e uma percentagem de poupança.

Limitações

• A percentagem de poupança é apresentada para texto não vazio; com uma entrada vazia ou só com espaços, o resultado e os tamanhos ficam a zero.

Erros comuns

• Causa: o campo ficou vazio ou contém apenas espaços. Ação: cole o texto CSS no campo antes de submeter; nesse caso, um resultado vazio e tamanhos a zero são o comportamento esperado.

Perguntas frequentes

Que dados aparecem depois de minificar CSS?

Para uma entrada não vazia, são apresentados o tamanho original, o tamanho transformado, a diferença e a percentagem de poupança arredondada a uma casa decimal. Para uma entrada vazia ou só com espaços, o resultado e os dois tamanhos ficam a zero.

Os comentários de bloco são removidos?

Quando o texto contém comentários de bloco, estes são removidos antes das restantes transformações. O resultado deixa de conter o texto desses comentários.

Porque é que a percentagem de poupança pode ser baixa?

Se o CSS já tiver pouco espaço excedente, comentários ou pontuação separadora, a redução pode ser menor. A percentagem apresentada refere-se ao texto não vazio que foi submetido.