PT-BR

Minificar CSS: reduzir, formatar e embutir o CSS no HTML

Com esta ferramenta para minificar CSS, você reduz uma folha de estilo, a formata para ler ou a embute em atributos style para newsletters. Comentários, espaços e zeros desnecessários somem sem mudar o efeito. Erros de sintaxe indicam a linha e seu código fica no navegador.

Fonte: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Atualizado em: .

Minha caixa de ferramentasSeus dados ficam salvos só neste navegador.

O código é processado apenas no seu navegador. No modo de inline, cole um documento HTML completo ou um fragmento com <style>.

Seu texto fica no seu navegador: não é enviado, não é salvo e não aparece no endereço da página.

Tratado como mais um bloco style no final, por exemplo de um arquivo CSS separado.

Resultado

Resultado
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Tamanho
214 → 144 caracteres (33% menor).
Removido: 1 comentários, 0 regras vazias. Comentários iniciados por /*! são mantidos.

Como o cálculo é feito

Esta ferramenta oferece três coisas para folhas de estilo: minificar para arquivos pequenos, formatar para código legível e embutir para e-mails HTML, em que alguns programas ignoram ou cortam blocos style.

Minificar CSS

  1. Escolha “Minificar” e cole seu CSS.
  2. Copie o resultado ou baixe como style.min.css. Abaixo você vê quanto o arquivo diminuiu.

Só são aplicadas transformações que não mudam o efeito: comentários (exceto /*! … */) e espaços somem, assim como o último ponto e vírgula antes de }, 0.50em vira .5em, #aabbcc vira #abc e 0px vira 0. Zeros com unidade permanecem onde são necessários: em calc(), min(), max(), clamp(), na forma abreviada flex, em tempos, ângulos e porcentagens e em propriedades personalizadas. Textos entre aspas e url() não mudam.

Formatar CSS

O CSS comprimido vira código legível: uma declaração por linha, listas de seletores linha a linha, blocos com recuo e uma linha em branco entre as regras. Os comentários são mantidos.

Embutir CSS no HTML

Cole um documento HTML com um bloco style. Para cada elemento, as regras correspondentes são avaliadas, ordenadas por especificidade e ordem e escritas no atributo style. Um atributo style existente vence as regras normais, e !important vence tudo. O que não pode ser escrito em um elemento, como :hover, pseudoelementos, @media e @font-face, permanece em um bloco style.

Bom saber

Seu código fica no seu navegador e não é enviado nem guardado.

Perguntas frequentes

Como posso minificar CSS?

Escolha o modo “Minificar” e cole o CSS. Comentários, espaços e zeros desnecessários são removidos, e o resultado pode ser copiado ou baixado como arquivo.

Minificar muda a aparência da página?

Não, só aplica transformações seguras. Zeros com unidade permanecem, por exemplo, em calc() e na abreviação flex, porque ali são necessários. Textos entre aspas e url() não são tocados.

Para que serve embutir o CSS?

Alguns programas de e-mail ignoram blocos style total ou parcialmente. Ao embutir, cada regra é escrita no elemento como atributo style, para que a formatação chegue.

O que acontece com :hover e @media ao embutir?

Não podem ser escritos em um elemento e por isso permanecem em um bloco style no head. Programas que os suportam continuam aplicando-os.

Como a ferramenta resolve regras conflitantes?

Pela cascata do CSS: !important primeiro, depois maior especificidade e, em caso de empate, a regra posterior. Um atributo style existente conta como um seletor de especificidade máxima.

Meu código é enviado?

Não. Tudo roda no seu navegador; o código não é enviado, não é guardado e não vai para a barra de endereços.

Fontes e base legal

Última atualização: · Princípios editoriais

Ferramentas relacionadas