Command Palette

Search for a command to run...

MI

Minificador de CSS e embelezador

Minify CSS para cortar o tamanho do arquivo ou embelezar as folhas de estilo Minificadas para depuração

Output will appear here...
Category:minify
Mode:Offline
Version:1.0.0
Access:Free

O que é CSS Minifier & Beautiffier?

CSS Minifier & Beautifier interface on Toolz.dev - Minify CSS to cut file size or beautify minified stylesheets for debugging

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?

1

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.

2

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.

3

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.

4

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

A minificação de CSS é o processo de remoção de cada personagem que um navegador não precisa renderizar uma folha de estilo - comentários, espaços em branco, quebras de linha, ponto e vírgula à direita - e encurtar valores seguros como #ffffff para #fff. O resultado é um CSS funcionalmente idêntico em menos bytes, que baixa e analisa mais rapidamente. Como as folhas de estilo são bloqueando render, o CSS menor melhora as métricas, como o primeiro Contentful Paint.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

css minifierminify csscss beautifiercss formattercompress csscss optimizerunminify cssreduce css file sizecss compressor