2008-10-22 16 views
9

Ich habe eine Seite (page1.html), die eine CSS-Datei verweist (style1.css)Welches Werkzeug zu verwenden CSS-Stylesheets

Alles ist gut zu vergleichen und zu reduzieren.

Ich brauche Page1.html, um zusätzlich Style2.css zu referenzieren Aber wenn ich die Referenz hinzufügen, einige Sachen auf Page1.html verschraubt.

Wie kann ich feststellen, worum es bei Style2.css geht, das dieses Problem verursacht? Einige Diff-Tool? Ein Prozess?

Antwort

12

Firebug zeigt Ihnen, welche Regeln außer Kraft gesetzt werden und aus welchem ​​Stylesheet die Regeln stammen.

Wählen Sie einfach die Problemelemente und es zeigt Ihnen die Regeln an. Sie können sie dann ein-/ausschalten, um den Effekt zu sehen.

2

Ja, ich würde ein Diff-Tool verwenden (DiffMerge ist kostenlos) und sehen, was zwischen den beiden CSS-Dateien ähnlich ist.

2

DiffMerge (oder irgendein Diffing-Tool für diese Angelegenheit) ist gut, wenn Ihre Dateien ein ähnliches Layout haben, aber wenn sie sehr unterschiedlich sind (wie ich es von Ihrem CSS erwarte), könnte die ganze Datei einen großen Unterschied darstellen und so beweisen, dass sie überhaupt keinen Nutzen haben.

Was ich in dieser Situation tun würde, ist die Installation des Dom Inspector in FireFox, und die Inspektion dieses Add-On.

Fügen Sie dann Ihr 2. Stylesheet hinzu und sehen Sie sich die Seite an.

Klicken Sie mit der rechten Maustaste auf das bockige Element und "Inspizieren Sie dieses". Ändern Sie dann den Ansichtsmodus des Dom-Inspektors in CSS. Es zeigt Ihnen die aktuelle Kaskade von Stilen, die auf das aktuelle Element angewendet wurden, und gibt auch an, welche Datei und welche Zeile.

Auf diese Weise können Sie herausfinden, wo Sie widersprüchliche Stile haben.

Dies ist zwar kein automatischer Prozess, aber wenn Ihre Stile 99% identisch sind, wird Diffing nicht funktionieren.

0

Alle guten Antworten .... Ich bin es verabscheut, dieses Mal ein korrektes auszuwählen.

Nur um den Mix zu ergänzen ... Ein Kollege empfahl die Web Developer Toolbar für FF.

Ich habe CSS \ View Style Info verwendet und dann auf das Zeug geklickt, das seltsam war ... Ich fand schnell eine Regel aus dem neuen Stylesheet, die die Höhe des Stylesheet radikal änderte.

0

Für Entwickler, die mit Visual Studio 2008, die dies lesen können:

Wenn Sie ein HTML-Element in den WYSIWYG-Designern auswählen, können Sie die CSS-Eigenschaften-Fenster verwenden, um alle CSS-Regeln und die entsprechenden Einstellungen, um zu sehen, einschließlich der Kaskadierungseinstellungen, die von den verschiedenen CSS-Regeln übernommen wurden.

Durch Klicken auf eine Regel im Eigenschaftenbereich können Sie die Quelle jeder CSS-Einstellung identifizieren. Dies erleichtert es, herauszufinden, warum eine Seite oder ein Element auf eine bestimmte Weise aussieht.

9

Direkt zwei CSS-Stylesheets vergleichen sofort die Unterschiede zwischen ihnen zu sehen: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/

Sehr praktisch, wenn Sie Änderungen an einer Website CSS machen und man kann nicht daran erinnern, was Sie geändert haben (solange Sie halten ein Backup des Originals zum Vergleich)

+1

Dies ist die beste Antwort für den Vergleich von CSS-Dateien. Ich habe es benutzt und es gemocht. Irgendwelche Kommentare, wie zuverlässig/stabil ist das? – ChrisOdney

+0

Das ist eigentlich, was ich gesucht habe, stimmte ich mit @ChrisOdney überein, es tatsächlich vergleichen die CSS als was es ist, nicht nur zwei Dateien. –

Verwandte Themen