Gibt es eine Möglichkeit zu überprüfen, welche CSS-Stile auf einer Webseite verwendet werden oder nicht?

121

Möchten Sie wissen, welche CSS-Stile derzeit auf einer Webseite verwendet werden?

css

— HILFE
quelle

2

Verwenden Sie einen Browser mit einem CSS-Inspektor. Safari und Chrome (auch bekannt als Webkit) bieten dies als Teil der Entwicklertools. In Firefox wird dies vom Firebug-Plugin bereitgestellt. Internet Explorer hat nichts Ähnliches, das mir bekannt ist. Mit dem Inspektor können Sie ein Element auswählen, mit der rechten Maustaste klicken und "Element untersuchen" auswählen. Anschließend wird angezeigt, welche Selektoren und welche einzelnen Regeln auf das ausgewählte Element angewendet werden.

— Lee

Die Entwickler-Symbolleiste von @Lee ie8 verhält sich wie Firebug in CSS-Selektoren. Sie können die auf der rechten Seite angewendeten Stile auswählen und anzeigen.

— Kobe

Mögliches Duplikat des Extrahierens nur des auf einer bestimmten Seite verwendeten

— CSS

58

Installieren Sie das CSS Usage Add-On für Firebug und führen Sie es auf dieser Seite aus. Hier erfahren Sie, welche Stile von dieser Seite verwendet werden und welche nicht.

— kobe
quelle

@ Harry, sobald Sie dieses Plugin installiert haben, wird es in der Registerkarte als Teil von Firebug angezeigt, wo Sie net haben und alle //// lassen Sie mich wissen, wenn Sie noch etwas benötigen

— kobe

33

Gibt es so etwas in Chrome?

— Pedro Luz

3

Dies scheint nicht mehr zu funktionieren und wird leider nicht mehr unterstützt.

— Nostromo

1

Beachten Sie, dass Firebug nicht mehr gewartet wird. Ich denke, dieses Add-On funktioniert nicht mit den in Firefox integrierten DevTools.

— Andrew

Sie können die Audit-Option in Chrome während der Inspektion verwenden. Dies zeigt nur CSS an, das auf dieser bestimmten Seite nicht verwendet wird.

— Sarath Hari

81

Google Chrome bietet zwei Möglichkeiten, um nach nicht verwendetem CSS zu suchen .

1. Registerkarte "Audit" : > Klicken Sie mit der rechten Maustaste + Element auf der Seite überprüfen, suchen Sie die Registerkarte "Audit" und führen Sie das Audit aus. Stellen Sie dabei sicher, dass "Webseitenleistung" aktiviert ist.

Listet alle nicht verwendeten CSS-Tags auf - siehe Abbildung unten.

Update: - - - - - - - - - - - - - - - ODER - - - - - - - - - - - - - - - -

2. Registerkarte Abdeckung: > Klicken Sie mit der rechten Maustaste + Element auf der Seite untersuchen, suchen Sie die drei Punkte ganz rechts (im Bild eingekreist) und öffnen Sie die Konsolenschublade (oder drücken Sie die Esc-Taste). Klicken Sie schließlich auf die drei Punkte links in der Schublade (eingekreist) im Bild), um das Coverage-Tool zu öffnen.

Chrome hat ein Tool zum Anzeigen von nicht verwendetem CSS und JS gestartet - Chrome 59-Update Ermöglicht das Starten und Stoppen einer Aufzeichnung (rotes Quadrat im Bild), um eine bessere Abdeckung der Benutzererfahrung auf der Seite zu ermöglichen.

Zeigt alle verwendeten und nicht verwendeten CSS / JS in den Dateien an - siehe Abbildung unten.

— Cordell
quelle

3

Es wäre großartig zu sehen, welche auch verwendet werden ... aber das ist großartig, danke.

— Serj Sagan

Soweit ich das beurteilen kann, ist es am besten, wenn Sie wissen möchten, was verwendet wird, ein Plugin für Chrome zu installieren - sorry

— Cordell

Mit dem neuen Chrome 59-Update können Sie das verwendete / nicht verwendete CSS und JS

— Cordell

Welche Bibliothek verwendet Chrome dazu?

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n wobei n = jede Seite einer Website . Das Tool / diese Antwort als "nutzlos" zu kategorisieren, nützt niemandem.

— Shai Cohen

40

Nur der Vollständigkeit halber und weil es in den Kommentaren gefragt wurde - es gibt jetzt auch das CSS-Audit-Tool in Chrome für den gleichen Zweck. Einige Details hier:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
quelle

3

Ich bin nicht sicher, ob das "CSS-Audit-Tool", auf das sich diese Antwort bezieht, mit der Registerkarte " Audits" in den Chrome Developer Tools identisch ist , aber das zeigt Ihnen, welche CSS-Regeln nicht verwendet werden (z. B. "Some.css: 42%") wird von der aktuellen Seite nicht verwendet. ").

— Kenny Evitt

11

Schauen Sie sich UnCSS an . Es hilft beim Erstellen einer CSS-Datei mit verwendetem CSS.

— Robert Brisita
quelle

1

Das ist ein tolles Programm. Vielen Dank! Rob

— r0berts

1

Gutes Web-Tool für einmalige. ty

— billynoah

1

Dies ist aweso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- egal .......

— Brian Powell

@ brian-powell yep, die Vorlagenausgabe müsste zuerst generiert werden. Wie sonst würde UnCSS wissen, was benötigt wird?

— Robert Brisita

8

Ich benutze CSS Dig . Es ist für Chrom gemacht, aber ich denke, es ist ein großartiges Werkzeug!

— cs.matyi
quelle

Ich habe es gerade versucht - es funktioniert alles, indem es zu Hause bei cssdig.com anruft, sodass es nichts lokal gehostetes sehen oder analysieren kann.

— Brilliand

0

Versuchen Sie es mit diesem Tool, bei dem es sich nur um ein einfaches JS-Skript handelt. Https://github.com/shashwatsahai/CSSExtractor/ Mit diesem Tool können Sie das CSS von einer bestimmten Seite abrufen , auf der alle Quellen für aktive Stile aufgelistet sind, und es in einem JSON mit Quelle als speichern Schlüssel und Regeln als Wert. Es lädt das gesamte CSS über die href-Links und teilt alle von ihnen angewendeten Stile mit. Sie können den Code ändern, um das gesamte CSS in einer CSS-Datei zu speichern. Kombinieren Sie dabei alle Ihre CSS.

— Shashwat Sahai
quelle

0

Ohne Tools von Drittanbietern und ohne App können Sie nicht verwendetes CSS und Javascript mithilfe der Chrome-Entwicklungstools auf der Registerkarte "Abdeckung" finden. Lesen Sie den folgenden Beitrag von Google-Entwicklern. Registerkarte "Chromabdeckung"

— Mahdi Safari
quelle