CDRN

Formatar e indentar CSS

  • Painel
  • Documentação
  • API
formata as suas regras CSS para as tornar legíveis e compreensíveis, facilitando o desenvolvimento e a manutenção

Porquê utilizar uma ferramenta de formatação CSS?

A formatação do código CSS é essencial para os programadores manterem um código limpo e legível. Esta ferramenta simplifica o processo permitindo formatar rápida e precisamente o código CSS, facilitando assim a manutenção e a colaboração nos projetos.

Características da ferramenta de formatação CSS

Esta ferramenta de formatação CSS permite-lhe introduzir código CSS e formatá-lo para uma melhor legibilidade. Remove os comentários, espaços e tabulações inúteis, e adiciona uma indentação adequada para as regras e propriedades CSS.

Como utilizar a ferramenta de formatação CSS

Para utilizar a ferramenta de formatação CSS, siga estes passos simples:

  1. Introduza o seu código CSS no campo previsto.
  2. Clique no botão "Formatar". A ferramenta formata o código CSS para uma melhor legibilidade.
  3. Copie o código CSS formatado para o utilizar nos seus projetos.

Exemplo de utilização da ferramenta de formatação CSS

Eis um exemplo de código CSS antes e depois da formatação: 


Avant le formatage :
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Après le formatage :
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Perguntas frequentes

Qual a diferença entre um formatador CSS, um minificador e um beautifier?

Um formatador CSS (ou beautifier) reescreve um ficheiro compacto em versão indentada e legível. Um minificador faz o inverso: remove espaços, quebras de linha e comentários para reduzir o tamanho do ficheiro servido em produção. A nossa ferramenta concentra-se na formatação: pega numa folha CSS minificada ou mal indentada e formata-a com uma indentação coerente, propriedade a propriedade.

A formatação conserva os comentários CSS?

Os comentários /* ... */ são preservados tal como estão por defeito. Os comentários de licença no início de ficheiro (/*! ... */), bem como as anotações utilitárias (TODO, FIXME) permanecem intactos, na sua própria linha. Se os quiser remover para produzir um ficheiro de produção, passe antes por um minificador dedicado.

Os prefixos de fabricante (-webkit-, -moz-) são tratados?

Sim. Os prefixos de fabricante são tratados como propriedades comuns: são indentados e alinhados com o resto do bloco. O formatador não gera nem remove prefixos: limita-se a formatar o que é fornecido. Para adicionar automaticamente os prefixos em falta, utilize o Autoprefixer no seu pipeline de build.

O formatador trata media queries e regras encadeadas?

Sim. Os @media, @supports, @keyframes e outras at-rules são indentados com as suas regras encadeadas dentro das chavetas. O nesting CSS nativo (& numa regra pai) também é reconhecido e formatado corretamente, tal como os blocos SCSS ou Less compatíveis com a sintaxe CSS padrão.

Posso formatar SCSS, Less ou Stylus?

A ferramenta visa o CSS padrão. As sintaxes estendidas (mixins SCSS, variáveis Less com @, sintaxe sem chavetas do Stylus) não são compreendidas pelo parser e podem produzir um resultado degradado. Para estas linguagens, utilize antes sass --style=expanded, lessc ou um formatador dedicado como o Prettier com o plugin certo.

O formatador valida a sintaxe CSS?

O formatador efetua uma análise sintática mínima: identifica os blocos, os seletores e as declarações. Sinaliza erros graves (chaveta não fechada, ponto e vírgula em falta no fim de bloco) mas não valida nem os nomes de propriedades nem os valores. Para uma validação completa, utilize o serviço W3C CSS Validator.

Exemplo de pedido

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Esquema de entrada

Campo Tipo Obrigatório Predefinição
input text ✓ –

Pontos de acesso

  • GET https://cdrn.fr/api/v1/tools - lista todas as ferramentas disponíveis
  • GET https://cdrn.fr/api/v1/tools/css-formatter - obtém o esquema desta ferramenta
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - executa esta ferramenta com um payload JSON