web-dev-qa-db-fra.com

Outil pour analyser et comparer deux feuilles de style CSS

Quelqu'un connaît-il un bon outil qui peut analyser et comparer deux feuilles de style CSS afin de trouver quels sélecteurs ont des styles différents?

Je ne peux pas utiliser un outil de type diff standard car les deux fichiers CSS ont une disposition très différente. J'ai besoin d'un outil qui peut analyser et comprendre le CSS, puis rechercher des sélecteurs qui ont réellement des styles différents dans les deux feuilles de style.

Le seul outil que j'ai trouvé est le CSS Comparer d'Alan Hart , mais il devient confus quand il y a des styles qui s'appliquent à plusieurs sélecteurs.

csssemantic-diff
43
Grodriguez

Voici ce que j'ai fini par faire, au cas où quelqu'un d'autre aurait le même problème:

  1. J'ai utilisé CSSTidy pour "normaliser" les deux feuilles de style que je voulais comparer. La normalisation dans mon cas signifiait la division de plusieurs sélecteurs et le tri des sélecteurs et des propriétés. Une version en ligne de CSSTidy est disponible ici .
  2. Après cela, j'ai utilisé l'outil CSS Comparer d'Alan Hart pour trouver les différences entre les deux feuilles de style.

Cela a fait le travail pour mes besoins spécifiques.

45
Grodriguez

J'ai essayé d'utiliser CSS Compare . Il semble faire exactement ce que vous recherchez. Cependant, il semble avoir des problèmes avec plusieurs sélecteurs. La partie agréable est qu'il est piloté par ligne de commande, vous pouvez donc mettre en place un processus automatisé si vous avez beaucoup de fichiers CSS, ou vous pouvez chaîner les fichiers CSS pour les comparer à un fichier SASS résultant géant. Cet outil vous montrera toutes les différences, y compris les différences dans les valeurs des classes.

Ce qui serait vraiment bien si un outil vous montrait quels styles remplaçaient d'autres styles dans la même feuille de style. De nombreux sites anciens ont beaucoup de bagages de cette manière et le filtrer serait super. Bien sûr, un outil automatisé peut provoquer des problèmes, mais au moins quelque chose qui génère un rapport comme le fait Firebug, à l'exception de chaque sélecteur et de l'ensemble de la collection de fichiers CSS, serait formidable. Malheureusement CSS Compare n'est pas un tel outil, et je n'en connais pas un :(

3
cjbarth