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.
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.
@ 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.
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.
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) * nwobei 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:
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.
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.
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"
Antworten:
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.
quelle
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.
quelle
multi-page website coverage == (single-page coverage) * nwobei n = jede Seite einer Website . Das Tool / diese Antwort als "nutzlos" zu kategorisieren, nützt niemandem.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
quelle
Schauen Sie sich UnCSS an . Es hilft beim Erstellen einer CSS-Datei mit verwendetem CSS.
quelle
UnCSS cannot be run on non-HTML pages, such as templates or PHP files- egal .......Ich benutze CSS Dig . Es ist für Chrom gemacht, aber ich denke, es ist ein großartiges Werkzeug!
quelle
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.
quelle
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"
quelle