Minificar e Formatar CSS - comprimir ou expandir
Minificador e formatador CSS
O que esta ferramenta faz
Duas tarefas opostas sobre a mesma folha de estilos. Minificar tira o que só as pessoas precisam: comentários e indentação. Formatar devolve tudo, para que um arquivo herdado volte a ser legível. Os dois atuam sobre o texto que você deu e nenhum mexe no significado do CSS.
Como usar
- 1 Cole o CSS: um arquivo inteiro ou uma única regra.
- 2 Clique em Minificar para comprimir, ou Formatar para expandir com indentação.
- 3 Confira os bytes e depois copie o resultado.
Um espaço num seletor não é enfeite
«.a .b» pega um .b dentro de um .a; «.a.b» pega um elemento que carrega as duas classes. São seletores diferentes, e um minificador que trate o espaço como folga pinta em silêncio os elementos errados. Aqui o espaço entre duas partes do seletor sempre sobrevive; só sai o que cerca combinadores como > e +.
calc() precisa dos seus espaços
Em «calc(100% - 10px)» os espaços em volta do menos são exigidos pela gramática: sem eles o navegador lê «-10px» como um comprimento negativo, a expressão fica inválida e a declaração inteira é descartada. Nada avisa você — o layout simplesmente sai errado. Esta ferramenta nunca remove espaços dentro de parênteses.
Comentários de licença ficam
Um comentário que abre com /*! carrega um aviso de copyright ou licença e, por convenção, todo minificador o mantém. Tirá-lo seria remover a atribuição que uma biblioteca pede que você distribua. Comentários /* comuns são para você e seu time, então esses saem.
Minificar CSS rende menos que o gzip
Os servidores já comprimem as folhas de estilo na saída, e o gzip é ótimo com espaços repetidos: minificar por cima costuma poupar poucos por cento, não metade. Faça porque é esse arquivo que vai para produção e você o quer pequeno e estável, não porque espera a página carregar bem mais rápido.