Quel outil utiliser pour comparer et réduire les feuilles de style css
https://stackoverflow.com/questions/225672
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai une page (page1.html) qui référence un fichier css (style1.css)
Tout va bien.
J'ai besoin de Page1.html pour faire référence à Style2.css Cependant, lorsque j’ajoute la référence, certains éléments de Page1.html ont échoué.
Comment puis-je déterminer ce qui cause ce problème dans Style2.css? Un outil de diff? Un processus?
La solution
Firebug vous indique quelles règles sont remplacées et de quelle feuille de style proviennent les règles.
Il suffit de sélectionner les éléments problématiques et il vous montrera les règles qui s’y appliquent. Vous pouvez ensuite les activer / désactiver pour voir l’effet.
Autres conseils
Comparez directement deux feuilles de style CSS pour voir instantanément leurs différences: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/
Très pratique lorsque vous apportez des modifications au CSS d'un site et que vous ne vous souvenez plus de ce que vous avez modifié (tant que vous conservez une copie de sauvegarde de l'original pour la comparer)
Oui, j'utiliserais un outil de diff ( DiffMerge est gratuit) pour voir ce qui est similaire. entre les deux fichiers CSS.
DiffMerge (ou tout autre outil de différenciation d'ailleurs) est utile si vos fichiers ont une présentation similaire mais s'ils sont très différents (comme je l'espère, votre CSS pourrait l'être), il est possible que le fichier entier apparaisse comme une grande différence et alors prouver être inutile du tout.
Ce que je voudrais faire dans cette situation est d'installer l'inspecteur dom dans FireFox et d'inspecter cet add-on.
Ensuite, incluez votre deuxième feuille de style et affichez la page.
Cliquez avec le bouton droit de la souris sur l’élément bloqué et sélectionnez "Inspecter cette". Puis changez le mode d'affichage de l'inspecteur de dom en CSS. Il vous montrera la cascade actuelle de styles appliqués à l’élément actuel et vous indiquera également quel fichier et quelle ligne.
De cette façon, vous pouvez déterminer où vous avez des styles conflictuels.
Ce n’est certes pas un processus automatique, mais à moins que vos styles ne soient identiques à 99%, la différence ne fonctionnera pas.
J'ai déjà utilisé cette classe php auparavant - fonctionne bien.
http: //www.phpclasses. org / package / 4638-Comparaison-deux-styles-CSS-style.html
Toutes les bonnes réponses .... Je suis répugné à choisir la bonne réponse cette fois-ci.
Juste pour ajouter au mélange ... Un collègue a recommandé la barre d’outils Web Developer pour FF.
J'ai utilisé CSS \ View Style Info, puis cliqué sur ce qui était étrange ... J'ai rapidement trouvé une règle de la nouvelle feuille de style qui en modifiait radicalement la hauteur.
Pour les développeurs utilisant Visual Studio 2008 , ceux-ci peuvent lire ceci:
Lorsque vous sélectionnez un élément HTML dans le concepteur WYSIWYG, vous pouvez utiliser la fenêtre Propriétés CSS pour afficher toutes les règles CSS et leurs paramètres correspondants, y compris les paramètres en cascade hérités des différentes règles CSS.
En cliquant sur une règle dans le volet de propriétés, vous pouvez identifier la source de chaque paramètre CSS. Il est ainsi plus facile de comprendre pourquoi une page ou un élément a une apparence particulière.
outil de diffchecker (en ligne). Très utile et rapide. http://www.diffchecker.com/
