O CSS define a aparência de uma página web. Esta ferramenta remove espaços desnecessários antes da publicação ou adiciona espaçamento para facilitar a leitura e a edição das regras.
Minificar seu CSS
Escolha
Minificaracima dos editores.Use Colar para colar o CSS no editor de entrada ou
Importarpara escolher um arquivo.cssdo computador.Com a opção Processamento automático ativada, o resultado é atualizado enquanto você digita. Onde o ajuste estiver visível, você pode desativá-lo e clicar em Minificar ao terminar de editar. No celular, use Minificar sempre que precisar atualizar o resultado.
Use
Copiarpara copiar o resultado ouBaixarpara salvá-lo como arquivo CSS.
Por exemplo, o CSS abaixo deixa um título vermelho. Após a minificação, o resultado é h1{color:red}. O título continuará vermelho.
h1 {
color: red;
}Tornar CSS comprimido mais legível
Escolha Formatar quando o CSS estiver difícil de ler por estar todo junto. O resultado coloca as declarações em linhas separadas e aplica um recuo de dois ou quatro espaços, conforme o ajuste escolhido.
A formatação adiciona espaços, então o resultado pode ser maior que o original. Ela não recupera comentários nem a formatação original removidos por uma minificação anterior.
Trocar passa o resultado para o editor de entrada e alterna entre Minificar e Formatar. Se a opção Processamento automático estiver desativada, clique novamente no botão principal para gerar o novo resultado.
Escolher o que o minificador pode alterar
| Ajuste | Efeito |
|---|---|
| Manter comentários importantes | Mantém os comentários que começam com /*!. Os comentários comuns são removidos. Desative esta opção apenas se também quiser remover os comentários marcados. |
| Reestruturar e unir regras | Permite unir e reorganizar regras compatíveis. Desative para impedir essas alterações na estrutura. |
| Processamento automático | Recalcula o resultado quando você altera a entrada ou os ajustes. Quando desativado, o resultado anterior é apagado se não corresponder mais à entrada. Este ajuste não aparece no celular. |
| Recuo do resultado | No modo Formatar, escolha dois ou quatro espaços por nível de recuo. |
| Quebrar linhas | Ajusta as linhas longas à largura dos editores. Muda apenas a exibição do código na tela, não o arquivo baixado. |
Teste a folha de estilo resultante no site antes de substituir a original, principalmente se a reestruturação estiver ativada. Guarde o arquivo original para poder recuperá-lo.
Importar, copiar e baixar
O comando Importar aceita um arquivo CSS por vez. Você também pode soltar um arquivo CSS na página. Se a entrada já contiver código, a importação de outro arquivo pede confirmação antes de substituí-lo. Cancelar mantém seu trabalho.
O botão Colar substitui a entrada pelo texto da área de transferência. O navegador pode pedir permissão. Você também pode clicar no editor e usar o atalho habitual para colar.
Os comandos Copiar e Baixar usam o editor de saída. Os arquivos baixados são CSS e têm minified ou beautified no nome. Salve o resultado antes de sair da página, pois o conteúdo dos editores não é restaurado ao recarregar.
No celular, a barra de ações mantém o comando principal e Copiar à mão. Abra Mais para acessar os outros comandos e os ajustes de comentários, reestruturação ou recuo do modo escolhido. O ajuste Processamento automático não está disponível nessa apresentação.
Entender os tamanhos exibidos
Os tamanhos aparecem abaixo dos editores em janelas com mais de 768 pixels de largura. Ficam ocultos em janelas mais estreitas. Os tamanhos de entrada e saída indicam os bytes do texto CSS. A economia compara esses dois valores. A formatação pode aumentar o tamanho do arquivo, embora o percentual de economia exibido não fique negativo.
O valor gzip estima o tamanho após a compressão gzip neste navegador. O servidor web pode comprimir o arquivo de outra forma, então esse valor não mede o que cada visitante vai baixar.
Se o resultado não for o esperado
No modo Minificar, o aviso de sintaxe indica a linha e a posição a verificar. Confira se há dois-pontos entre cada propriedade e seu valor e se os parênteses, colchetes e chaves estão fechados corretamente. O minificador pode gerar um resultado a partir de CSS parcialmente incorreto. Portanto, obter um resultado não prova que todas as regras estejam certas.
O modo Formatar organiza o texto para facilitar a leitura e também mostra os problemas de sintaxe detectados pelo analisador. Nenhum dos modos verifica se cada declaração funciona como esperado.
Se o resultado desaparecer após uma edição, clique em Minificar ou Formatar novamente. Onde o ajuste Processamento automático estiver visível, ative-o se quiser atualizar o resultado durante a digitação. O comando Limpar limpa os dois editores após a confirmação. Cancelar mantém o conteúdo.
O CSS é processado no navegador. As estatísticas abaixo da ferramenta podem ficar salvas neste dispositivo, mas não guardam uma cópia da folha de estilo. Os totais contam os processamentos iniciados com Minificar ou Formatar. As atualizações automáticas não entram nesses totais.