Comment puis-je trouver des images et des styles CSS inutilisés dans un site Web ?[fermé]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Existe-t-il une méthode (autre que les essais et erreurs) que je peux utiliser pour rechercher des fichiers image inutilisés ?Qu'en est-il des déclarations CSS pour les ID et les classes qui n'existent même pas sur le site ?
Il semble qu'il existe un moyen d'écrire un script qui analyse le site, le profile et voit quelles images et quels styles ne sont jamais chargés.
La solution
Il existe une extension Firefox qui trouve les sélecteurs CSS inutilisés sur une page.Il a la possibilité de parcourir l’ensemble du site.La version 3.01 devrait fonctionner avec les versions plus récentes de Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Et voici une autre option.
Autres conseils
Vous n'avez pas besoin de payer de service Web ni de rechercher un module complémentaire, vous l'avez déjà dans Google Chrome sous F12 (Inspector)->Audits->Remove unused CSS rules
Capture d'écran:
Mise à jour:30 juin 2017
Désormais, Chrome 59 fournit Couverture du code CSS et JS.Voir https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Au niveau du fichier :
utilisez wget pour explorer le site de manière agressive, puis traitez les journaux du serveur http pour obtenir la liste des fichiers consultés, comparez-la avec les fichiers du site
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
Vérificateur de redondance CSS est un outil que vous exécutez localement, auquel vous transmettez une feuille de style et soit une liste d'URL, soit un répertoire de fichiers HTML.Voici la description donnée sur le site de l'outil :
Un script simple qui, étant donné une feuille de style CSS et soit une URL de liste de fichiers .txt des fichiers HTML, soit un répertoire de fichiers HTML, les itérara tous et lissera les instructions CSS dans la feuille de style qui ne sont jamais appelées dans le HTML.
Fondamentalement, cela vous aide à garder vos fichiers CSS pertinents et compacts.Et c'est raisonnablement précis.
Essayez WARI - Inspecteur de ressources d'application Web.
Il trouve les images inutilisées, les CSS/JS inutilisés et en double.
Lien: wari.konem.net
Comme l'a noté Tim Murtaugh sur le blog A List Apart, "Deux outils pour garder votre CSS propre":
CSSCSS analysera tous les fichiers CSS que vous lui donnez et vous fera savoir quels ensembles de règles ont des déclarations dupliquées.
Et le plus pertinent par rapport à la question :
hélium-css
L'hélium est un outil pour découvrir CSS inutilisé sur de nombreuses pages sur un site Web.
L'outil est basé sur javascript et s'exécute à partir du navigateur.
Helium accepte une liste d'URL pour différentes sections d'un site, puis charge et analyse chaque page pour construire une liste de tous les feuilles de style.Il visite ensuite chaque page dans la liste URL et vérifie si les sélecteurs trouvés dans les feuilles de style sont utilisés sur les pages.Enfin, il génère un rapport qui détaille chaque feuille de style et les sélecteurs qui ne se sont pas révélés être utilisés sur aucune des pages données.
Il me semble qu'Adobe Dreamweaver ou Adobe Golive disposent d'une fonctionnalité permettant de rechercher à la fois des styles et des images orphelins ;je ne me souviens plus lequel maintenant.Peut-être les deux, mais les caractéristiques étaient bien cachées.
Style top dispose d'une suite d'outils pour localiser et gérer les classes orphelines.Il vous fournira également des rapports sur l'endroit où les identifiants et les classes sont utilisés dans le HTML, vous permettant d'ouvrir rapidement et d'accéder au balisage approprié.Voici le texte de présentation du site Web concernant cette fonctionnalité :
Rapports de chantier :Voir en un coup d'œil où les styles sont utilisés dans votre site.Découvrez où vous avez appliqué des cours de style qui ne sont pas définis dans des feuilles de style, ou voyez les cours de style que vous avez définis qui ne sont pas utilisés.
Très utile pour disséquer des sites Web inconnus.
Cependant, il ne trouve pas les images inutilisées.
La version Chrome Canary a une option dans la barre d'outils du développeur pour "Couverture CSS" comme l'une des fonctionnalités expérimentales du développeur.Cette option apparaît dans l'onglet Chronologie et peut être utilisée pour obtenir une liste des CSS inutilisés.
Veuillez noter que vous devrez également activer cette fonctionnalité dans les paramètres de la barre d'outils du développeur.Cette fonctionnalité devrait probablement être intégrée à la version officielle de Chrome.
J'ai trouvé cet outil qui fonctionne avec toutes les versions de Firefox !Il faut un peu de temps pour apprendre comment ça marche, mais une fois démarré, ça semble plutôt bien.Il enregistrera une nouvelle version du CSS avec des sélecteurs CSS remarqués afin que vous puissiez rapidement revenir si vous en avez besoin.
Ce petit outil vous donne une liste des règles CSS utilisées par certains HTML.
Voilà c'est parti Stylo à code
Cliquer sur Exécuter un extrait de code, puis cliquez sur Page entière pour y entrer.Suivez ensuite les instructions de l'extrait.Vous pouvez l'exécuter en pleine page pour le voir fonctionner avec votre html/css.
Mais il est plus facile de simplement ajouter mon stylo code comme outil.
/* CSS CLEANER INSTRUCTIONS
1. Paste your HTML into the HTML window
2. Paste your CSS into the CSS window
5. The web page result now ends with a list of just the CSS used by your HTML!
*/
function cssRecursive(e) {
var cssList = css(e);
for (var i = 0; i < e.children.length; ++i) {
var childElement = e.children[i];
cssList = union(cssList, cssRecursive(childElement));
}
return cssList;
}
function css(a) {
var sheets = document.styleSheets,
o = [];
a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (a.matches(rules[r].selectorText)) {
o.push(rules[r].cssText);
}
}
}
return o;
}
function union(x, y) {
return unique(x.concat(y));
};
function unique(x) {
return x.filter(function(elem, index) {
return x.indexOf(elem) == index;
});
};
document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
var cssRule = allCss[i];
document.write(cssRule + "<br/>");
}
document.write("</code>");Tous les outils répertoriés ici sont parfaits pour CSS.Je ne connais pas Dreamweaver & Co.Mais j'ai créé un petit programme il y a quelque temps pour m'aider à nettoyer mes projets de sites Web.
Rechercher des fichiers inutilisés
Cela n'aide pas avec CSS et autres, mais plutôt avec les images orphelines et d'autres types de fichiers.
J'espère que cela aide!
Helium CSS est un excellent outil pour cela.Il convient cependant de noter que vous devez exécuter cet outil sur une version de développement ou locale de votre site Web.Si vous l'exécutez sur une version de production, vos visiteurs pourront voir l'environnement de test Helium.
Pour répondre à votre question sur un outil permettant de rechercher des fichiers image inutilisés, vous pouvez utiliser Détective Xenu Link pour explorer votre site pour trouver toutes les images que votre site utilise.Ensuite, Xenu vous demande un accès FTP afin de pouvoir explorer vos répertoires pour trouver les fichiers orphelins.Je ne l'ai pas encore utilisé sur un serveur de production mais cela mérite d'être étudié.
MODIFIER:Il faut juste faire attention à ne pas supprimer les images utilisées par javascript.
