Entrada
Utilitário para desenvolvedores
Formatador CSS
Embeleze ou minifique CSS sem enviar o código. Inspecione regras, seletores e declarações, analise alertas básicos de sintaxe e teste o resultado em uma prévia isolada.
Tamanho
Regras
Seletores
Declarações
Saída
CSS formatado ou minificado
Alertas de validação
Problemas e avisos de CSS
Estrutura
Resumo de seletores e declarações
| # | Seletor / regra @ | Declarações | Propriedades |
|---|
Prévia isolada
Exemplo renderizado com seu CSS
A prévia roda em um quadro isolado com política de segurança restritiva; os estilos não afetam esta página e recursos remotos são bloqueados.
Exemplos
Exemplos comuns de CSS
Referência rápida de CSS
| Conceito | Exemplo | Notas |
|---|---|---|
| Regra | .card { padding: 16px; } | Um seletor seguido por um bloco de declarações. |
| Declaração | color: #333; | Uma propriedade e um valor separados por dois-pontos. |
| Propriedade personalizada | --accent: #16735f; | Variável CSS reutilizável cujo nome começa com dois hífens. |
| Consulta de mídia | @media (max-width: 640px) | Aplica regras aninhadas quando uma condição é atendida. |
| Quadros-chave | @keyframes fade | Define as etapas de uma animação CSS. |
Notas de formatação e validação
Formatação ciente de stringsStrings entre aspas, comentários e parênteses são identificados antes de alterar espaços estruturais.
Minificação conservadoraRemove espaços desnecessários e preserva o espaçamento dentro de funções como calc().
Validação leveOs alertas cobrem delimitadores balanceados, strings ou comentários não fechados e declarações sem dois-pontos. Use um parser ou linter para conformidade completa.
Processamento localO CSS permanece no navegador. Formatação, estatísticas, validação e prévia não enviam a entrada.
Perguntas frequentes do formatador CSS
Este formatador CSS envia meu código?
Não. Formatação, minificação, estatísticas, alertas e prévia rodam localmente no navegador.
Ele substitui um linter CSS completo?
Não. Ele detecta problemas estruturais comuns, mas conformidade, compatibilidade e regras do projeto exigem um parser ou linter dedicado.
Minificar CSS pode alterar seu comportamento?
O minificador preserva strings, comentários solicitados e espaços dentro de funções. Teste hacks antigos ou diretivas de ferramentas antes de publicar.
A prévia CSS fica isolada da página?
Sim. Ela usa um iframe em sandbox e uma política de segurança restritiva que bloqueia recursos remotos.