Lorsque nous écrivons des styles, après que le CSS de la page ait été modifié pour plusieurs versions, certains styles peuvent ne plus être utilisés, ou certains styles peuvent avoir été renommés et ceux d'origine oubliés pour être supprimés. Bref, il peut y en avoir certains inutiles. contenu dans le style de la page. Ces gaspillages inutiles d’espace serveur et de consommation de bande passante augmenteront également nos coûts de maintenance. Alors, existe-t-il des moyens de nettoyer ces styles inutiles ? Aujourd’hui, jetons un coup d’œil à certains des outils les plus utiles.
Sélecteurs Dust-Me
Dust-Me est un plug-in Firefox très utile et facile à utiliser. Il peut analyser tous les fichiers CSS appelés dans votre page et analyser ceux qui ne sont pas utilisés dans la page.
Prend en charge les fichiers de style locaux et distants, y compris les fichiers de style introduits à l'aide des balises <link>, des instructions de traitement <?xml-stylesheet?>, des instructions @import, etc. (mais ne prend pas en charge les blocs <style> et les styles en ligne dans la page)
Fichiers de style de prise en charge introduits dans les commentaires conditionnels d'IE ;
Vous pouvez consulter une seule page ou l’intégralité du site Web ;
Prend en charge les sélecteurs CSS1, la plupart des sélecteurs CSS2 et CSS3 ;
Comprenez que les hacks CSS courants tels que "* html #fuck-ie" seront interprétés comme "html #fuck-ie" ;
Prend en charge Firefox 3.5 et Firefox 3.0 En fait, grâce aux améliorations du moteur js de FF 3.5, les performances de FF 3.5 sont 50 % supérieures à celles de FF 3.0.
Mise en place : Cliquez ici. En parallèle, vous pouvez télécharger le code source du projet. Pour en savoir plus, veuillez visiter la page officielle du sélecteur Dust-Me.
Vitesse des pages
Page Speed est un outil d'analyse des performances front-end fourni par Google. Il est quelque peu similaire à YSlow, mais il fournit des outils plus uniques et utiles, tels que Supprimer les CSS inutilisés :
Page Speed, comme YSlow, s'appuie sur Firebug Pour plus de détails et l'installation, veuillez visiter ici.
Vérificateur de redondance CSS
CSS Redundancy Checker est une application en ligne gratuite qui peut vérifier toutes les pages qui utilisent un certain fichier CSS pour les styles inutiles. Vous pouvez vérifier l'utilisation d'un certain style sur plusieurs pages en même temps. L'inconvénient de cet outil est que bien qu'il puisse vérifier plusieurs pages HTML à la fois, il ne peut vérifier qu'un seul fichier CSS à la fois, et vous devez le saisir manuellement :
IDÉE IntelliJ
IntelliJ IDEA Il s'agit d'un IDE assez puissant, similaire à DreamWeaver, mais il n'est pas beaucoup utilisé en Chine. Le logiciel comprend un outil d'analyse de code à la volée qui peut analyser les classes et les identifiants inutilisés dans les fichiers CSS.
Expression Web
Expression Web, l'outil de développement de sites Web nouvelle génération de Microsoft, est encore utilisé par de nombreuses personnes. Sa fonction CSS Report permet de vérifier les CSS inutilisés qui doivent être effacés (je n'ai en effet jamais utilisé EW pour développer un site Web. J'espère que les enfants qui utilisent ce logiciel le pourront. aide. Vérifiez ceci).
Conclusion
Bien sûr, il peut exister d'autres outils qui ne sont pas mentionnés ici. Si vous en savez quelque chose, vous pouvez le partager avec tout le monde.
De plus, nous écrivons généralement les styles de l'ensemble du site Web dans un ou plusieurs fichiers de style, puis les appelons tous dans la page ou les appelons dans des modules. Ensuite, les styles d'un certain fichier CSS ne peuvent pas être utilisés dans une certaine page mais. sont utilisés dans une certaine page. Il est utilisé dans d'autres pages, donc lorsque vous utilisez ces outils pour détecter des styles redondants dans des fichiers CSS, vous devez être prudent. La suppression des styles peut affecter d'autres pages, donc les résultats de vérification fournis par Page Speed . ne s'applique qu'à une seule page, ne convient pas à l'ensemble du site Web, utilisez plutôt Dust-Me ou CSS Redundancy. Lorsque vous utilisez Checker, vous pouvez vérifier l'intégralité du site Web ou plusieurs pages du site Web en même temps, ce qui peut éviter des erreurs.
PS : Merci beaucoup au travail de Knowledge Capsules.