Formatter CSS

Ele analisa sua folha de estilo em regras, declarações e regras at e as imprime novamente em um layout consistente. Como o CSS é analisado, a saída reflete a estrutura real da folha de estilo.

Cada regra começa com seu seletor e uma chave de abertura. Cada declaração fica em sua própria linha, com indentação de dois espaços e um espaço após os dois-pontos; a chave de fechamento fica em uma linha própria. Listas de seletores são unidas por vírgula e um espaço, e combinadores como > e ~ têm espaços ao redor.

Sim, as regras dentro de @media, @supports e blocos semelhantes são aninhadas e indentadas. Instruções como @import são mantidas em uma única linha, com valores de url() entre aspas.

Quando o analisador não consegue ler a folha de estilos, por exemplo, porque falta uma chave, a ferramenta para e mostra a mensagem do analisador com o número da linha. Corrija o trecho indicado e formate novamente.

Sim, os comentários são mantidos, tanto entre regras quanto entre declarações. Cada comentário fica em uma linha própria, com a mesma indentação do código ao redor.

Sim, propriedades personalizadas como --brand-color são formatadas como qualquer outra declaração. Referências como var(--brand-color) são mantidas como foram escritas.

Não, esta página espera CSS puro, e regras aninhadas ou variáveis de pré-processadores podem ser rejeitadas. Use o Formatter de SCSS ou o Less Formatter para esses arquivos.

Não, o formatador não tem opções e sempre usa dois espaços, com a chave de abertura na linha do seletor. Isso mantém os resultados consistentes em todas as folhas de estilos.

A saída é retornada como um bloco de código Markdown identificado como css, para ser exibida com realce de sintaxe em Markdown. Copie as linhas entre as cercas para o seu arquivo .css.

Até 5 MB por execução; entradas maiores são rejeitadas com uma mensagem. A saída é idêntica à opção CSS do Code Formatter.