Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Embeleza uma folha de estilos para você conseguir ler, ou a enxuga quando você quer o arquivo menor. As duas direções são conferidas contra o fluxo de tokens a cada execução, então a saída é a sua folha de estilos com outro espaço em branco e nada mais: sem mesclar shorthands, sem encurtar cores, sem reordenar regras.
CSS de entrada
Solte um arquivo .css
Lido nesta aba. Nada é enviado.
Formatado
Regras
5
Seletores
9
Declarações
9
Regras at
1
Propriedades personalizadas
2
Como usar
Cole o CSS ou solte um arquivo
At-rules aninhadas, propriedades personalizadas, `:is()` e seletores modernos são todos analisados. A barra de estatísticas abaixo dos painéis conta regras, seletores, declarações e propriedades personalizadas enquanto você digita.
Embeleze com o layout que você usa
Largura da indentação, um seletor por linha ou vários, uma linha em branco entre regras, comentários mantidos ou descartados. Essas são as quatro coisas em que as folhas de estilo de fato discordam.
Ou minifique, e mantenha o cabeçalho de licença
A convenção `/*!` marca um comentário que precisa sobreviver à minificação. A opção respeita isso, e os números antes/depois/economizado dizem se valeu a pena.
Perguntas frequentes
Por que ele não encurta `#ffffff` para `#fff`?
Porque toda reescrita “segura” tem uma folha de estilos em que não é. Encurtar cores, mesclar shorthands, reordenar declarações e descartar regras “redundantes” mudam o comportamento em algum lugar, e um minificador que quebra uma página em silêncio é pior do que um que economiza menos bytes. O gzip recupera a maior parte da diferença de qualquer jeito.
O que são os “problemas léxicos” que ele relata?
Lugares que o tokenizador não conseguiu entender: um comentário sem fechar, uma string que vai até o fim do arquivo, uma chave solta. São relatados com um offset em bytes e o formatador segue em frente, porque uma folha de estilos com uma regra quebrada ainda vale a leitura.
Ele adiciona prefixos de fornecedor?
Não. Prefixar exige um alvo de suporte de navegadores e um banco de dados do que cada propriedade precisa, e os dois mudam todo mês. Esse é o trabalho do Autoprefixer, e ele precisa de uma etapa de build para fazer isso com honestidade.
Ele sobrevive a uma URL com ponto e vírgula?
Sim: `url(dots;grid.png)` e uma string `content: "{ not a block; }"` são tokenizados como valores únicos em vez de partidos na pontuação de dentro. Esse caso está no exemplo da página precisamente porque formatadores ingênuos erram nele.
Pode receber de
Empacotador de sprite sheet
Sprite Sheet Packer
Junta muitas imagens num único atlas e gera junto o mapa de quadros em CSS ou JSON.
Formatador e minificador de HTML
HTML Beautifier & Minifier
Formata ou minifica HTML, preservando os elementos em linha e, opcionalmente, juntando os espaços em branco.
Formatador e minificador de JavaScript
JavaScript Beautifier & Minifier
Remove comentários e espaços de JavaScript ou TypeScript sem renomear nada, e reindenta um bundle minificado para que dê para ler de novo.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Extrator de tokens CSS
CSS Token Extractor
Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.
Formatador e minificador de HTML
HTML Beautifier & Minifier
Formata ou minifica HTML, preservando os elementos em linha e, opcionalmente, juntando os espaços em branco.
Formatador e minificador de JavaScript
JavaScript Beautifier & Minifier
Remove comentários e espaços de JavaScript ou TypeScript sem renomear nada, e reindenta um bundle minificado para que dê para ler de novo.
SVG para data URI de CSS
SVG to CSS Data URI
Codifica um SVG como data URI de background CSS, escapando só o que precisa para mantê-lo pequeno.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
curl para código
curl to Code
Converte um comando curl em fetch, axios, Python requests, Go, PHP ou PowerShell.