Extrair o CSS usado de uma exportação do Coverage do Chrome
Arraste o JSON do painel Coverage e receba uma única folha de estilos só com as regras que a página aplicou, ainda dentro das media queries.
Coverage JSON para CSS
O painel Coverage (Cobertura) do Chrome DevTools mostra quanto de cada folha de estilos uma página realmente usa, e o botão Export (Exportar) salva isso como JSON. Sozinho, o arquivo não serve para muita coisa: ele guarda o texto completo de cada arquivo mais listas de posições de caracteres. Esta página abre o Removedor de CSS não utilizado na aba JSON do Coverage, que transforma a exportação em uma folha de estilos pronta para publicar.
Grave de um jeito que nada fique de fora
O resultado é tão completo quanto a gravação. Comece a gravar com o botão de recarregar do painel, para incluir as regras usadas no carregamento da página, e depois use cada parte da página que um visitante poderia usar: o menu mobile, os dropdowns, as abas, os acordeões, os pop-ups e os formulários com seus estados de erro. Redimensione a janela passando pelos seus breakpoints enquanto grava. Tudo o que você não acionar é tratado como não usado.
O que acontece com cada parte da folha de estilos
| Na folha de estilos | No resultado |
|---|---|
| Uma regra que a página usou | Mantida, exatamente como foi escrita |
Uma regra usada dentro de @media, @supports, @container ou @layer | Mantida dentro do mesmo bloco |
| Um bloco sem nenhuma regra usada | Removido junto com as regras |
@font-face, @keyframes, @import, @charset | Sempre mantidos |
| Uma regra que a página nunca usou | Removida |
Estilos e scripts inline na exportação
O próprio HTML da página também aparece na exportação, com os intervalos dos seus blocos <style> e <script> inline. A ferramenta lê cada bloco de estilo do documento, mantém as regras usadas e o lista na tabela de resultados como um estilo inline. Os arquivos JavaScript são ignorados, e o resumo informa quantas entradas ficaram de fora.
Usando o resultado
A saída começa cada folha de estilos com um comentário que indica o endereço dela, então você pode dividi-la de novo ou mantê-la como um único arquivo. Troque os links de folhas de estilos da página pelo arquivo novo, teste a página em todas as larguras e guarde os arquivos originais até ter certeza. Para um site feito com construtor de páginas, o guia para transformar uma página do Elementor em HTML e CSS cobre o resto da migração, e o PurgeCSS online é o caminho quando você tem o HTML e o CSS em vez de uma gravação.