Genutztes CSS aus einem Chrome-Coverage-Export extrahieren
Ziehen Sie das JSON aus dem Coverage-Panel hierher und erhalten Sie ein Stylesheet mit genau den Regeln, die die Seite angewendet hat, weiterhin in ihren Media Queries.
Coverage-JSON zu CSS
Das Coverage-Panel der Chrome DevTools zeigt, wie viel von jedem Stylesheet eine Seite wirklich nutzt, und seine Schaltfläche Export speichert das als JSON. Für sich allein ist die Datei wenig nützlich: Sie enthält den vollständigen Text jeder Datei und dazu Listen von Zeichenpositionen. Diese Seite öffnet das Tool Unbenutztes CSS entfernen auf dem Tab Coverage-JSON, der den Export in ein Stylesheet verwandelt, das Sie ausliefern können.
So aufzeichnen, dass nichts fehlt
Das Ergebnis ist nur so vollständig wie die Aufzeichnung. Starten Sie sie mit der Schaltfläche zum Neuladen im Panel, damit die beim Laden der Seite verwendeten Regeln enthalten sind, und benutzen Sie dann jeden Teil der Seite, den ein Besucher benutzen könnte: das mobile Menü, Dropdowns, Tabs, Akkordeons, Pop-ups und Formulare mit ihren Fehlerzuständen. Ziehen Sie das Fenster während der Aufzeichnung durch Ihre Breakpoints. Alles, was Sie nicht auslösen, gilt als ungenutzt.
Was mit jedem Teil des Stylesheets passiert
| Im Stylesheet | Im Ergebnis |
|---|---|
| Eine Regel, die die Seite genutzt hat | Behalten, genau wie geschrieben |
Eine genutzte Regel innerhalb von @media, @supports, @container oder @layer | Im selben Block behalten |
| Ein Block ohne verbliebene genutzte Regel | Samt seinen Regeln entfernt |
@font-face, @keyframes, @import, @charset | Immer behalten |
| Eine Regel, die die Seite nie genutzt hat | Entfernt |
Inline-Styles und Skripte im Export
Auch das HTML der Seite selbst erscheint im Export, mit den Bereichen seiner Inline-Blöcke <style> und <script>. Das Tool liest jeden Style-Block aus dem Dokument heraus, behält seine genutzten Regeln und führt ihn in der Ergebnistabelle als Inline-Style auf. JavaScript-Dateien werden übersprungen, und die Zusammenfassung nennt, wie viele Einträge ausgelassen wurden.
Das Ergebnis verwenden
Die Ausgabe beginnt jedes Stylesheet mit einem Kommentar, der seine Adresse nennt, sodass Sie es wieder aufteilen oder als eine Datei behalten können. Ersetzen Sie die Stylesheet-Links der Seite durch die neue Datei, testen Sie die Seite bei jeder Breite und behalten Sie die Originaldateien, bis Sie sicher sind. Für eine Page-Builder-Website behandelt die Anleitung, wie Sie eine Elementor-Seite in HTML und CSS umwandeln, den Rest des Umzugs, und PurgeCSS online ist der richtige Weg, wenn Sie das HTML und das CSS statt einer Aufzeichnung haben.