Comment puis-je trouver des images et des styles CSS inutilisés dans un site Web? [fermé]

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 identifiants et les classes qui n'existent même pas sur le site?

Il semble qu'il y ait un moyen d'écrire un script qui scanne le site, le profile et voir quelles images et quels styles ne sont jamais chargés.

Il y aIl y avait une extension Firefox qui trouvetrouvé des sélecteurs CSS inutilisés sur une page. Ilaavait une option pour spider l'ensemble du site. Version 3.01devrait pourrait fonctionner avec des versions plus récentes de Firefox.

http://www.brothercake.com/dustmeselectors/

Et voici une autre option:

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Vous n'avez pas à payer de service Web ni à rechercher un addon, vous l'avez déjà dans Google Chrome sous F12 (Inspector)->Audits->Remove unused CSS rules

Capture d'écran:

Mise à jour: 30 juin 2017

Maintenant, Chrome 59 fournit une couverture de code CSS et JS . Voir https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Au niveau du fichier:

utilisez wget pour spider de manière agressive le site, puis traitez les journaux du serveur http pour obtenir la liste des fichiers consultés, comparez-le avec les fichiers du site

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

Le vérificateur de redondance CSS est un outil que vous exécutez localement, auquel vous passez une feuille de style et une liste d'URL ou 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 un fichier .txt répertoriant les URL de fichiers HTML, soit un répertoire de fichiers HTML, les parcourra tous et listera 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.

Comme l'a noté Tim Murtaugh sur le billet de blog A List Apart, " Two Tools to Keep Your CSS Clean ":

csscss

csscss analysera tous les fichiers CSS que vous lui donnerez et vous indiquera quels ensembles de règles ont des déclarations dupliquées.

Et le plus pertinent à la question:
hélium-css

Helium est un outil pour découvrir les CSS inutilisés sur de nombreuses pages d'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 constituer une liste de toutes les feuilles de style. Il visite ensuite chaque page de 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 n'ont pas été trouvés pour être utilisés sur l'une des pages données.

Il me semble que je me souviens d'Adobe Dreamweaver ou d'Adobe Golive ayant une fonction permettant de trouver à la fois des styles et des images orphelins; Je ne me souviens plus lequel maintenant. Peut-être les deux, mais les fonctionnalités étaient bien cachées.

TopStyle a une suite d'outils pour localiser et gérer les classes orphelines. Il vous donnera également des rapports sur les endroits où les identifiants et les classes sont utilisés dans le HTML, vous permettant d'ouvrir rapidement et de passer au balisage pertinent. Voici le texte de présentation du site Web concernant cette fonctionnalité:

Rapports de site: voyez en un coup d'œil où les styles sont utilisés dans votre site. Découvrez où vous avez appliqué des classes de style qui ne sont définies dans aucune feuille de style, ou voyez quelles classes de style vous avez définies qui ne sont pas utilisées.

Très utile pour disséquer des sites Web inconnus.

Cependant, il ne trouve pas d'images inutilisées.

Chrome canary build a une option dans la barre d'outils développeur pour " Couverture CSS" comme l'une des fonctionnalités expérimentales pour les développeurs. 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 atteindre 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 cela fonctionne, mais une fois qu'il démarre, cela semble plutôt bien. Il enregistrera une nouvelle version du CSS avec des sélecteurs CSS remarqués afin que vous puissiez rapidement revenir en arrière si vous en avez besoin.

Utilisation CSS - Addon Firefox

Ce petit outil vous donne une liste des règles css utilisées par certains html.

Le voici sur Code Pen

Cliquez sur Run code snippet, puis cliquez sur Full pagepour y accéder. 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 stylet à code en tant qu'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 sais pas pour Dreamweaver & Co. Mais j'ai créé il y a quelque temps un petit programme pour m'aider à nettoyer mes projets de site Web

Rechercher des fichiers inutilisés

Cela n'aide pas avec CSS & trucs, mais plutôt avec des images orphelines et d'autres types de fichiers.

J'espère que ça aide!

Helium CSS est un excellent outil pour cela. Il convient de noter cependant 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.

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

Pour répondre à votre question sur un outil permettant de trouver des fichiers image inutilisés, vous pouvez utiliser Xenu Link Sleuth pour spider votre site afin de trouver toutes les images utilisées par votre site. Ensuite, Xenu vous demande un accès ftp afin qu'il puisse explorer vos répertoires pour trouver des fichiers orphelins. Je ne l'ai pas encore utilisé sur un serveur de production, mais cela mérite d'être examiné.

EDIT: Il faut juste faire attention à ne pas supprimer les images utilisées par javascript.