CSS legt das Aussehen einer Webseite fest. Dieses Tool entfernt unnötige Abstände vor der Veröffentlichung oder fügt Einrückungen und Zeilenumbrüche zum Lesen und Bearbeiten ein.
CSS mit Minimieren verkleinern
Wähle über den Editoren
Minimieren.Füge über Einfügen CSS in den Eingabeeditor ein oder wähle über
Importiereneine Datei mit der Endung.cssaus.Wenn Automatisch verarbeiten aktiviert ist, aktualisiert sich das Ergebnis beim Schreiben. Wo die Option sichtbar ist, kannst du sie ausschalten und anschließend auf Minimieren klicken. Auf dem Telefon verwendest du Minimieren, wenn du das Ergebnis aktualisieren möchtest.
Über
Kopierenkopierst du das Ergebnis. MitHerunterladenspeicherst du es als CSS-Datei.
Das folgende CSS färbt beispielsweise eine Überschrift rot. Nach dem Minimieren lautet es h1{color:red}. Die Überschrift bleibt rot.
h1 {
color: red;
}Komprimiertes CSS lesbar machen
Wähle Formatieren, wenn der Code ohne Abstände schwer zu lesen ist. Die Ausgabe verteilt Deklarationen auf eigene Zeilen und rückt sie je nach Einstellung um zwei oder vier Leerzeichen ein.
Formatieren fügt Abstände hinzu. Das Ergebnis kann deshalb größer als die Eingabe sein. Zuvor entfernte Kommentare oder die ursprüngliche Formatierung werden nicht wiederhergestellt.
Vertauschen übernimmt die Ausgabe als Eingabe und wechselt zwischen Minimieren und Formatieren. Ist Automatisch verarbeiten ausgeschaltet, starte die Verarbeitung erneut über die Hauptschaltfläche.
Festlegen, was beim Minimieren geändert wird
| Einstellung | Wirkung |
|---|---|
| Wichtige Kommentare behalten | Behält Kommentare, die mit /*! beginnen. Gewöhnliche Kommentare werden entfernt. Schalte die Option nur aus, wenn auch die markierten Kommentare entfernt werden sollen. |
| Regeln umstrukturieren und zusammenführen | Erlaubt das Zusammenführen und Umordnen kompatibler Regeln. Wenn du die Option ausschaltest, werden diese strukturellen Änderungen nicht vorgenommen. |
| Automatisch verarbeiten | Berechnet das Ergebnis nach Änderungen an Eingabe oder Einstellungen neu. Bei ausgeschalteter Option wird die veraltete Ausgabe gelöscht. Im Telefonlayout wird diese Einstellung nicht angezeigt. |
| Einrückung der Ausgabe | Im Modus Formatieren wählst du zwei oder vier Leerzeichen pro Einrückungsebene. |
| Umbruch | Bricht lange Zeilen im Editor um. Das verändert nur die Darstellung, nicht die heruntergeladene Datei. |
Teste das Ergebnis auf deiner Website, bevor du das Original ersetzt, besonders bei aktivierter Umstrukturierung. Behalte die Originaldatei, damit du bei Bedarf darauf zurückgreifen kannst.
Importieren, Kopieren und Herunterladen
Importieren nimmt jeweils eine CSS-Datei an. Du kannst sie auch auf die Seite ziehen. Enthält die Eingabe bereits Code, wird vor dem Ersetzen nachgefragt. Beim Abbrechen bleibt dein bisheriger Inhalt erhalten.
Die Schaltfläche Einfügen ersetzt die Eingabe durch den Inhalt der Zwischenablage. Dein Browser kann dafür eine Berechtigung anfordern. Du kannst auch in den Eingabeeditor klicken und die übliche Tastenkombination zum Einfügen verwenden.
Kopieren und Herunterladen verwenden den Ausgabeeditor. Heruntergeladene CSS-Dateien enthalten minified oder beautified im Dateinamen. Speichere das Ergebnis, bevor du die Seite verlässt. Beim Neuladen werden die Editorinhalte nicht wiederhergestellt.
Auf dem Telefon hält die Aktionsleiste die Hauptaktion und Kopieren griffbereit. Öffne Mehr für weitere Befehle sowie die Kommentar-, Umstrukturierungs- oder Einrückungsoptionen des gewählten Modus. Automatisch verarbeiten ist in diesem Layout nicht verfügbar.
Die Größenangaben lesen
Die Größenangaben erscheinen unter den Editoren in Fenstern über 768 Pixel Breite. In schmaleren Fenstern sind sie ausgeblendet. Eingabe und Ausgabe werden in Bytes gemessen. Die Ersparnis vergleicht beide Werte. Formatieren kann die Datei vergrößern, obwohl die Anzeige keine negativen Prozentwerte ausgibt.
Der gzip-Wert schätzt die Größe nach der gzip-Komprimierung in diesem Browser. Dein Webserver kann anders komprimieren. Der Wert misst daher nicht, wie viel jeder Besucher tatsächlich herunterlädt.
Wenn das Ergebnis nicht wie erwartet aussieht
Im Modus Minimieren nennt der Syntaxhinweis die zu prüfende Zeile und Position. Prüfe den Doppelpunkt zwischen Eigenschaft und Wert sowie zusammengehörige Klammern. Das Tool kann auch aus teilweise fehlerhaftem CSS eine Ausgabe erzeugen. Ein sichtbares Ergebnis beweist daher nicht, dass jede Regel korrekt ist.
Formatieren bereitet den Text zum Lesen auf und meldet ebenfalls die vom Parser erkannten Syntaxprobleme. Keiner der beiden Modi prüft, ob jede Deklaration wie beabsichtigt funktioniert.
Wenn das Ergebnis nach einer Änderung verschwunden ist, klicke erneut auf Minimieren oder Formatieren. Wo Automatisch verarbeiten sichtbar ist, kannst du es für automatische Aktualisierungen aktivieren. Löschen leert nach deiner Bestätigung beide Editoren. Beim Abbrechen bleiben die Inhalte erhalten.
Das CSS wird im Browser verarbeitet. Die Nutzungsstatistik kann auf diesem Gerät gespeichert bleiben, enthält aber keine Kopie deines Stylesheets. Die Verarbeitungszähler erfassen Durchläufe über Minimieren oder Formatieren. Automatische Aktualisierungen zählen nicht mit.