Ir para o conteúdo principal
Bethemesh

Formatador e minificador CSS

Reindente uma folha de estilos CSS para facilitar a leitura ou minifique-a para obter código mais compacto, diretamente no navegador.

  • Área de transferência
  • Exportar
Automatizar

Integrar este widget

Personalize o resultado, verifique a pré-visualização e copie o código.

Pré-visualização

Tipo de código de integração

Código a copiar

Responsivo e redimensionado automaticamente pela Bethemesh.

Esta ferramenta foi útil?

Como funciona esta ferramenta?

Torne uma folha CSS mais legível ou produza uma versão compacta de um excerto. As duas ações analisam a sintaxe em vez de eliminar espaços e comentários indiscriminadamente. Uma string com pontos e vírgulas, um URL ou uma expressão calc() devem continuar a ser valores CSS coerentes. O resultado é apresentado como texto: as regras não são aplicadas a esta página e os recursos citados em url() ou @import não são descarregados para o processamento.

A formatação usa uma apresentação CSS estruturada com indentação de dois espaços. Blocos, listas de declarações e regras aninhadas reconhecidas são reescritos para facilitar a leitura. Classes, identificadores e propriedades personalizadas não são renomeados para reduzir o documento.

O modo compacto gera a saída a partir da árvore sintática CSS. Remove separadores desnecessários, mantendo os exigidos pela gramática, incluindo espaços à volta de operadores em calc(). Uma string não é dividida em declarações só por conter : ou ; entre aspas.

A versão compacta remove comentários comuns. Os comentários que começam por ! ou contêm @license ou @preserve são conservados e reunidos no início da saída. Verifique instruções do seu sistema de compilação: a ferramenta não interpreta todas as convenções de bundlers e pré-processadores.

Analisar sintaxe não certifica propriedades nem apresentação visual. Propriedades desconhecidas, valores não suportados e regras sem efeito podem continuar sintaticamente legíveis. O formulário destina-se a CSS; não compila Sass/SCSS nem Less. Não verifica seletores contra o DOM nem calcula os estilos aplicados.

Como usar esta ferramenta

  1. Forneça o CSS de origem

    Cole regras ou importe um ficheiro .css. Remova etiquetas <style> de excertos HTML: o formulário espera a folha, não uma página completa.

  2. Escolha a apresentação

    Formate para rever ou use a saída compacta. Se falhar, verifique strings, parênteses, comentários e chavetas.

  3. Verifique declarações importantes

    Reveja URLs, expressões calculadas e comentários conservados antes de copiar ou descarregar. Nova entrada oculta o resultado anterior; repor limpa ambos os campos.

Casos de uso

Examinar CSS comprimido

Expanda um excerto para distinguir seletores, propriedades e valores antes de alterar uma declaração. Guarde as fontes para recuperar ficheiros e comentários originais.

Partilhar um exemplo de apresentação

Apresente regras legíveis numa revisão ou ocorrência. O CSS formatado não inclui os elementos HTML necessários para reproduzir o comportamento.

Preparar um excerto compacto

Reduza espaços de apresentação de regras estabilizadas. Esta operação não elimina regras não utilizadas nem substitui a compressão de rede.

Exemplos

Expandir uma regra simples

O seletor a e a cor mantêm o seu papel. A formatação coloca a declaração numa linha própria com indentação de dois espaços.

Entrada

a { color: red; }

Resultado

a {
  color: red;
}

Compactar sem danificar strings e calc()

O texto a; b: { } mantém-se uma única string. A subtração em calc(100% - 2px) conserva os separadores necessários à volta do operador.

Entrada

a { content: "a; b: { }"; width: calc(100% - 2px); }

Resultado

a{content:"a; b: { }";width:calc(100% - 2px)}

Dicas e boas práticas

  • Verifique depois o aspeto na aplicação. A ferramenta desconhece estilos concorrentes, dimensões da página e a cascata resultante.
  • URLs relativos mantêm o texto, mas o recurso depende do local onde instalar a folha CSS.
  • Compile SCSS ou Less com as ferramentas habituais e submeta aqui o CSS produzido.
  • Guarde fontes e mapas separadamente. O formulário produz texto CSS sem reconstruir mapas de origem do projeto.

Fontes e referências

Perguntas frequentes

Porque restam espaços na versão compacta?

Alguns espaços separam tokens necessários à gramática CSS. Removê-los de calc(100% - 2px) pode invalidar a expressão. Compactar não significa eliminar todos os espaços.

Que comentários são preservados ao compactar?

Comentários marcados com !, @license ou @preserve são guardados no início. Os restantes são removidos. Verifique diretivas específicas da sua cadeia de compilação.

Posso formatar Sass ou Less diretamente?

O contrato desta ferramenta é CSS. Não resolve variáveis de pré-processador nem executa as suas funções. Compile a origem com o software adequado antes de preparar CSS compacto.

Uma folha aceite funciona em todos os navegadores?

Não. Uma sintaxe legível não garante suporte das propriedades nem efeito num DOM específico. Teste os navegadores de destino e os diferentes estados da interface.

Ferramentas relacionadas

Ferramentas semelhantes ou complementares a esta.

Ferramentas semelhantes

Formate HTML ou remova comentários comuns localmente, mantendo espaços do texto e conteúdo dos scripts na remoção de comentários.

DesenvolvimentoUtilizar esta ferramenta

Formate JavaScript, TypeScript ou JSX para facilitar a leitura sem executar código. Processamento local no navegador.

DesenvolvimentoUtilizar esta ferramenta