Desminificar CSS online
Introduza uma folha de estilos compactada e volte a lê-la com clareza. Seletores em linhas próprias, uma declaração por linha, blocos e consultas de média indentados como se os tivesse escrito à mão.
Porque é que o CSS em produção ocupa uma única linha
As folhas de estilos em produção são frequentemente minificadas para reduzir o texto enviado ao navegador. As ferramentas de compilação podem remover espaços e comentários, abreviar valores ou juntar regras compatíveis. O resultado depende do otimizador escolhido e das suas definições; não há garantia de uma redução específica do tamanho nem de um carregamento mais rápido da página. Uma folha de estilos utilitários compilada pode conter muitas regras pequenas, tornando difícil percorrer o ficheiro compactado. A formatação organiza essas regras de forma consistente para facilitar a leitura, mas não recria os componentes de origem, os ficheiros do pré-processador nem a configuração de compilação que os gerou.
Voltar a compreender a cascata
A principal razão para formatar uma folha de estilos é compreender por que motivo uma regra se aplica ou não. Com cada seletor numa linha própria e as declarações indentadas por baixo, pode acompanhar a cascata: encontrar todas as regras dirigidas a um elemento, comparar a sua especificidade, ver qual surge em último lugar e descobrir o important perdido que se tem sobreposto ao seu trabalho. As consultas de média e o seu conteúdo tornam-se blocos visíveis, facilitando o acompanhamento do comportamento responsivo em comparação com um ficheiro compactado. Para uma investigação focada, copie a regra completa e a consulta de média relevante que a envolve antes de fazer alterações. A folha de estilos visível só explica parte da cascata: os estilos em linha, outras folhas de estilos, a herança e o DOM atual também contam. As ferramentas de desenvolvimento do navegador mostram as declarações que realmente se aplicam a um elemento. Utilize o ficheiro formatado para compreender essas declarações no seu contexto e confirme o comportamento com as dimensões da área de visualização que está a investigar. Se a deteção automática identificar CSS como JavaScript, verifique a indicação apresentada antes de confiar no resultado.
Suporte para CSS moderno
O formatador compreende CSS atual, não apenas um subconjunto antigo. Propriedades personalizadas, expressões calc e clamp, abreviaturas de grid e flexbox, consultas de contentor, regras aninhadas, camadas, blocos supports e keyframes estão entre os recursos de sintaxe que consegue formatar. As listas longas de seletores são distribuídas por várias linhas para facilitar a leitura, e os comentários que sobreviveram à compilação são preservados. Se o ficheiro combinar CSS simples com propriedades que usam prefixos de fabricantes, o resultado mantém essas declarações ao aplicar o estilo do formatador.
Uma dica prática para bibliotecas compiladas
Ao formatar uma folha de estilos compilada de Tailwind ou Bootstrap, o ficheiro cresce rapidamente; dezenas de milhares de linhas são normais. Ative os números de linha e utilize a pesquisa do navegador para encontrar o nome da classe ou a propriedade que lhe interessa, em vez de percorrer o ficheiro. Se pretende reduzir o tamanho do ficheiro em vez de o ler, lembre-se de que o trabalho relevante está na configuração de compilação, pois as regras não utilizadas foram geradas antes sequer de a minificação começar.
Perguntas frequentes
Posso desminificar uma folha de estilos Tailwind compilada?
Sim, e é uma das utilizações mais comuns desta página. Espere um resultado muito extenso, pois a biblioteca gera uma regra por classe utilitária. Ativar os números de linha e utilizar a pesquisa do navegador é a forma prática de o percorrer.
Os comentários são recuperados?
Os comentários que permanecem no CSS fornecido podem aparecer no resultado formatado. Os comentários removidos por um minificador não podem ser recuperados a partir desse ficheiro, incluindo as explicações sobre a existência de uma regra. Consulte o repositório de origem quando precisar de notas de conceção, orientações do autor ou do histórico de um seletor.
Funciona com SCSS ou Less?
Esta página destina-se a CSS simples, incluindo o resultado compilado de Sass ou Less. Variáveis, mixins e diretivas específicas de pré-processadores não são entradas suportadas. Compile primeiro esses ficheiros com as ferramentas adequadas do projeto e utilize depois este editor para analisar a folha de estilos resultante.