Ein Tool, mit dem Sie alle Elemente / Seiten einer Site anzeigen können, die von einer bestimmten CSS-Regel betroffen sind?

Question

Ein Tool, mit dem Sie alle Elemente / Seiten einer Site anzeigen können, die von einer bestimmten CSS-Regel betroffen sind?

8

Natürlich können wir Tools wie Firebug verwenden, um Teile von HTML hervorzuheben und zu sehen, worauf alles CSS angewendet wird.

Aber was ist mit dem umgekehrten? Gibt es ein Tool, mit dem Sie eine bestimmte CSS-Regel hervorheben und Ihnen alle Seiten einer Website (entweder statische HTML-Seiten oder ihre dynamischen Vorlagen) anzeigen können, auf die sie angewendet wird?

Beispiel: Ich arbeite an einer neuen Site, die sehr groß ist und ich muss CSS auf einer bestimmten Seite bearbeiten, aber dabei habe ich keine Ahnung, wie viele andere Seiten auf der Site auch diese Klassennamen haben könnten und daher betroffen sein. Natürlich kann ich versuchen, die gesamte Seite nach den Klassennamen zu durchsuchen, aber das kann zeitaufwändig oder knifflig sein. Diese Site hat zum Beispiel eine Klasse namens "ba". Raten Sie, wie viele irrelevante Seiten auftauchen werden, wenn ich nur nach "ba" suche? Wie wäre es also mit einem doppelten Zitat ("ba)? Nun, es könnte in der Mitte von ein paar anderen Klassen sein (Klasse=" hz ba top "), am Ende (Klasse=" hz ba "), etc. Mehr Es könnte also dynamisch über serverseitigen Code eingesteckt werden, was es noch schwieriger macht, ein Tool zu finden, das Ihre Site irgendwie spidern könnte und in der Lage wäre, alle Stellen zu identifizieren, an denen sich Ihre CSS-Änderung auswirken würde.

html css

Doug 30.01.2010, 21:28

quelle

5 Antworten

Tags und Links html css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Git-Log-Fehler in der kontinuierlichen Integration von PhpUnderControl

score 1 · Answer 1

1

nicht genau das, aber es gibt ein Firebug-Plugin, das das für jede geladene Seite tut:

Ссылка

Mike Sherov 30.01.2010 21:33

quelle

score 1 · Answer 2

Sie könnten reguläre Ausdrücke verwenden.

zum Beispiel in Dreamweaver im Suchdialog:

Wählen Sie "Suchen in: Gesamte aktuelle lokale Site .."
Wählen Sie "Suche: Quellcode"
Aktivieren Sie 'Regulären Ausdruck verwenden'
im Suchen-Textbereich class\s*?=\s*?".*?content.*?"
klicken Sie auf "Alle finden"

derselbe reguläre Ausdruck könnte mit anderer Software verwendet werden, die in Dateien mit regulären Ausdrücken suchen kann ...
zum Beispiel: Ссылка (nicht mit ihnen verbunden, nur für hier gefunden ..)

Beachten Sie jedoch, dass alle Vorschläge hier nicht den Fall berücksichtigen, in dem die Klasse durch ein Skript hinzugefügt wird.

score 0 · Answer 3

Wenn Sie einen Mac verwenden, gibt es eine ausgezeichnete Shareware-App mit dem Namen " CSSEdit " von einem Indy Mac Shop in Belgien. Eine Einzelplatzlizenz kostet 30 Euro. Ich habe es für ca. verwendet. drei Jahre und ich kann es sehr empfehlen. Es ist eine ausgereifte, stabile App (obwohl ständig aktualisiert / verbessert); Mac OS Webdesigner, und diejenigen, die nicht gebraucht werden, brauchen aber alle Hilfe, die wir bekommen können, was CSSEdit sicher zu bieten scheint.

Um Elemente auf der HTML-Seite anzuzeigen, die von einem bestimmten Selektor gestaltet wurde:

(i) Öffnen Sie sowohl das Stylesheet als auch die Markup-Seite (die Markup-Seite muss eine Verknüpfung zum Stylesheet haben);

(ii) Klicken Sie auf die X-Ray-Schaltfläche aus (muss unterhalb der Schaltfläche "Nicht aktiv" lauten);

(iii) Klicken Sie im Style-Editor auf einen beliebigen Selektor (ich klicke ihn an, so dass sich der Cursor am linken Rand befindet, z. B. vor dem '#' usw.);

(iv) Klicken Sie jetzt auf "Inspektor" auf der Markup-Seite (neben "Röntgen").

Sehen Sie sich nun Ihre Markup-Seite an - sie wird einen blauen Umriss um die Elemente haben, der durch den Stil beeinflusst wird, auf den Sie in Schritt (iii) oben geklickt haben.

score 0 · Answer 4

Für diese Art von Dingen verwende ich einfach grep oder - noch besser, ack . Wenn Sie bei der Suche nach kurzen Mustern auf False Positives achten, können Sie einen Doppelfilter machen: Sie grepen alle Zeilen, die class= enthalten, und Sie füttern die Ausgabe in einem anderen Grep, das das Ergebnis nur auf die Zeilen verkleinert, die beide% co_de enthalten % und Ihr Suchmuster (das kann auch genauer spezifiziert werden mit einem Regexp mit Wortgrenzen wie class= , um die Übereinstimmung von \bba\b oder bar zu vermeiden)

score 0 · Answer 5

Wie wäre es mit einer ID auf dem Body jeder Seite, und damit die Verwendung von CSS außerhalb von Seiten, die im CSS eindeutig angegeben sind, zu verhindern?

So:

%Vor%

Nachteile:

Muss eine Körper-ID auf jeder Seite / Vorlage angeben.
Muss jede Seite angeben, auf die das CSS angewendet werden soll. Mehr CSS-Code zum Verwalten.
Lässt das CSS mit Ihren Augen weniger leicht durchlesen (da die Zeile mit der Seiten-ID und nicht mit dem CSS-Stil beginnt). Dies ist ein größeres Problem, wenn einige CSS-Stile auf mehreren Seiten verwendet werden (da die CSS-Spezifikationen für jeden Stil lang sind).

Pros:

Verhindert unbeabsichtigte CSS-Änderungsausbreitungen. I.e. Das Ändern einer Seite wirkt sich auf andere unbekannte Seiten aus.
Sehen Sie, welche Seiten eine CSS-Änderung beeinflussen würde, wenn Sie den CSS-Stil selbst bearbeiten. Die Information ist genau dort; keine Suche / grep dafür.
Erzwingt, dass Entwickler angeben, welche Seiten das CSS beeinflussen würde. Wenn Sie diese Informationen nur als Kommentare in Ihr CSS aufgenommen hätten, würde eine Person unweigerlich vergessen, den Kommentar zu aktualisieren, wenn das CSS auf einer neuen Seite verwendet wird.

Ich stimme dieser Aussage eines Freundes zu:

"Minimiere CSS, das an mehreren Stellen verwendet wird. Es ist nicht wie Programmieren; es ist besser mit ein wenig doppeltem CSS, als nicht verwaltbarem CSS. (Seiten wie apple.com, hat eigene Stylesheets für jede Seite und einige globale CSS.) " - Olav Bjørkøy, ursprünglicher Schöpfer des Blueprint CSS-Frameworks

Ich würde Ihre Eingabe zu diesem Thema lieben oder wenn jemand von Ihnen einen besseren Weg gefunden hätte.