Organize uma folha de estilo ou minifique-a, vendo o tamanho economizado
Funciona no seu navegador. Nada do que você digita é enviado a lugar nenhum.Formatar CSS aplica recuo para que a folha de estilo possa ser lida, e minificar remove cada espaço e comentário para produção. Os bytes economizados são mostrados, então o ganho em um arquivo de 2 KB fica visível antes de você decidir. Tudo roda no seu navegador e nada é enviado.
Esta página foi traduzida automaticamente do original em inglês. Nenhuma pessoa revisou ainda a tradução; a versão em inglês é a que deve ser considerada. Ler o original em inglês
Cole a folha de estilo na caixa CSS ou toque em Testar um exemplo.
Mantenha Embelezar para uma declaração por linha ou escolha Minificar para o menor arquivo.
Com Embelezar, escolha 2 espaços, 4 espaços ou Tab em Recuo.
Toque em Copiar ou Baixar para levar o resultado.
Este formatador de CSS tem dois modos. Embelezar organiza uma folha de estilo com uma declaração por linha, recuo uniforme e espaçamento consistente em volta de dois-pontos e chaves. Minificar remove comentários e espaços em branco, encurta cores e unidades e pode juntar regras que compartilham o mesmo bloco; depois mostra o tamanho antes, o tamanho depois e a porcentagem economizada.
Ele é útil nas duas pontas de um trabalho. No começo, uma folha de estilo chega minificada de um CDN ou de uma saída de build e você precisa ler a regra que está causando um problema de layout. No fim, você tem um arquivo escrito à mão e quer a menor versão para publicar. Aqui as duas coisas são colar e um clique.
A minificação usa csso. A opção de reestruturar é a parte agressiva: junta regras com blocos idênticos, remove declarações que uma regra posterior sobrescreve e reordena onde isso é seguro. Costuma economizar alguns pontos percentuais a mais e o resultado é equivalente, mas se você está revisando um diff ou seu CSS depende da ordem do código de um jeito que uma ferramenta não consegue ver, desligue-a e só saem espaços e comentários. Comentários que começam com ponto de exclamação, que é onde ficam os cabeçalhos de licença, podem ser mantidos.
Acima do resultado você vê o número de regras, seletores, declarações e regras @. Se uma chave, um comentário ou uma aspa ficar aberto, você recebe a linha e a coluna onde começou e o que acrescentar, em vez de um despejo do analisador. Tudo roda no seu navegador, então uma folha de estilo de um projeto não lançado nunca é enviada para lugar nenhum.
Sim. Sem cadastro, sem limite de tamanho de arquivo e sem teto de quantas folhas de estilo você processa. A página é mantida por alguns anúncios exibidos fora da ferramenta, e eles nunca mexem no seu resultado.
Não. Embelezar e minificar rodam no seu navegador com JavaScript. Uma folha de estilo de um design não lançado ou de uma ferramenta interna de administração nunca sai do seu dispositivo, e nada fica guardado depois que você fecha a aba.
Uma folha de estilo escrita à mão, com comentários e recuo, costuma cair de 15 a 30 por cento, e reestruturar acrescenta mais alguns pontos ao juntar regras duplicadas. A página mostra o número exato de bytes antes e depois, então você nunca precisa adivinhar.
Reestruturar junta regras que têm blocos idênticos, remove declarações que uma regra posterior sobrescreve e reordena seletores onde isso é seguro. A economia extra costuma ser de alguns por cento além da minificação simples. Desligue quando quiser remover só espaços e comentários, por exemplo quando precisar de um diff legível entre dois builds.
Sim. Escolha Embelezar e cole o arquivo minificado. Ele volta com um seletor por linha, uma declaração por linha e as media queries recuadas dentro do bloco. Nomes de seletores, valores e ordem ficam exatamente como estavam.
Minificar não deve quebrar uma folha de estilo válida. O csso analisa o CSS de verdade em vez de substituir texto, então strings, data URIs e propriedades personalizadas são preservadas. Se o arquivo não puder ser analisado, você recebe a linha e a coluna em vez de um resultado quebrado, e nada é copiado.
Ainda com dúvidas? Pergunte sobre Formatador e minificador de CSS e qualquer pessoa que saiba pode responder. Não é preciso ter conta.