Ir para o conteúdo
TextArray
Totalmente local

Formatador CSS

Embeleze CSS reduzido ou confuso em regras limpas, recuadas e legíveis.

Entrada
Saída

Formatador CSS

Cole CSS minificado ou emaranhado à mão e este formatador o expande em uma folha de estilo limpa e legível: uma declaração por linha, o seletor e sua chave de abertura em uma linha, a chave de fechamento sozinha e uma linha em branco entre as regras de nível superior. Blocos aninhados como @media, @supports e seletores aninhados são recuados um nível mais profundo, de modo que a estrutura da planilha fica óbvia à primeira vista.

A ferramenta lê seu CSS caractere por caractere, em vez de dividi-lo com padrões ingênuos, para que nunca seja interrompido em conteúdo complicado. As strings mantêm seu conteúdo exato, então content: "a{b}" sobrevive com os colchetes dentro dele. Os corpos de url() são copiados literalmente, portanto, um URI de dados com seus próprios ponto-e-vírgula e dois-pontos — url(data:image/png;base64,...) — é deixado completamente sozinho. Os comentários permanecem palavra por palavra em sua própria linha no recuo atual.

Três opções ajustam a saída. O recuo alterna entre dois espaços, quatro espaços ou uma tabulação. Um seletor por linha coloca cada seletor de uma lista de vírgulas em sua própria linha, útil para regras agrupadas longas e diferenças mais limpas. A linha em branco entre as regras pode ser desativada quando você quiser que a planilha seja mais compacta. A contagem ao vivo conta as regras, declarações e linhas de saída conforme você digita, com a contagem de regras destacada.

Esta é a contrapartida de um minificador CSS: use-o para tornar um arquivo de produção compactado editável novamente, para reformatar código inconsistente de vários autores ou simplesmente para ler uma folha de estilo que você não escreveu. Tudo funciona inteiramente no seu navegador – seu CSS nunca é carregado em lugar nenhum.

FAQ

Isso altera meus valores CSS ou nomes de propriedades?
Não. Ele apenas adiciona e normaliza espaços em branco e quebras de linha. Seletores, propriedades, valores, cores, unidades, corpos de url() e comentários são todos preservados exatamente como foram escritos.
Os colchetes dentro das strings ou url() quebrarão a formatação?
Não. Um scanner de caracteres rastreia string, comentário e estado de url(), então conteúdo: "a{b}" e url(data:...;base64,...) são copiados literalmente e nunca tratados como estrutura.
O que "Um seletor por linha" faz?
Ele coloca cada seletor de uma lista separada por vírgula em sua própria linha, de modo que h1, h2, h3 ficam três linhas acima da chave de abertura. Vírgulas dentro de :is() ou seletores de atributos nunca são divididos.
Ele pode corrigir CSS inválido?
Ele formata o melhor esforço e nunca gera erros em entradas quebradas, mas não valida ou repara seu CSS. Chaves faltantes ou caracteres perdidos são dispostos tão bem quanto sua estrutura permite.
Meu CSS é carregado em algum lugar?
Não. A formatação é executada inteiramente no seu navegador e seu CSS nunca sai do seu dispositivo.