Minificar ou formatar
O modo Minificar remove espaços desnecessários e otimiza o CSS. O modo Formatar adiciona recuos e quebras de linha para facilitar a leitura de uma folha de estilo comprimida.
Minificar e formatar CSS
Reduza o tamanho de um arquivo CSS ou formate o código para facilitar a leitura. Compare o resultado com a folha de estilo original.
Modo de processamento
Mais ações
Ferramentas relacionadas
Suas estatísticas
0
Processamentos
0
Bytes economizados
0%
Compressão média
Nenhum
Modo favorito
0
Cópias
100%
Pontuação de atividade
Como minificar e formatar CSS
Não foi possível carregar o vídeo. Você pode seguir as instruções abaixo.
O vídeo mostra a interface em inglês.
Escolha Minificar para obter CSS compacto ou Formatar para ler melhor o CSS comprimido. O modo Formatar não recupera comentários já removidos. Guarde uma cópia da folha de estilo original antes de substituí-la.
Opções de minificação e formatação CSS
Otimização da estrutura
O CSSO pode encurtar valores, remover regras vazias e unir estruturas repetidas. A redução depende da folha de estilo e de a reestruturação de regras estar ativada.
Abrir um arquivo CSS
Use Importar para abrir um arquivo .css ou solte-o na área de entrada. O conteúdo será processado no modo escolhido.
Mostrar mais 3Mostrar menos
Avisos de sintaxe
O modo Minificar mostra a linha e a coluna dos erros detectados pelo analisador. Revise as mensagens antes de usar o CSS gerado.
Comentários e reestruturação
Mantenha os comentários marcados com /*! quando contiverem licenças ou outras notas importantes. Desative a reestruturação para evitar a união ou a reordenação das regras.
Processamento automático
Com a opção Processamento automático ativada, o resultado é atualizado durante a edição. Onde o ajuste estiver visível, você pode desativá-lo e processar o código com Minificar ou Formatar. No celular, esses comandos continuam disponíveis, mas o ajuste Processamento automático não aparece.
Perguntas frequentes
O que é minificação CSS?
A minificação CSS remove espaços e comentários desnecessários. Também pode encurtar valores, como #ffffff para #fff. Esta ferramenta usa o CSSO, que também otimiza regras e declarações repetidas quando a reestruturação está ativada.
Quanto a minificação reduz meu arquivo CSS?
A redução depende do código original. Uma folha de estilo com regras repetidas ou muitos comentários pode diminuir mais do que uma já comprimida. Em janelas com mais de 768 pixels de largura, compare os tamanhos abaixo dos editores. Esses valores ficam ocultos em janelas mais estreitas. O tamanho gzip é medido neste navegador, então o servidor pode enviar uma quantidade diferente de bytes.
Minificar CSS melhora a velocidade da página ou o SEO?
Reduzir uma folha de estilo pode diminuir a quantidade de CSS baixada pelos visitantes. O efeito no carregamento também depende do restante da página, do cache e de como o servidor entrega os arquivos. A minificação, sozinha, não garante melhores Core Web Vitals nem posições nos resultados de busca.
Qual é a diferença entre minificar e formatar CSS?
O modo Minificar produz CSS compacto para reduzir o tamanho do arquivo. O modo Formatar adiciona quebras de linha e recuos para facilitar a leitura e a edição. Formatar CSS comprimido não recupera comentários nem a formatação original que foram removidos.
Mostrar mais 4Mostrar menos
Como tornar CSS minificado mais legível?
Escolha Formatar, cole o CSS e selecione um recuo de 2 ou 4 espaços. O código formatado aparece no editor de saída, pronto para copiar ou baixar.
A minificação pode alterar o comportamento do meu CSS?
Revise e teste o resultado no site antes de substituir o original. A reestruturação pode unir ou reordenar regras. Desative-a quando a ordem for importante e confira os avisos de sintaxe do analisador.
A ferramenta detecta erros no meu CSS?
O modo Minificar mostra a linha e a coluna dos problemas de sintaxe detectados pelo analisador. Ele pode continuar mesmo com certos erros, e a formatação não equivale a uma validação completa do CSS. Confira o resultado nos navegadores compatíveis com seu site.
Preciso enviar meu CSS para um servidor?
Não. O comando Importar lê um arquivo local no editor, e o CSS é processado no navegador. A folha de estilo não é enviada a um servidor de conversão.
Detalhes técnicos
Minificação com CSSO
O modo Minificar carrega o CSSO e analisa a folha de estilo com o css-tree. O otimizador remove formatação redundante e pode encurtar valores, remover regras vazias e unir estruturas. Os dois ajustes controlam a preservação de comentários importantes e a reestruturação das regras.
Processamento no navegador
Os motores de minificação e formatação carregam na primeira vez que você usa o modo correspondente. Eles processam o CSS no navegador. O comando Importar lê o texto de um arquivo local sem enviar a folha de estilo para conversão.
Mostrar mais 4Mostrar menos
Resultado e comparação de tamanhos
Os tamanhos de entrada e saída são medidos pelos bytes do texto. Quando CompressionStream está disponível, a ferramenta também mede o resultado comprimido com gzip no navegador. O comando Baixar cria um arquivo .css com nome correspondente ao modo escolhido.
Diagnósticos do analisador
O modo Minificar reúne os erros do css-tree e mostra a linha e a coluna de cada um. O analisador pode continuar mesmo com código malformado. Portanto, obter um resultado não confirma que todas as declarações sejam válidas ou funcionem como esperado.
Formatação CSS
O modo Formatar usa @projectwallace/format-css com o recuo escolhido de 2 ou 4 espaços. Ambos os modos também mostram os problemas de sintaxe detectados pelo css-tree. A formatação não recupera comentários removidos nem confirma que todas as declarações CSS sejam válidas.
Estatísticas locais de uso
Os totais de processamento, os bytes economizados e o uso de modos contabilizam as operações iniciadas com Minificar ou Formatar. As atualizações automáticas não entram nesses totais. As cópias do resultado são contadas separadamente. Essas estatísticas ficam salvas no IndexedDB quando o armazenamento está disponível. A pontuação de atividade combina as taxas de compressão e de cópia com os modos usados. Ela não mede a correção do CSS nem a velocidade de carregamento.