Extraire le CSS utilisé d'un export Coverage de Chrome
Déposez le JSON du panneau Coverage et récupérez une seule feuille de style avec uniquement les règles appliquées par la page, toujours dans leurs media queries.
Coverage JSON en CSS
Le panneau Coverage des DevTools de Chrome montre quelle part de chaque feuille de style une page utilise vraiment, et son bouton Export l'enregistre en JSON. Seul, ce fichier ne sert pas à grand-chose : il contient le texte complet de chaque fichier plus des listes de positions de caractères. Cette page ouvre l'outil de suppression du CSS inutilisé sur son onglet JSON Coverage, qui transforme l'export en une feuille de style prête à mettre en ligne.
Enregistrer sans rien oublier
Le résultat n'est jamais plus complet que l'enregistrement. Lancez l'enregistrement avec le bouton de rechargement du panneau, pour inclure les règles utilisées pendant le chargement de la page, puis utilisez chaque partie de la page qu'un visiteur pourrait utiliser : le menu mobile, les listes déroulantes, les onglets, les accordéons, les pop-ups et les formulaires avec leurs états d'erreur. Redimensionnez la fenêtre à travers vos points de rupture pendant l'enregistrement. Tout ce que vous ne déclenchez pas est considéré comme inutilisé.
Ce que devient chaque partie de la feuille de style
| Dans la feuille de style | Dans le résultat |
|---|---|
| Une règle utilisée par la page | Conservée, exactement telle qu'écrite |
Une règle utilisée à l'intérieur de @media, @supports, @container ou @layer | Conservée dans le même bloc |
| Un bloc où ne reste aucune règle utilisée | Supprimé avec ses règles |
@font-face, @keyframes, @import, @charset | Toujours conservés |
| Une règle que la page n'a jamais utilisée | Supprimée |
Styles en ligne et scripts dans l'export
Le HTML de la page lui-même apparaît aussi dans l'export, avec les plages de ses blocs <style> et <script> en ligne. L'outil extrait chaque bloc de style du document, garde ses règles utilisées et le liste dans le tableau des résultats comme style en ligne. Les fichiers JavaScript sont ignorés, et le résumé indique combien d'entrées ont été laissées de côté.
Utiliser le résultat
La sortie commence chaque feuille de style par un commentaire indiquant son adresse, ce qui permet de la redécouper ou de tout garder dans un seul fichier. Remplacez les liens vers les feuilles de style de la page par le nouveau fichier, testez la page à toutes les largeurs et gardez les fichiers d'origine jusqu'à être sûr du résultat. Pour un site fait avec un page builder, le guide pour transformer une page Elementor en HTML et CSS couvre le reste de la migration, et PurgeCSS en ligne est la bonne solution quand vous avez le HTML et le CSS plutôt qu'un enregistrement.