Entfernen Sie Kommentare und Leerraum aus CSS

Webentwickler nutzen CSS-Minifier, wenn sie kompakten Code für Auslieferung oder einen kontrollierten Vergleich vorbereiten.

Entfernen Sie Kommentare und Leerraum aus CSS und erhalten Sie kompakten Code für den nächsten Schritt. Ohne Anmeldung im Browser nutzbar.

Bedienung

Legen Sie Ihr Stylesheet in den Eingabebereich oder importieren Sie die Datei, die Sie komprimieren möchten, anstatt sie von Hand einzufügen.
Starten Sie den Minifier: Kommentare fallen weg und Leerraum ohne syntaktische Rolle wird entfernt.
Vergleichen Sie die Größe der Ausgabe mit Ihrer Originaldatei, um zu sehen, wie viel der Durchlauf tatsächlich eingespart hat.
Kopieren Sie den kompakten Code in Ihr Projekt und laden Sie die Seite neu, um zu bestätigen, dass sich das Layout nicht verschoben hat.
Bewahren Sie die lesbare Version an einem sicheren Ort auf, denn die gepackte Datei ist für die Auslieferung gedacht und nicht zum Bearbeiten.

Beispiel

Das Beispiel enthält zwei Regeln, die über mehrere Zeilen geschrieben sind, mit aufgeteilten Rändern, einem Hintergrund und Innenabstand. Vergleichen Sie nach dem Durchlauf die beiden Texte nebeneinander und prüfen Sie, dass jeder Selektor, jede Eigenschaft und jeder Wert weiterhin in der kompakten Version erscheint.

Eingabe

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Ergebnis

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Grenzen und Formate

Kommentare werden entfernt, daher wird jede Notiz, die Sie darin hinterlassen haben, nicht in der Ausgabe zurückkehren.
Kompakter Code ist schwer zu lesen und unbequem zu korrigieren, bewahren Sie daher das Original für zukünftige Änderungen auf.
Ungenutzte Regeln werden nicht erkannt und Werte werden nicht umgeschrieben, daher kommt die Einsparung hauptsächlich von Leerraum und Kommentaren.
Testen Sie das Ergebnis in den Browsern, die Sie unterstützen, besonders wenn das Stylesheet ungewöhnliche Selektoren oder einen nie geschlossenen Kommentar verwendet.

Wo die Verarbeitung stattfindet

Die Arbeit findet in Ihrem Browser statt: Das von Ihnen eingefügte CSS bleibt dort, es wird nirgendwohin gesendet und verschwindet, wenn der Tab geschlossen wird. Das bedeutet, Sie können das Stylesheet eines Kunden komprimieren, ohne dass es Ihren Computer verlässt.

Häufige Fragen

Lädt eine minifizierte Datei schneller?

Sie wiegt weniger, weil Kommentare und überflüssiger Leerraum entfernt wurden, und eine kleinere Datei wird schneller heruntergeladen. Wie sehr Sie das bemerken, hängt von der Größe des Stylesheets und von allem anderen ab, was die Seite laden muss.

Kann ich die Minifizierung anschließend rückgängig machen?

Nicht von dieser Seite aus. Kommentare und die ursprüngliche Einrückung gehen bei dem Durchlauf verloren, daher kann das lesbare Layout nicht wiederhergestellt werden. Arbeiten Sie mit einer Kopie oder behalten Sie Ihre formatierte Datei in der Versionsverwaltung, bevor Sie sie ersetzen.

Warum enthält die Ausgabe noch Leerzeichen?

Leerzeichen, die zwei Werte, zwei Selektoren oder die Wörter innerhalb einer Eigenschaft trennen, gehören zur Syntax. Nur Leerraum ohne grammatikalische Rolle wird entfernt, deshalb wird das komprimierte Ergebnis weiterhin als gültiges CSS geparst.