Comment identifier les définitions css non utilisées
Existe-t-il de bonnes approches pour aider à identifier les définitions CSS non utilisées dans un projet? Un tas de fichiers css ont été récupérés et maintenant j'essaie de nettoyer un peu les choses.
Jetez un coup d’œil à l’extension Firefox Dust-Me à l’adresse https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .
Outils de développement Chrome comporte un onglet Audits qui peut afficher les sélecteurs CSS inutilisés.
Exécutez un audit puis, sous Performances de la page Web , voir Supprimez les règles CSS inutilisées
Je viens de trouver ce site - http://unused-css.com/
Ça a l'air bien, mais il faudrait que je vérifie minutieusement ses fichiers css "propres" avant de les télécharger sur l'un de mes sites.
En outre, comme pour tous ces outils , il faudrait vérifier que les identifiants et les classes ne sont pas dépourvus de style, mais qu'ils sont utilisés comme sélecteurs JavaScript.
Le contenu ci-dessous est tiré de http://unused-css.com/ , donc félicitez-le d'avoir recommandé d'autres solutions:
Latish Sehgal a écrit une application Windows pour trouver et supprimer les classes CSS inutilisées. Je ne l'ai pas testé, mais d'après la description, vous devez fournir le chemin de vos fichiers HTML et d'un fichier CSS. Le programme listera alors les sélecteurs CSS non utilisés. De la capture d'écran, il semble qu'il n'y ait aucun moyen d'exporter cette liste ou de télécharger un nouveau fichier CSS propre. Il semble également que le service est limité à un fichier CSS. Si vous souhaitez nettoyer plusieurs fichiers, vous devez les nettoyer un par un.
Dust-Me Selectors est une extension de Firefox (à partir de v1.5) qui trouve des sélecteurs CSS inutilisés. Il extrait tous les sélecteurs de toutes les feuilles de style de la page que vous consultez, puis analyse cette page pour voir lesquels de ces sélecteurs ne sont pas utilisés. Les données sont ensuite stockées de sorte que lors du test des pages suivantes, les sélecteurs puissent être rayés de la liste au fur et à mesure de leur apparition. Cet outil est supposé être capable de parcourir tout un site, mais j’ai malheureusement pu le faire fonctionner. De plus, je ne pense pas que vous puissiez configurer et télécharger le fichier CSS avec les styles supprimés.
Topstyle est une application Windows comprenant de nombreux outils pour éditer le CSS. Je ne l'ai pas beaucoup testé, mais il semble qu'il puisse supprimer les sélecteurs CSS non utilisés. Ce logiciel coûte 80 USD.
Liquidcity CSS cleaner est un script php qui utilise des expressions régulières pour vérifier les styles d'une page. Il vous indiquera les classes qui ne sont pas disponibles dans le code HTML. Je n'ai pas testé cette solution.
Deadweight est un outil de couverture CSS. À partir d'un ensemble de feuilles de style et d'un ensemble d'URL, il détermine les sélecteurs réellement utilisés et les listes pouvant être supprimées "en toute sécurité". Cet outil est un module Ruby et ne fonctionnera qu'avec le site Web Rails. Les sélecteurs non utilisés doivent être supprimés manuellement du fichier CSS.
Helium CSS est un outil javascript permettant de découvrir les CSS inutilisés sur de nombreuses pages d'un site Web. Vous devez d’abord installer le fichier javascript sur la page que vous souhaitez tester. Ensuite, vous devez appeler une fonction à l'hélium pour lancer le nettoyage.
UnusedCSS.com est une application Web avec une interface facile à utiliser. Tapez l'URL d'un site et vous obtiendrez une liste de sélecteurs CSS. Pour chaque sélecteur, un nombre indique combien de fois un sélecteur est utilisé. Ce service a quelques limitations. L'instruction @import n'est pas prise en charge. Vous ne pouvez pas configurer et télécharger le nouveau fichier CSS propre.
CSSESS est un bookmarklet qui vous aide à trouver des sélecteurs CSS inutilisés sur n’importe quel site. Cet outil est assez facile à utiliser, mais il ne vous permet pas de configurer et de télécharger des fichiers CSS propres. Il ne listera que les fichiers CSS inutilisés.
Google Page Speed peut le faire pour vous (cela fait beaucoup plus que simplement vous dire quel CSS est inutilisé). Sur FireFox, il est disponible en tant que complément FireBug. Ensuite, il existe une version en ligne aussi.
n meilleur CSS CSS in C # supprime les styles redondants;
Vous voudriez aussi utiliser Dust-Me avec ça.
Gardez à l'esprit que si un contenu n'est actuellement pas visible par dust-me, vous pouvez jeter les styles dont vous avez besoin.
EDIT: le lien a été rompu mais archive.org a à la fois la page et le code.
tilisation de CSS
Extension Firebug pour voir quelles règles CSS sont réellement utilisées.
Utilisation de CSS est une extension pour Firebug (donc nécessaire d’installer Firebug) qui vous permet de connaître les règles de style CSS inutilisées. Il identifie le CSS que vous utilisez et n’utilisez pas. Il vous permet de préciser quelles parties inutiles peuvent être supprimées. Vous devriez absolument utiliser cet add-on pour garder vos fichiers CSS aussi légers que possible.
Il semble que quelqu'un qui a mis à jour DustMe Selectors fonctionne avec Firefox sous un nouveau nom - "CSS Roundup" http://blog.brothersmorrison.com/?p=198
Utilisez barre d'outils de développement d'Internet Explorer , s Affichage> Correspondances entre les sélecteurs CSS: : affiche un rapport contenant toutes les règles de style définies et le nombre de fois. ils sont utilisés sur la page en cours.
Découvrez Google PageSpeed pour Firefox . Il fait cela et beaucoup plus.
Apparemment, un plug-in Chrome est également en cours de développement.