Minificador de CSS

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

O que faz a minificação de CSS?

A minificação de CSS reduz o número de caracteres de uma folha de estilos ao remover formatação de que os navegadores não precisam. Normalmente, isto inclui indentação, quebras de linha, comentários e espaços opcionais junto à pontuação.

O navegador continua a receber as regras CSS, os seletores e os valores das declarações. O resultado visual pretendido deverá permanecer inalterado, mas o ficheiro transferido para o navegador será mais pequeno. O benefício prático de minificar uma folha de estilos CSS depende do ficheiro original, da compressão HTTP e da colocação em cache pelo navegador. Numa folha de estilos bem comprimida, a redução do número de bytes transferidos poderá ser apenas modesta.

A minificação é útil antes da publicação, ao analisar CSS de terceiros demasiado volumoso ou ao verificar quanto espaço é ocupado pela formatação usada durante o desenvolvimento. Não é o mesmo que uma otimização que remove seletores não utilizados, combina regras equivalentes ou reformula declarações. Esta ferramenta não alega realizar essas operações mais abrangentes.

Como se usa o Minificador de CSS?

Cola uma folha de estilos no campo CSS e executa a ferramenta. Depois, copia o resultado de CSS minificado para o processo de compilação ou publicação relevante. Mantém o ficheiro-fonte CSS legível, em vez de o substituíres definitivamente pela cópia minificada.

1. Começa pelo CSS de origem utilizado pelo teu site ou aplicação.
2. Confirma que é processado corretamente antes de o minificares.
3. Cola-o em CSS e executa a ferramenta.
4. Compara Caracteres CSS com Caracteres do CSS minificado.
5. Testa o resultado numa página de teste, incluindo estados responsivos, estilos de impressão e componentes interativos.

A minificação do CSS é realizada no servidor. O CSS que enviares é transmitido ao servidor através de HTTPS e não é armazenado. Se a folha de estilos contiver URLs confidenciais, nomes de anfitriões internos ou outros dados sensíveis, avalia se o envio para uma ferramenta processada no servidor está de acordo com a política de tratamento de dados da tua organização.

Como devo interpretar o resultado?

O resultado inclui o CSS transformado e duas contagens de caracteres, para que possas verificar diretamente o conteúdo e a redução obtida. Caracteres 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 cálculo de comprimento compatível com caracteres multibyte. Não devem ser consideradas uma previsão exata do tamanho transferido pela rede. Os caracteres UTF-8 podem ocupar mais de um byte, e a compressão Brotli ou gzip pode alterar substancialmente o tamanho enviado através de HTTP.

Esta ferramenta não apresenta um campo separado de validação ou de erros. Por isso, não deve ser utilizada como validador de CSS. Problemas comuns, como chavetas sem correspondência, a falta de dois pontos, uma cadeia de texto não terminada, comentários malformados ou aninhamento inválido, têm de ser verificados com as ferramentas de programador do navegador, um linter ou um validador que reconheça as normas aplicáveis. Um CSS inválido pode gerar um resultado aparentemente compacto, mas que não funciona como esperado.

Exemplos simples de minificação de CSS

Uma versão minificada convencional remove a formatação, mas mantém a própria regra.

CSS

p { color: red; }

CSS minificado

p{color:red}

Neste exemplo, a entrada legível tem 17 caracteres e a forma compacta tem 12. Os espaços e a pontuação dentro de cadeias entre aspas têm de permanecer no valor.

CSS

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

CSS minificado

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

Eliminar indiscriminadamente todos os espaços não é seguro. Os espaços em branco podem representar um combinador de descendentes, e os operadores aritméticos em funções como calc() têm requisitos de espaçamento. As cadeias, os URLs de dados, os identificadores com sequências de escape e os valores de propriedades personalizadas também exigem um tratamento que tenha em conta a sintaxe.

Podem surgir caracteres acentuados e não latinos em cadeias e, desde que respeitem as regras dos identificadores CSS, em seletores. Os números, os pontos decimais, as percentagens e as unidades fazem parte da sintaxe, não são texto decorativo. Por isso, não podem ser simplesmente encurtados sem compreender a declaração. Uma folha de estilos vazia não contém CSS para minificar. No caso de folhas de estilos muito grandes, um minificador integrado no processo de compilação é geralmente mais fácil de repetir e auditar do que copiar texto através de um formulário online.

Quando não compensa minificar CSS?

Normalmente, não compensa repetir a minificação quando um ficheiro já está minificado ou foi gerado como um recurso de produção compacto. Uma segunda minificação do CSS poderá reduzir pouco ou nada, além de acrescentar outra transformação ao processo de publicação.

• Não reformates e voltes a minificar CSS que apenas será lido por um navegador ou sistema de compilação.
• Não uses a minificação em substituição da remoção de regras não utilizadas de uma framework ou de declarações duplicadas.
• Não esperes que a redução de caracteres revele pedidos que bloqueiam a apresentação, problemas de cache ou um carregamento lento de tipos de letra.
• Não elimines o ficheiro-fonte formatado, sobretudo quando precisares de depurar a especificidade, as camadas da cascata ou as media queries.

Se o CSS for agrupado automaticamente, utiliza o minificador nesse processo para que todas as versões sigam as mesmas definições. Ao publicares manualmente recursos relacionados, o Minificador de HTML e o Minificador de JS podem aplicar a operação equivalente a esses tipos de ficheiro.

Perguntas frequentes

Minificar CSS altera a especificidade dos seletores?

Uma minificação correta não altera a especificidade dos seletores, porque estes devem conservar os mesmos componentes e a mesma ordem. Ainda assim, compara cuidadosamente os seletores complexos se o código de origem utilizar sequências de escape, pseudoclasses mais recentes ou sintaxe gerada que um minificador antigo possa não compreender.

Posso minificar propriedades personalizadas de CSS?

As propriedades personalizadas podem ser incluídas, mas os respetivos valores poderão conservar tokens e espaços para substituição posterior através de var(). Testa nos navegadores suportados pelo teu projeto as declarações que contenham cálculos, valores alternativos ou cadeias incorporadas, em vez de partires do princípio de que todos os espaços aparentemente dispensáveis são opcionais.

A ferramenta cria um mapa de código-fonte?

Não é apresentado qualquer mapa de código-fonte no resultado. Se a depuração em produção exigir a correspondência entre o CSS compacto e Sass, Less ou outro código-fonte, gera o ficheiro minificado e o respetivo mapa no compilador ou bundler que conhece a estrutura do ficheiro original.

Os comentários de licença são mantidos no resultado?

Não pressuponhas que os comentários CSS serão mantidos. Se a licença de uma dependência exigir que o código distribuído seja acompanhado por um aviso, guarda esse aviso em separado ou verifica o resultado gerado antes da publicação.

A minificação consegue corrigir CSS com erros?

Não. A minificação remove caracteres desnecessários, mas não corrige um seletor inválido, uma propriedade não suportada, um recurso em falta ou uma cascata incorreta. Resolve primeiro os avisos de processamento e as regressões visuais no código-fonte.

Verificações antes da publicação

Guarda o resultado minificado como um recurso de produção separado, confirma que os URLs e o conteúdo entre aspas permanecem intactos e carrega-o numa página de teste com a consola do navegador aberta. Compara páginas representativas em janelas estreitas e largas. Em seguida, confirma que o servidor aplica o tipo de conteúdo, a política de cache e a compressão HTTP esperados.