Pular para o conteúdo
Toolars
Explorar
Reportar erro

Desenvolvimento · utilitário Local

Formatador CSS

CSS Formatter

Reindente CSS em regras legíveis e consistentes com indentação de 2 ou 4 espaços, analisado com rigor em um Worker local.

Caminho da tarefa / da entrada ao resultado

Cole seu CSS

Roda localmente · Nada é enviado

Como Formatador CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como formatar CSS

  1. 01

    Cole seu CSS

    Cole o código-fonte de até 256 KiB em UTF-8. Selecione dois ou quatro espaços para a formatação.

  2. 02

    Escolha a indentação

    Escolha 2 ou 4 espaços. O exemplo já está carregado; a configuração passa a valer ao clicar em Formatar.

  3. 03

    Formate com um analisador de verdade

    Clique em Formatar. O Prettier analisa e reescreve CSS com o recuo escolhido e largura de impressão de 100 colunas. Confira na página de destino.

  4. 04

    Revise o resultado e as estatísticas

    Compare os bytes UTF-8 de entrada e saída e a porcentagem economizada. Um valor negativo indica que o resultado cresceu; confira antes de copiar ou baixar.

  5. 05

    Copie ou baixe o resultado

    Use Copiar resultado para a área de transferência ou Baixar para salvar a folha como toolars.css. Quando a próxima folha de estilos estiver esperando, Redefinir limpa entrada, saída e opções em um passo.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Formatador CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

Quando Formatador CSS é útil

Revisões de código

Torne o código-fonte mais fácil de inspecionar antes de compartilhá-lo com outro desenvolvedor.

Artefatos de build

Crie HTML, CSS ou JavaScript compacto sem executar o código-fonte.

Trechos prontos para copiar

Formate um exemplo focado e leve-o direto para a documentação ou um editor.

O que Formatador CSS realmente faz

Uma folha CSS compactada precisa de um diff legível. Cole, escolha 2 ou 4 espaços, formate e verifique seletores e ordem das regras alternativas na página de destino. Os bytes não provam que só espaços mudaram.

Perguntas frequentes

Qual é o limite de tamanho?
A entrada é limitada a 256 KiB e a saída a 512 KiB. O Worker local tem cinco segundos para iniciar e mais cinco para executar; editar o código ou cancelar interrompe o trabalho.
A formatação muda como meu CSS funciona?
A formatação uniformiza a apresentação, mas não testa layout ou suporte do navegador. Confira seletores, propriedades personalizadas e cascata na página de destino; preserve o original.
Por que meu CSS foi rejeitado?
Isto é um analisador, não um organizador de texto: sintaxe quebrada, como uma chave não fechada ou um caractere perdido, interrompe a execução, e a linha de status indica a linha e a coluna do problema. Nenhuma saída é produzida a partir de entrada inválida, então uma folha parcial ou chutada nunca chega à sua área de transferência por acidente.
Posso usar tabulações ou indentação de oito espaços?
Não. O Tamanho da indentação oferece exatamente 2 espaços e 4 espaços, as duas convenções que a maioria das folhas de estilo já segue. Se seu projeto usa outra largura, formate aqui com a opção mais próxima e deixe o formatador do seu próprio editor normalizar o resto da diferença.
O que a linha de estatísticas me diz?
Esta linha mostra os bytes UTF-8 antes e depois da transformação e a diferença. Formatar pode aumentar o tamanho; os números não comprovam validade nem aparência idêntica.
Minha folha de estilos é enviada para algum lugar?
Não. O código-fonte é analisado dentro de um Worker local e nunca é executado, enviado ou salvo. A aceitação pelo analisador não é correção da aplicação nem compatibilidade com navegadores.

Continuar em Desenvolvimento

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Código para imagem

Code to Image Converter

Exporte código com destaque de sintaxe como PNG ou SVG em seis linguagens, com temas claro e escuro, numeração, título e escala 1x ou 2x.

Criar

Gerador de slug de URL

URL Slug Generator

Transforme títulos em slugs de URL limpos com hífens ou sublinhados — acentos removidos, & expandido, escritas não latinas preservadas — ao vivo.

Criar

Sombras para React Native

React Native Shadow Generator

Compare propriedades de sombra legadas e boxShadow no React Native, ajuste iOS e Android lado a lado e copie o código do StyleSheet.

Criar

Codificador/decodificador Base64

Base64 Encoder/Decoder

Codifique texto Unicode em Base64 ou decodifique de volta com validação ao vivo, opções URL-safe e UTF-8 e botão de troca para ida e volta.

Converter