Minificador de CSS

O Minificador de CSS é uma ferramenta gratuita que remove caracteres desnecessários do CSS e retorna a folha de estilos minificada, com a contagem de caracteres antes e depois.

O que a minificação de CSS faz?

A minificação de CSS reduz a quantidade de caracteres de uma folha de estilos ao remover formatações desnecessárias para os navegadores. Em geral, isso inclui recuos, quebras de linha, comentários e espaços opcionais ao redor de sinais de pontuação.

O navegador continua recebendo as regras, os seletores e os valores das declarações CSS. O resultado visual esperado deve permanecer igual, mas o arquivo transferido para o navegador fica menor. O benefício prático de minificar uma folha de estilos CSS depende do arquivo original, da compactação HTTP e do cache do navegador. Se a folha de estilos já estiver bem compactada, a redução dos bytes transferidos poderá ser pequena.

A minificação é útil antes da implantação, ao inspecionar CSS de terceiros muito grande ou ao verificar quanto a formatação usada durante o desenvolvimento contribui para o tamanho do arquivo. Ela não é o mesmo que uma otimização que remove seletores não utilizados, combina regras equivalentes ou reescreve declarações. Esta ferramenta não afirma realizar essas operações mais amplas.

Como usar o Minificador de CSS?

Cole uma folha de estilos no campo CSS e execute a ferramenta. Depois, copie o resultado em CSS minificado para o fluxo de compilação ou implantação correspondente. Mantenha o arquivo-fonte CSS legível em vez de substituí-lo permanentemente pela cópia minificada.

1. Comece com o CSS-fonte usado pelo seu site ou aplicativo.
2. Antes de minificá-lo, confira se a análise sintática ocorre corretamente.
3. Cole o conteúdo em CSS e execute a ferramenta.
4. Compare Caracteres do CSS com Caracteres do CSS minificado.
5. Teste o resultado em uma página de homologação, incluindo estados responsivos, estilos de impressão e componentes interativos.

A minificação do CSS acontece no servidor. O CSS enviado é transmitido ao servidor por HTTPS e não é armazenado. Se a folha de estilos contiver URLs confidenciais, nomes de host internos ou outros dados sensíveis, avalie se o envio a qualquer ferramenta executada no servidor está de acordo com a política de tratamento de dados da sua organização.

Como interpretar o resultado?

O resultado contém o CSS transformado e duas contagens de caracteres, permitindo inspecionar a saída e ver diretamente a redução. Caracteres do CSS corresponde ao comprimento do texto enviado, enquanto Caracteres do CSS minificado corresponde ao comprimento após a minificação.

As contagens são produzidas por uma função de comprimento compatível com caracteres multibyte. Elas não devem ser consideradas uma previsão exata do tamanho transferido pela rede. Caracteres UTF-8 podem ocupar mais de um byte, e a compactação com Brotli ou gzip pode alterar consideravelmente o tamanho enviado por HTTP.

Esta ferramenta não apresenta um campo separado de validação ou de erros. Portanto, ela não deve ser usada como um validador de CSS. Problemas comuns, como chaves sem correspondência, dois-pontos ausentes, strings sem fechamento, comentários malformados ou aninhamento inválido, precisam ser verificados com as ferramentas de desenvolvimento do navegador, um linter ou um validador que reconheça os padrões da linguagem. Um CSS inválido pode gerar uma saída aparentemente compacta, mas que não funciona como esperado.

Exemplos simples de minificação de CSS

Uma versão minificada convencional remove a formatação sem alterar a regra em si.

CSS

p { color: red; }

CSS minificado

p{color:red}

Neste exemplo, a entrada legível contém 17 caracteres, e a forma compacta contém 12. Espaços e sinais de pontuação dentro de strings entre aspas devem permanecer como parte do valor.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

CSS minificado

.notice,.warning{color:#c00;margin:0 1rem}

Excluir todos os espaços indiscriminadamente não é seguro. O espaço em branco pode representar um combinador de descendentes, e operadores aritméticos em funções como calc() têm requisitos de espaçamento. Strings, URLs de dados, identificadores com escape e valores de propriedades personalizadas também exigem tratamento que leve a sintaxe em consideração.

Caracteres acentuados e não latinos podem aparecer em strings e, conforme as regras de identificadores CSS, em seletores. Números, separadores decimais, porcentagens e unidades fazem parte da sintaxe, não são texto decorativo. Por isso, não podem simplesmente ser encurtados sem compreender a declaração. Uma folha de estilos vazia não contém CSS para minificar. Para folhas de estilos muito grandes, normalmente é mais fácil repetir e auditar a minificação durante a compilação do que copiar texto por meio de um formulário online.

Quando não vale a pena minificar o CSS?

Em geral, não vale a pena repetir a minificação quando o arquivo já está minificado ou foi gerado como um recurso compacto para produção. Uma segunda minificação de CSS pode economizar pouco ou nada, além de acrescentar outra transformação ao processo de lançamento.

• Não formate e depois minifique novamente um CSS que será lido apenas pelo navegador ou pelo sistema de compilação.
• Não use a minificação como substituta da remoção de regras não utilizadas de frameworks ou de declarações duplicadas.
• Não espere que a redução de caracteres revele solicitações que bloqueiam a renderização, problemas de cache ou lentidão no carregamento de fontes.
• Não descarte o código-fonte formatado, principalmente ao depurar especificidade, camadas da cascata ou media queries.

Se o CSS for empacotado automaticamente, use o minificador nesse pipeline para que todos os lançamentos sigam as mesmas configurações. Ao implantar recursos relacionados manualmente, o Minificador de HTML e o Minificador de JS podem aplicar a operação equivalente a esses tipos de arquivo.

Perguntas frequentes

Minificar o CSS altera a especificidade dos seletores?

Uma minificação correta não altera a especificidade, pois os seletores devem manter os mesmos componentes e a mesma ordem. Ainda assim, compare seletores complexos com atenção se o código-fonte usar escapes, pseudoclasses mais recentes ou uma sintaxe gerada que um minificador antigo talvez não reconheça.

Posso minificar propriedades personalizadas do CSS?

As propriedades personalizadas podem ser incluídas, mas seus valores talvez preservem tokens e espaços para substituição posterior com var(). Teste as declarações que contêm cálculos, valores alternativos ou strings incorporadas nos navegadores compatíveis com o seu projeto, em vez de presumir que todo espaço aparentemente dispensável seja opcional.

A ferramenta cria um source map?

Não há um resultado de source map disponível. Se a depuração em produção exigir o mapeamento do CSS compacto de volta para Sass, Less ou outro código-fonte, gere o arquivo minificado e seu source map no compilador ou bundler que conhece a estrutura original dos arquivos.

Os comentários de licença permanecem na saída?

Não presuma que os comentários CSS serão mantidos. Se a licença de uma dependência exigir que um aviso acompanhe o código distribuído, guarde esse aviso separadamente ou inspecione a saída gerada antes do lançamento.

A minificação pode corrigir um CSS com erros?

Não. A minificação remove caracteres desnecessários, mas não corrige um seletor inválido, uma propriedade incompatível, um recurso ausente nem uma cascata incorreta. Primeiro, resolva os avisos de análise sintática e as regressões visuais no código-fonte.

Verificações antes da implantação

Salve a saída minificada como um recurso de produção separado, verifique se as URLs e o conteúdo entre aspas estão intactos e carregue o arquivo em uma página de homologação com o console do navegador aberto. Compare páginas representativas em janelas estreitas e largas. Depois, confirme se o servidor aplica o tipo de conteúdo, a política de cache e a compactação HTTP esperados.