Unbenutztes CSS online entfernen
Fügen Sie das HTML und das CSS ein und behalten Sie nur die Regeln, die etwas auf der Seite treffen.
Unbenutztes CSS online entfernen
PurgeCSS hat die Idee bekannt gemacht: ein Stylesheet mit dem Markup vergleichen, das es verwendet, und jede Regel streichen, die nichts trifft. Diese Seite erledigt das in Ihrem Browser. Sie öffnet das Tool Unbenutztes CSS entfernen auf dem Tab HTML + CSS, wo Sie die Seite und ihr Stylesheet einfügen, und nichts verlässt Ihren Rechner.
Was behalten wird
- Eine Regel mit mindestens einem Selektor, der ein Element im HTML trifft.
- Ein Selektor mit Zustand oder Pseudo-Element, etwa
.btn:hoveroder.icon::before, wenn das Element ohne diesen Teil existiert. - Alles unter Immer behalten: Klassennamen, IDs mit oder ohne
#und Muster zwischen Schrägstrichen. - Jeder Selektor, den der Browser nicht parsen kann, statt einer Vermutung.
@font-faceimmer und@keyframes, solange eine behaltene Regel oder ein Inline-Style die Animation noch nennt.
Die Klassen, die Sie nicht sehen
Das eingefügte HTML ist eine Momentaufnahme. Skripte fügen Klassen hinzu, während die Seite läuft: ein geöffnetes Menü, eine aktive Slide, ein Sticky Header, ein Validierungsfehler. Ihre Regeln wirken ungenutzt, weil die Momentaufnahme kein Element mit diesen Klassen enthält. Tragen Sie sie unter Immer behalten ein. Frameworks und Page Builder verwenden oft ein gemeinsames Präfix, sodass ein einziges Muster wie /^is-/ oder /^elementor-/ eine ganze Familie abdeckt. Können Sie die Seite stattdessen in Chrome aufzeichnen, sieht die Seite Coverage-JSON zu CSS, was der Browser tatsächlich angewendet hat, einschließlich dieser Laufzeitklassen.
Ein Beispiel
Eine Landingpage auf Bootstrap-Basis, die ein Grid, eine Navbar und zwei Button-Stile verwendet, lädt trotzdem das ganze Framework. Fügen Sie die Seite und das Stylesheet ein, tragen Sie die Klassen, die die Navbar umschaltet, etwa show und collapsing, unter Immer behalten ein, und der Großteil des Frameworks fällt weg. Die Liste Entfernte Selektoren zeigt, was gestrichen wurde; dort fällt eine Klasse, die hätte bleiben sollen, am schnellsten auf.
Online oder im Build
Für eine einzelne Seite, ein Template oder eine E-Mail ist diese Seite schneller, als etwas zu installieren. Für eine Website, die sich ändert, lassen Sie PurgeCSS im Build laufen, damit das CSS bei jeder Änderung des Markups neu bereinigt wird: npx purgecss --css css/style.css --content index.html --output dist/css/. In beiden Fällen gilt: Testen Sie die Seite bei jeder Breite, bevor Sie das ursprüngliche Stylesheet ersetzen.