Extraire uniquement les css utilisés dans une page spécifique

Question

Supposons que vous ayez un site généré dynamiquement sur lequel ont travaillé trop de personnes, passées et présentes, et que vous ayez maintenant une collection de feuilles de style partagées contenant plus de 20 000 lignes de CSS. Il n'est pas du tout organisé, il y a quelques sélecteurs basés sur les classes et les id, mais aussi beaucoup trop de sélecteurs basés sur les balises. Supposons que vous ayez 100 modèles qui utilisent ces styles, par l'intermédiaire d'un contrôleur.

Existe-t-il un outil, quelque chose qui fonctionne comme Firebug peut-être, que vous pouvez pointer sur une url et qui déterminerait tous les sélecteurs CSS applicables pour cette page et les déposerait dans un fichier ? En fait, il s'agit d'un moyen de déchirer les feuilles de style partagées, page par page.

Answer 1

Voici ma solution en utilisant JavaScript :

    var css = [];
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i];
        var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
        if (rules)
        {
            css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
            for (var j=0; j<rules.length; j++)
            {
                var rule = rules[j];
                if ('cssText' in rule)
                    css.push(rule.cssText);
                else
                    css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
            }
        }
    }
    var cssInline = css.join('\n')+'\n';

En fin de compte, cssInline est une liste textuelle de toutes les feuilles d'acier de la page et de leur contenu.

Exemple :

    /* Stylesheet : http://example.com/cache/css/javascript.css */
    .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
    .javascript { color: rgb(172, 172, 172); }
    .javascript .imp { font-weight: bold; color: red; }

    /* Stylesheet : http://example.com/i/main_master.css */
    html { }
    body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
    a { color: rgb(204, 0, 51); text-decoration: none; }
    a:hover { color: rgb(153, 153, 153); text-decoration: none; }
    .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
    #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
    #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
    #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
    #header a { color: rgb(255, 255, 255); }
    #menu_2 { height: 290px; }

    /* Stylesheet : [inline styles] */
    .hidden { display: none; }

Answer 2

SnappySnippet

Il existe une extension open source de chrome nommée SnappySnippet Je l'ai trouvé bien meilleur que d'autres qui ne font qu'étendre les outils de développement déjà disponibles dans chrome. Vous pouvez même extraire une seule partie de la page avec tous les css pertinents. Regardez ce billet de stackoverflow

Answer 3

• uncss : Trouver les feuilles de style CSS inutilisées - outil cli, utilise phantomjs et exécute JS sur la page, peut être utilisé sur les URLs
• grunt-uncss - ne fonctionne que pour les fichiers statiques
• ( css critique - extraits CSS pour les éléments visibles dans la fenêtre du navigateur)

Answer 4

En septembre 2020, cette question a presque 10 ans. La plupart des solutions proposées ne fonctionnent plus ou les projets liés ont disparu.

Cependant, la question reste d'actualité car Google utilise désormais la vitesse des pages comme l'un de ses critères de priorité.

Après avoir effectué un certain nombre de recherches sur tous les liens mentionnés, j'ai trouvé ce qui suit purgecss.com . Cela semble être la meilleure option pour nettoyer les CSS inutilisés dans les applications web modernes/ASP utilisant Angular, React, Vue, etc. Il y a également une intégration avec PostCSS, Webpack, Grunt et Gulp.

En outre, UnCSS semble toujours être maintenue. Il est aussi puissant que PurgeCSS mais n'est pas aussi intégré dans les processus de construction ou les applications javascript à page unique.

Answer 5

Si vous n'avez affaire qu'à une seule page, vous pouvez également utiliser mon bookmarklet pour ne récupérer rapidement que le CSS réellement utilisé par la page web :

1. Aller aquí (si ce lien est rompu, vous pouvez également l'obtenir à partir de pastebin ).
2. Faites glisser le gros bouton situé sous "Download Bookmarklet" sur votre barre d'outils de signets.

C'est tout. Maintenant, chaque fois que vous voulez encapsuler une page statique (c'est-à-dire pour la rendre portable ou si vous avez l'intention de la servir à partir de sa propre iframe), cliquez simplement sur le signet et il affichera toutes les CSS utilisées sur la page actuelle dans une superposition. Cliquez sur l'ombre pour fermer la superposition.

L'avantage de cette solution est qu'elle prend en charge les pages réactives puisque les requêtes média sont également extraites. En prime, les requêtes média sont triées en fonction de la taille de l'écran (par ex, @media (max-width: 767px) viendra après @media (max-width: 1023px) ).

Si le besoin s'en fait sentir, je peux également ajouter une option pour minifier le CSS généré. Comme je n'ai utilisé ce bookmarklet que pour mes propres besoins, il n'a pas été largement testé, donc n'hésitez pas à signaler tout problème dans les commentaires.

NOTE : Pour que ce bookmarklet fonctionne avec des fichiers locaux dans Chrome, ajoutez --allow-file-access-from-files vers la cible du raccourci Chrome. Exemple :

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files