Wie es funktioniert
Der Minifier entfernt /* Kommentare */, reduziert Leerzeichenfolgen auf ein einzelnes Leerzeichen und entfernt Leerzeichen um strukturelle Interpunktion wie { } : ; , > und löscht das letzte Semikolon vor einer schließenden Klammer. Selektoren werden nicht umbenannt, Regeln werden nicht zusammengeführt und die Kaskade wird nicht neu angeordnet.
- Ein konservativer Minifier: Er entfernt keine ungenutzten Regeln und schreibt keine Werte neu. Testen Sie das Stylesheet anschließend immer erneut.
Warum es wichtig ist
Jedes Kilobyte renderblockierendes CSS verzögert den ersten Malvorgang. Die Minimierung ist der günstigste verfügbare Gewinn nach dem Entfernen ungenutzter Regeln, und einem Tool, das nur nachweislich überflüssige Zeichen berührt, kann man in einem Build-Schritt vertrauen, ohne dass man sein Stylesheet neu definieren muss.
Ein gelungenes Beispiel
Eine Regel geschrieben als .card { color: red; Polsterung: 10px 20px; } wird zu .card{color:red;padding:10px 20px}, wodurch ein paar Dutzend Bytes pro Regel und weit mehr in einem echten Stylesheet eingespart werden.
Häufige Fehler
- Entfernen von Leerzeichen um + und - in calc(), was die Spezifikation erfordert.
- Minimierung von SCSS oder LESS anstelle von kompiliertem CSS.
- Die Sichtprüfung nach der Minimierung wird übersprungen.
Praktische Tipps
Behalten Sie die nicht minimierte Quelle in der Versionskontrolle und minimieren Sie sie als Build-Ausgabe. Wenn Sie benutzerdefinierte Eigenschaften mit Fallbacks verwenden, vergleichen Sie die berechneten Stile in DevTools vorher und nachher – die Kaskade bleibt erhalten, aber ein einzelner verlorener Platz kann die Art und Weise ändern, wie ein Wert analysiert wird.
Wie man es benutzt
- Öffnen Sie das Tool. Alles läuft in Ihrem Browser-Tab.
- Fügen Sie Ihre Eingabe ein oder geben Sie sie ein und wählen Sie dann die gewünschte Aktion aus.
- Überprüfen Sie das Ergebnis und kopieren Sie es mit einem Klick.
Häufige Fragen
Entfernt es nicht verwendete CSS-Regeln?
Nein. Kommentare und überflüssige Leerzeichen werden entfernt. Die Erkennung nicht verwendeter Regeln erfordert eine vollständige Seitenprüfung.
Warum funktioniert calc() nach der Minimierung nicht mehr?
Leerzeichen um + und - innerhalb von calc() sind gemäß der CSS-Spezifikation erforderlich. Testen Sie das Stylesheet nach der Minimierung erneut.
Kann es SCSS oder WENIGER minimieren?
Nein. Es wird einfaches CSS erwartet. Präprozessoren haben ihre eigenen Build-Schritte.
Ist dieses Tool wirklich kostenlos?
Ja. Es gibt kein Konto, keine Paywall und keine Nutzungsbeschränkung. Die Tools App wird von aumenso, dem Studio dahinter, finanziert.
Wird alles, was ich eingebe, hochgeladen?
Nein. Das Tool wird in Ihrem Browser-Tab ausgeführt. Was Sie eingeben, wird niemals an uns gesendet und niemals gespeichert.