Ferramenta de desenvolvedor / 16

Formatador e Embelezador de CSS

Formate, aplique indentação e expanda regras CSS, listas de seletores e declarações de propriedades em código legível.

Formatador e Embelezador de CSS: TOEA analisa regras CSS, media queries e declarações, normalizando o espaçamento de propriedades e a indentação de blocos. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

Formatador e Embelezador de CSSProcessamento local

Roda inteiramente no seu navegador

Saída de CSS embelezado

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Lendo a folha de estilos de outra pessoa

Formatar um arquivo minificado o torna legível, mas não o deixa igual ao código-fonte original: minificadores mesclam regras e reordenam declarações, então espere seletores agrupados e valores abreviados. Para descobrir qual regra estiliza um elemento, as ferramentas de desenvolvedor do navegador são mais rápidas, e o painel Sources pode formatar um arquivo minificado diretamente no local. Formatar duas versões de uma folha de estilos e compará-las no comparador de diferenças mostra o que uma atualização alterou.

O que a formatação deixa intacto

O formatador aplica indentação e espaços; ele não ordena propriedades, corrige nomes de propriedades escritos incorretamente, adiciona prefixos de fornecedor nem remove declarações duplicadas, então colour: red permanece inalterado. Sequências de espaços em branco são reduzidas em todos os lugares, inclusive dentro de strings entre aspas; portanto, verifique valores de content que dependam de vários espaços. Quando o arquivo estiver pronto para publicação, compacte-o novamente com o minificador de CSS.

Como usar

Cole código CSS bruto ou minificado.
Selecione indentação de 2 ou 4 espaços.
Clique em Format CSS e copie ou baixe o resultado.

Privacidade e limitações

Toda a formatação de CSS é executada localmente no seu navegador.

Ferramentas relacionadas

Perguntas frequentes

Suporta @media queries?

Sim, regras @ aninhadas e media queries são formatadas com a indentação correta.

Modifica códigos de cor ou seletores?

Não, a formatação ajusta espaços em branco, indentação e estrutura sem alterar os valores das propriedades.

Ferramenta grátis · no seu navegador execuções · não precisa de conta