Sobre o Formatador de CSS
O formatador CSS hidevtool organiza estilos copiados do DevTools, bundles minificados ou handoff de design. Cole stylesheet ou snippet, embeleze para review ou minifique para output de tamanho de produção.
Regras ganham indentação e quebras consistentes; seletores, declarações e at-rules permanecem intactos para diff ou paste de volta no projeto.
Formate antes do PR; minifique para demos inline — o FAQ cobre @layer, regras aninhadas e erros de minify.
O que você pode fazer
Pretty-print CSS
Formatar expande CSS compacto em blocos indentados — cada seletor e declaração em linhas legíveis, com espaço entre regras. Funciona em snippets parciais e stylesheets completos incluindo @media e @keyframes quando a sintaxe é válida.
Minificar CSS
Minificar remove comentários e colapsa whitespace após beautify bem-sucedido, produzindo string curta estilo uma linha para embeds, demos ou checagem de tamanho.
@media e @keyframes
At-rules aninhadas indentam com seletores internos para breakpoints responsivos e blocos de animação legíveis em code review.
Custom properties e nesting
Sintaxe moderna de seletores aninhados e var(--token) formata como regras padrão quando o parser aceita o dialeto colado.
Casos de uso
Como formatar CSS online?
Cole o CSS na área de entrada e clique Formatar. A ferramenta indenta seletores e propriedades para @media aninhados e listas longas de declarações ficarem mais legíveis.
Como embelezar CSS minificado do build?
Cole bundle de uma linha ou snippet do DevTools e execute Formatar. Quebras e indent de 2 espaços voltam; seletores e valores permanecem iguais.
Como minificar CSS para produção?
Clique Minificar depois de colar CSS. Comentários e espaços extras são removidos para stylesheet compacto copiável.
Perguntas frequentes
- Como formatar CSS online?
- Cole o CSS na área de entrada e clique Formatar. A ferramenta indenta seletores e propriedades para @media aninhados e listas longas de declarações ficarem mais legíveis.
- Como embelezar CSS minificado do build?
- Cole bundle de uma linha ou snippet do DevTools e execute Formatar. Quebras e indent de 2 espaços voltam; seletores e valores permanecem iguais.
- Como minificar CSS para produção?
- Clique Minificar depois de colar CSS. Comentários e espaços extras são removidos para stylesheet compacto copiável.
- Qual a diferença entre formatar e minificar CSS?
- Formatar adiciona indentação e linhas em branco para humanos. Minificar compacta o mesmo CSS válido em menos caracteres para transferência ou uso inline.
- Por que CSS falha ao minificar?
- O minificador reportou problema de sintaxe — muitas vezes chave não fechada, @rule inválida ou paste truncado. Corrija ou formate primeiro para achar a linha quebrada.
- Posso formatar SCSS ou LESS aqui?
- Este formatador mira CSS puro. Pré-processe SCSS/LESS no pipeline de build ou cole CSS compilado do DevTools.
- Minificar remove regras não usadas?
- Não — só whitespace e comentários. Use PurgeCSS ou seu bundler para eliminar dead code.