117 votes

Extraire uniquement les css utilisés dans une page spécifique

Supposons que vous ayez un site généré dynamiquement sur lequel ont travaillé trop de personnes, passées et présentes, et que vous ayez maintenant une collection de feuilles de style partagées contenant plus de 20 000 lignes de CSS. Il n'est pas du tout organisé, il y a quelques sélecteurs basés sur les classes et les id, mais aussi beaucoup trop de sélecteurs basés sur les balises. Supposons que vous ayez 100 modèles qui utilisent ces styles, par l'intermédiaire d'un contrôleur.

Existe-t-il un outil, quelque chose qui fonctionne comme Firebug peut-être, que vous pouvez pointer sur une url et qui déterminerait tous les sélecteurs CSS applicables pour cette page et les déposerait dans un fichier ? En fait, il s'agit d'un moyen de déchirer les feuilles de style partagées, page par page.

103voto

Cesar Bielich Points 450

L'extension Chrome est de loin le meilleur outil qui fait exactement ce que vous voulez en ne récupérant que le CSS utilisé sur la page et vous permet de le copier simplement dans votre presse-papiers. CSS utilisé

Exemple de belle image

enter image description here

18voto

John Catterfeld Points 6614

J'ai déjà utilisé Dust-Me Selectors, qui est un plugin Firefox. Il est très facile à utiliser et polyvalent, car il tient à jour une liste combinée des valeurs CSS utilisées sur un certain nombre de pages.

L'inconvénient est que je n'ai pas été en mesure de l'automatiser pour scanner un site entier, j'ai donc fini par l'utiliser uniquement sur des pages/modèles clés de mon site. Il est néanmoins très utile.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrairement au commentaire ci-dessus, Dust-Me Selectors 2.2 est compatible avec Firefox 3.6 (je viens de l'installer).

10voto

drudge Points 11479

Ils semblent prometteurs :

10voto

Rob Points 392

(Pas pour firefox mais peut-être que cela aidera quelqu'un)

Si vous travaillez sur chrome, vous pouvez utiliser cette extension :

CSS enlever et combiner ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )

  • vous permet de télécharger un fichier CSS combiné avec tous les styles utilisés
  • affiche les styles inutilisés dans une fenêtre contextuelle
  • inclut les styles générés

9voto

drGreen Points 112

Je suis tombé sur Uncss-Online - Serveur non officiel, très pratique pour les tests ou les utilisations ponctuelles ! Je pense que c'est le meilleur outil que j'ai rencontré.

UnCSS est un outil qui supprime les feuilles de style CSS inutilisées de vos feuilles de style. Il fonctionne sur plusieurs fichiers et prend en charge les CSS injectés par Javascript. Il peut être utilisé de cette manière :

  • Copiez et collez votre HTML et votre CSS dans les champs prévus à cet effet.
  • Cliquez sur le bouton
  • Attendre que la magie opère
  • Le CSS inutilisé disparaît, prenez le reste et utilisez-le !

Vous pouvez consulter leur Page Github pour d'autres façons avancées d'utiliser cet outil

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X