Formatadores de código

CSS Formatter

Formata seletores, declarações, media queries, keyframes e propriedades personalizadas de CSS.

Prima Ctrl / ⌘ + Enter para executar
Resultado só de leitura

Formata seletores, declarações, media queries, keyframes e propriedades personalizadas de CSS.

O que esta ferramenta faz

O CSS Formatter compreende regras, declarações e regras através do plugin de análise PostCSS da Prettier. Não lida com parênteses rectos com simples substituição de caracteres, pelo que pode distinguir entre strings, comentários, calc() e valores de propriedades personalizadas.

  • Suporta CSS moderno comum, media queries e key frames.
  • Formata apenas texto e não injeta estilos na página atual.
  • A sintaxe inválida exibirá um erro de analisador.

Como utilizar

  1. Cole o CSS.
  2. Selecione a largura do recuo.
  3. Clique em “Formatar CSS”.
  4. Copie ou descarregue o ficheiro formatted.css.

Utilizações comuns

  • Limpe as folhas de estilo de linha única ou difíceis de ler.
  • Unifique o formato do snippet de código da equipa.
  • Ajuda a observar consultas de media aninhadas e estruturas de animação.

Funcionalidades do CSS Formatter

Analise e embeleze seletores CSS, declarações, media queries, key frames e propriedades personalizadas. É adequado para cenários diários de desenvolvimento, depuração, classificação de dados e otimização de código. Os resultados do processamento podem ser visualizados, copiados ou descarregados diretamente.

FAQ

As propriedades personalizadas serão divididas incorretamente?

O analisador compreende o contexto da declaração CSS e lida corretamente com os valores --custom-property comuns.

A formatação alterará o efeito do seletor?

O objetivo é apenas alterar o layout; no entanto, é recomendado reter os ficheiros de origem e testar o projeto antes de o processar com qualquer ferramenta automatizada.

O CSS será aplicado a esta página?

Não. Tanto a entrada como a saída permanecem em caixas de texto.

Voltar às Ferramentas para programadores