Existe-t-il un moyen de vérifier quels styles CSS sont utilisés ou non utilisés sur une page Web?

121

Vous voulez savoir quels styles CSS sont actuellement utilisés sur une page Web.

css

— AIDEZ-MOI
source

2

Utilisez un navigateur doté d'un inspecteur CSS. Safari et Chrome (alias Webkit) le fournissent dans le cadre des outils de développement. Dans Firefox, cela est fourni par le plugin Firebug. Internet Explorer n'a rien de similaire à ma connaissance. L'inspecteur vous permettra de sélectionner un élément, de cliquer avec le bouton droit de la souris et de choisir «Inspecter l'élément» - puis il vous montrera quels sélecteurs et quelles règles individuelles sont appliquées à l'élément que vous avez sélectionné.

— Lee

La barre d'outils du développeur @Lee ie8 se comporte de la même manière que Firebug dans les sélecteurs css, vous pouvez sélectionner et voir les styles appliqués sur le côté droit.

— kobe

duplication possible de l' extraction uniquement du css utilisé dans une page spécifique

— cweiske

58

Installez le module complémentaire d'utilisation CSS pour Firebug et exécutez-le sur cette page. Il vous indiquera quels styles sont utilisés et non utilisés par cette page.

— Kobe
source

@Harry, une fois que vous avez installé ce plugin, il sera dans l'onglet dans le cadre de firebug où vous avez net et tout //// faites-moi savoir si vous avez besoin de quelque chose d'autre

— kobe

33

Y a-t-il quelque chose comme ça dans Chrome?

— Pedro Luz

3

Cela ne semble plus fonctionner et n'est malheureusement plus pris en charge.

— nostromo

1

Attention, Firebug n'est plus maintenu. Je pense que cet add-on ne fonctionne pas avec les DevTools intégrés à Firefox.

— Andrew

Vous pouvez utiliser l'option d'audit dans Chrome lors de l'inspection. Cela ne montre que les css non utilisés sur cette page particulière.

— Sarath Hari

81

Google Chrome a deux façons de vérifier les CSS inutilisés .

1. Onglet Audit: > Cliquez avec le bouton droit + Inspecter l'élément sur la page, recherchez l'onglet "Audit" et exécutez l'audit en vous assurant que "Performances de la page Web" est coché.

Répertorie toutes les balises CSS inutilisées - voir l'image ci-dessous.

Mise à jour: - - - - - - - - - - - - - - OU - - - - - - - - - - - - - -

2. Onglet Couverture: > Cliquez avec le bouton droit + Inspecter l'élément sur la page, trouvez les trois points à l'extrême droite (encerclés dans l'image) et ouvrez le tiroir de la console (ou appuyez sur Echap), enfin cliquez sur les trois points à gauche du tiroir (encerclé dans l'image) pour ouvrir l'outil de couverture.

Chrome a lancé un outil pour voir les CSS et JS inutilisés - Chrome 59 Update Vous permet de démarrer et d'arrêter un enregistrement (carré rouge dans l'image) pour permettre une meilleure couverture d'une expérience utilisateur sur la page.

Affiche tous les CSS / JS utilisés et inutilisés dans les fichiers - voir l'image ci-dessous.

— Cordell
source

3

Ce serait génial de voir lesquels sont également utilisés ... mais c'est génial, merci.

— Serj Sagan

Pour autant que je sache, si vous voulez savoir ce qui est utilisé, votre meilleur pari est d'installer un plugin pour Chrome - désolé

— Cordell

La nouvelle mise à jour de Chrome 59 vous permet de voir les CSS et JS utilisés / inutilisés

— Cordell

Quelle bibliothèque Chrome utilise-t-il pour cela?

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n où n = chaque page d'un site Web . Catégoriser l'outil / cette réponse comme "inutile" ne profite à personne.

— Shai Cohen le

40

Juste pour être complet et parce que cela a été demandé dans les commentaires, il existe également l'outil d'audit CSS dans Chrome dans le même but. Quelques détails ici:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
source

3

Je ne suis pas sûr que "l'outil d'audit CSS" auquel cette réponse se réfère soit le même que l' onglet Audits dans les outils de développement Chrome, mais cela vous indiquera quelles règles CSS ne sont pas utilisées (par exemple "Some.css: 42% n'est pas utilisé par la page actuelle. ").

— Kenny Evitt

11

Jetez un œil à UnCSS . Il aide à créer un fichier CSS de CSS utilisé.

— Robert Brisita
source

1

C'est un excellent programme. Merci! Rob

— r0berts

1

Bon outil Web pour des exemplaires uniques. ty

— billynoah

1

This is aweso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- nevermind .......

— Brian Powell

@ brian-powell ouais, la sortie des modèles devrait d'abord être générée. Sinon, comment l'UnCSS pourrait-il savoir ce qui est nécessaire?

— Robert Brisita

8

J'utilise CSS Dig . Il est fait pour le chrome, mais je pense que c'est un excellent outil!

— cs.matyi
source

J'ai juste essayé ceci - il fait tout en appelant à la maison à cssdig.com, donc il est incapable de voir ou d'analyser quoi que ce soit hébergé localement.

— Brilliand

0

Essayez d'utiliser cet outil, qui n'est qu'un simple script js https://github.com/shashwatsahai/CSSExtractor/ Cet outil aide à obtenir le CSS à partir d'une page spécifique répertoriant toutes les sources des styles actifs et à l'enregistrer dans un JSON avec la source comme clé et règles comme valeur. Il charge tous les CSS des liens href et indique tous les styles appliqués à partir d'eux. Vous pouvez modifier le code pour enregistrer tous les css dans un fichier .css. Combinant ainsi tous vos fichiers css.

— Shashwat Sahai
source

0

Sans aucun outil tiers ni aucune application, vous pouvez trouver du CSS et du javascript inutilisés en utilisant les outils de développement chrome dans l'onglet de couverture. lisez le message ci-dessous des développeurs google. onglet de couverture chrome

— Safari Mahdi
source