CSS Beautifier e formatador on-line
Formate, desminifique e organize instantaneamente folhas de estilo CSS bagunçadas ou compactadas em tempo real. Nosso formatador CSS de máquina de estado recua com precisão consultas @media aninhadas, @keyframes, variáveis CSS (--var), URLs https:// e URIs de dados SVG inline — e inclui um minificador CSS com um clique quando você estiver pronto para enviar para produção.
Como embelezar e desminificar CSS online
- Cole seu CSS: Cole seu
.min.csscompactado ou folha de estilo bagunçada no editor Input CSS à esquerda ou clique em Carregar Sample para testar aninhado@mediaconsultas, variáveis e URLs. - Escolha uma predefinição ou personalize as configurações: Escolha espaços 2, 4 espaços, Limpe e classifique A–Z ou Minimize (.min.css) na barra de predefinições rápidas ou ajuste recuo, posicionamento de chaves, divisão do seletor e compactação de cores à direita.
- Inspecione estatísticas ao vivo: Observe os contadores Input, Output, Rules e Lines atualizados imediatamente conforme você digita ou alterna opções.
- Copiar ou baixar: Clique em Copiar para a clipboard ou Baixe .css para salvar sua folha de estilo formatada como
styles.beautified.css(oustyles.min.cssno modo Minificar).
Opções de formatação e otimização CSS explicadas
| Opção | O que isso faz | Antes | Depois |
|---|---|---|---|
| Desminificar e recuar | Expande regras de linha única e blocos @media / @keyframes aninhados com 2, 4 ou 8 espaços ou tabulações. |
@mídia(largura máxima:768px){.box{largura:100%}} |
@media (largura máxima: 768px) { |
| Um seletor por linha | Divide listas de seletores separadas por vírgula em linhas individuais, ignorando vírgulas dentro de :is() ou :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Comprimir valores de cores | Converte rgb() e códigos hexadecimais de 6 dígitos em códigos hexadecimais de 3 dígitos dentro de qualquer valor de declaração, preservando os tokens circundantes. |
Borda : 1px RGB sólido (255, 0, 0); |
Borda : 1px sólido #f00; |
| Classificar propriedades (A–Z) | Alfabetiza as declarações dentro de cada bloco para padronizar revisões de código e revelar propriedades duplicadas. | Índice z: 5; exibição: flexível; alinhar itens: centro; |
align-items: center; |
Por que usar uma máquina de estados CSS Beautifier?
Muitos formatadores CSS online simples dividem o código em cada dois pontos (:), ponto e vírgula (;) ou chave (}). Essa abordagem é interrompida assim que sua folha de estilo inclui recursos modernos do CSS, como:
- Nested At-Rules e aninhamento CSS nativo: consultas
@media,@supportsconsultas de recursos,@keyframes animações, blocos@layere filho aninhado os seletores exigem rastreamento de recuo em vários níveis. - URLs externos e URIs de dados SVG embutidos: Propriedades como
background: url("https://...")ouurl("data:image/svg+xml;utf8,contém dois pontos e ponto e vírgula que nunca devem ser divididos como CSS delimitadores de propriedade.") - Sequências de conteúdo de pseudo-elementos: Declarações como
conteúdo: "Item: 1; Status: OK"mantêm seus caracteres internos exatos e espaços em branco intactos. - W3C-Encurtamento de cor preciso: As cores nomeadas são encurtadas apenas quando o equivalente hexadecimal é estritamente mais curto e idêntico na especificação CSS (por exemplo,
branco→#fffepreto→#000, deixandogreencomogreenjá que#008000é mais longo e#0f0é na verdadelimão).
Perguntas frequentes
Como faço para desminificar um arquivo .min.css online?
Cole seu código .min.css compactado na caixa Input CSS à esquerda. A ferramenta analisa automaticamente seletores, declarações, consultas @media e @keyframes em CSS multilinhas com recuo limpo em tempo real.
Este CSS beautifier suporta consultas @media, @keyframes e URIs data:?
Sim. Ao contrário de formatadores simples baseados em divisão, esta ferramenta usa um analisador de máquina de estado CSS que preserva blocos aninhados (@media, @supports, @keyframes, @layer e CSS nativo aninhamento), bem como dois pontos e ponto e vírgula dentro de URIs url("https://..."), data:image/svg+xml e strings content entre aspas.
É seguro classificar as propriedades CSS em ordem alfabética?
A classificação alfabética facilita a verificação de regras grandes e ajuda a detectar declarações duplicadas. No entanto, se uma regra depende de uma propriedade abreviada seguida por uma substituição mais específica (ou vice-versa, como background-color vs. background), alterar a ordem da declaração pode alterar qual propriedade vence. Ative a classificação quando suas regras não dependerem da ordem de substituição abreviada.
Também posso reduzir CSS com esta ferramenta?
Sim. Clique no botão Minify CSS (ou selecione Minify (linha única .min.css) no painel de configurações) para remover comentários, espaços em branco e ponto-e-vírgula à direita e compactar valores de cores em uma folha de estilo de produção compacta.
Meu código CSS é carregado em algum servidor?
Não. Toda a formatação e minificação do CSS são executadas 100% localmente no seu navegador usando JavaScript. Suas folhas de estilo nunca saem do seu computador.