Embeleze CSS no Navegador
O Formatador de CSS transforma folhas de estilo minificadas ou bagunçadas em CSS limpo e bem indentado em tempo real — direto no seu navegador. Cole uma folha de estilo de produção compactada ou um emaranhado de regras escritas à mão e o resultado formatado aparece na hora no painel à direita, com uma declaração por linha e espaçamento consistente.
Casos de Uso Comuns
Desminificar Folhas de Estilo
Organizar Regras
Revisar e Aprender
Como Formatar CSS
Cole Sua Folha de Estilo
Digite ou cole CSS no painel Entrada à esquerda. Você também pode Enviar um arquivo .css ou clicar em Exemplo para carregar um modelo.
Veja a Saída Instantânea
A folha de estilo formatada e com destaque de sintaxe aparece automaticamente no painel à direita enquanto você digita. Números de linha e um contador de tamanho em tempo real facilitam navegar por arquivos grandes.
Ajuste as Opções
Escolha o recuo (2, 3, 4, 8 espaços ou Tab) e defina a largura da linha para controlar onde as linhas longas quebram. A saída é reformatada imediatamente.
Copie ou Baixe
Clique em Copiar para pegar o resultado ou em Baixar para salvá-lo como arquivo .css. Use Editar para ajustar a saída manualmente antes de exportar.
Recursos e Opções
Opções de Formatação
A formatação de CSS do Prettier é em grande parte automática, com dois controles que adaptam a saída às suas preferências. Cada alteração reformata o resultado na hora.
| Opção | Escolhas | O Que Controla |
|---|---|---|
| Recuo | 2 · 3 · 4 · 8 espaços · Tab | Largura e caractere de indentação usados em regras e declarações aninhadas. |
| Largura da linha | 80 · 100 · 120 | Comprimento de linha alvo antes de valores longos e listas de seletores quebrarem. |
O Que é Formatado
Seletores e Declarações
Indentação consistente, uma declaração por linha e espaçamento organizado ao redor de dois-pontos e chaves.
Media Queries e At-Rules
@media, @keyframes aninhadas e outras at-rules são indentadas e alinhadas corretamente.
Ferramentas Integradas
Formatação em Tempo Real
A saída é atualizada enquanto você digita, com destaque de sintaxe e números de linha.
Enviar e Baixar
Carregue um arquivo .css local ou exporte o resultado formatado com um clique.
Saída Editável
Mude o painel de resultado para o modo de edição e faça ajustes manuais antes de copiar.
Perguntas Frequentes
Meu CSS é enviado para um servidor?
Não. Toda a formatação acontece localmente no seu navegador. Sua folha de estilo nunca é enviada, registrada ou armazenada, então é seguro formatar CSS proprietário ou não lançado.
Qual mecanismo de formatação ele usa?
Ele usa o Prettier com o analisador PostCSS, o mesmo formatador amplamente utilizado para manter folhas de estilo consistentes em projetos reais. A saída segue um estilo confiável e convencional.
Ele lida com media queries e keyframes?
Sim. At-rules aninhadas como @media e @keyframes são indentadas e alinhadas corretamente, junto com seletores padrão e blocos de declaração.
Posso personalizar a saída?
Sim. Defina o tamanho do recuo e a largura da linha na barra de ferramentas para controlar a indentação e onde as linhas longas quebram. A saída é reformatada imediatamente para você pré-visualizar a mudança.
Ele também minifica CSS?
Esta ferramenta é um embelezador — ela expande e indenta o CSS para legibilidade, em vez de comprimi-lo. Para reduzir uma folha de estilo para produção, use um minificador de CSS dedicado.
O que acontece se o CSS for inválido?
Se o analisador não conseguir entender a entrada, a ferramenta mostra uma mensagem de erro descrevendo o problema em vez de gerar uma saída quebrada. Corrija o problema indicado e o resultado formatado reaparece.
Ainda não há comentários. Seja o primeiro a comentar!