Output will appear here...O que é CSS Minifier & Beautiffier?

CSS Minifier & Beautifier é uma ferramenta de duas vias: ele comprime o CSS removendo tudo o que o navegador não precisa - comentários, espaço em branco, ponto e vírgula redundante, cores hexagonais de formato longo e unidades em valores zero - e pode reverter o processo, expandindo um pacote de produção de linha única de volta a regras legíveis e devidamente indentadas. Cada byte que você tira de uma folha de estilo de bloqueio de renderização é um byte que o navegador baixa e analisa mais cedo, que alimenta diretamente as métricas principais da Web Vitals, como o primeiro Contentful Paint e o Maior Contentful Paint.
O Minifier é deliberadamente conservador. Ele está totalmente ciente dos literais de string, valores url() e expressões calc(), portanto, nunca remove o espaço em que calc(100% - 20px) depende, nunca reescreve o texto semelhante a uma cor de uma string de conteúdo e nunca toca no espaçamento que distingue div :hover de div:hover. Em folhas de estilos típicas, você pode esperar uma redução de 25 a 40% antes do gzip; combinado com gzip ou brotli no fio, a minificação ainda raspa uma fatia significativa porque a compressão funciona melhor em entradas repetitivas e sem comentários.
Tudo roda 100% do lado do cliente no seu navegador. Seu CSS nunca é carregado, registrado ou armazenado em qualquer servidor, o que significa que você pode colar com segurança o código do sistema de design, estilos de produto inéditos ou trabalho do cliente. Ele também funciona offline depois que a página é carregada - útil quando você precisa de um rápido Minify Pass sem conectar um pipeline completo do PostCSS ou do ESbuild.
A minificação aqui é compatível com sintaxe em vez de um conjunto de regras de localização e substituição, que é o que torna seguro executar em folhas de estilo de produção: espaço em branco dentro de strings, valores url() e seletores de atributos são deixados sozinhos, pois removê-lo mudaria o que o CSS corresponde. Os comentários que começam com um ponto de exclamação são mantidos, que é a convenção para os cabeçalhos da licença que precisam sobreviver a uma construção.
Como usar o Minifier CSS e o Embelezador?
Cole seu CSS
Solte sua folha de estilo na área de entrada - uma única regra, um arquivo de componente ou um pacote de produção completo. São aceitos CSSs formatados e já minificados.
Escolha Minificar ou Embelezar
Clique em Minify para compactar para produção ou embelezar para expandir o código minificado em uma declaração por linha com uma linha em branco entre as regras. Para embelezar, escolha primeiro o recuo preferido.
Verifique o selo de poupança
A ferramenta relata o tamanho exato do antes/depois e a mudança percentual (por exemplo, "12,4 KB → 8,1 KB, -34%"), para que você saiba exatamente qual a transformação o comprou antes de enviá-la.
Copie ou baixe
Copie o resultado para sua área de transferência com um clique ou faça o download como um arquivo .css pronto para ser lançado na saída de build ou no CDN.
Principais características
Minificação segura e com reconhecimento de sintaxe
Respeita literais de string, valores url() e espaçamento calc() - ele comprime agressivamente sem nunca corromper o CSS válido
Curta hexagonal e valor zero
Reescreve #FFFFF para #FFF e 0px para 0 onde comprovadamente seguro, espremendo bytes extras além da remoção simples do espaço em branco
Preservação de comentários de licença
Mantém os comentários intactos e /*! O Banner intacto para que os cabeçalhos das licenças da biblioteca sobrevivam à minificação, combinando o comportamento padrão da ferramenta de construção
Embelezador com um clique
Expande os pacotes minificados em regras legíveis com recuo de espaço configurável 2, 4 ou 8 para depurar problemas de produção
Frequently Asked Questions
Related Tools
HTML Minifier & Beautifier
Minify HTML markup for faster page loads or beautify it for readable, indented source
JSON Minifier
Minify JSON by removing whitespace, or beautify it with clean indentation, with live size-savings stats and exact parser error messages
SQL Formatter
Format messy SQL into readable, indented queries or minify SQL to a single line
CSS Formatter
Beautify messy CSS with clean indentation, or minify it to ship smaller files. Handles nested at-rules, comments, and string literals safely.
Comments
0 comments
No comments yet. Be the first to share your thoughts!