Welches Tool zum Vergleichen und Reduzieren von CSS-Stylesheets verwendet werden soll?

StackOverflow https://stackoverflow.com/questions/225672

  •  03-07-2019
  •  | 
  •  

Frage

Ich habe eine Seite (page1.html), die auf eine CSS-Datei (style1.css) verweist.

Alles ist gut.

Ich brauche Seite1.html, um zusätzlich style2.css zu referenzieren.

Wie kann ich feststellen, was an Style2.css liegt, das dieses Problem verursacht?Irgendein Diff-Tool?Irgendein Prozess?

War es hilfreich?

Lösung

Feuerkäfer zeigt Ihnen, welche Regeln überschrieben werden und aus welchem ​​Stylesheet die Regeln stammen.

Wählen Sie einfach die Problemelemente aus und es werden Ihnen die darauf angewendeten Regeln angezeigt.Sie können sie dann ein-/ausschalten, um den Effekt zu sehen.

Andere Tipps

Vergleichen Sie direkt zwei CSS -Stylesheets, um die Unterschiede zwischen ihnen sofort zu erkennen: http://www.alanhart.co.uk/archives/2010/12/15/compare-sss-stylheet-tool/

Sehr praktisch, wenn Sie Änderungen an der CSS einer Website vornehmen und Sie sich nicht erinnern, was Sie sich geändert haben (solange Sie das Original unterstützen, um es zu vergleichen)

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

Diffmerge (oder ein Differenzentool für diese Angelegenheit) ist gut, wenn Ihre Dateien ein ähnliches Layout haben, aber wenn sie sehr unterschiedlich sind (wie ich es erwarte, Ihr CSS zu sein), könnte die gesamte Datei leicht als ein großer Unterschied angezeigt werden und beweisen so überhaupt nicht gebraucht werden.

Was ich in dieser Situation tun würde, ist, den DOM -Inspektor in Firefox zu installieren, und das inspizieren Sie dies.

Fügen Sie dann Ihr zweites Stilblatt hinzu und sehen Sie sich die Seite an.

Klicken Sie mit der rechten Maustaste auf das bewegte Element und "Überprüfen Sie das". Ändern Sie dann den Ansichtsmodus des DOM -Inspektors in CSS. Es wird Ihnen die aktuelle Kaskade von Stilen angezeigt, die auf das aktuelle Element angewendet werden und auch auf welche Datei und welche Zeile verweist.

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

Dies ist zugegebenermaßen kein automatischer Prozess, aber wenn Ihre Stile nicht zu 99% identisch sind, funktioniert Differing nicht.

Ich habe diese PHP -Klasse schon einmal verwendet - funktioniert gut.

http://www.phpcasses.org/package/4638-php-compare-two-css-style-definitions.html

Alle guten Antworten .... Ich bin verabschiedet, diesmal eine korrekte auszuwählen.

Nur um den Mix hinzuzufügen ... Ein Kollege empfahl die Webentwickler -Symbolleiste für FF.

Ich habe CSS View -Stilinformationen verwendet und dann auf das seltsame Zeug geklickt ... Ich fand schnell eine Regel aus dem neuen Stylesheet, das die Höhe dessen radikal veränderte.

Für Entwickler verwenden Visual Studio 2008 Wer kann dies lesen:

Wenn Sie im WYSIWYG -Designer ein HTML -Element auswählen, können Sie das Fenster CSS Properties verwenden, um alle CSS -Regeln und deren entsprechenden Einstellungen anzuzeigen, einschließlich der Kaskadeneinstellungen, die aus den verschiedenen CSS -Regeln geerbt wurden.

Wenn Sie auf eine Regel im Eigenschaftsbereich klicken, können Sie die Quelle jeder CSS -Einstellung identifizieren. Dies erleichtert einfacher herauszufinden, warum eine Seite oder ein Element eine bestimmte Art und Weise aussieht.

Diffchecker (Online) Tool. Sehr nützlich und schnell. http://www.diffchecker.com/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top