Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS Beautifier: Stylesheets automatisch schöner machen

    CSS Beautifier: Stylesheets automatisch schöner machen

Die Zeit für schönen Code ist nicht immer da. Gut, dass es Tools wie den CSS Beautifier gibt, mit dem Webentwickler CSS-Stylesheets mit nur einem Klick lesbar und konsistent machen können

Der CSS Beautifier sorgt dafür, dass Stylesheets lesbar bleiben bzw. werden und kann „minified Stylesheets“ in ein für Menschen geeignetes Format umformulieren.

Jeder Webworker dürfte es kennen. Der Zeitdruck ist immens, der Kaffee-Vorrat aufgebraucht und die Konzentration läuft auf Sparflamme. Aber das Design muss morgen raus. Die Formatierung der Stylesheets könnte so schon mal zur Nebensache werden. Hinterher wird sowieso alles minified.

Spätestens bei der nächsten Anpassung des Styles ärgert man sich dann, dass man nicht ordentlicher gearbeitet hat. Der CSS Beautifier nimmt euch einen Teil der Arbeit ab und formatiert die unübersichtlichsten CSS-Dokumente in ein gut lesbares Stylesheet um. Hierfür muss der unformatierte CSS-Code in das Tool kopiert oder direkt eingetippt werden.

CSS Beautifier Screenshot

Im unteren Fenster erhaltet ihr die formatierte Ausgabe, für die verschiedene Einrückungs- und Absatz-Optionen zur Verfügung stehen. Außerdem kann das Tool auf Wunsch fehlende Semikolons ergänzen und so leicht zu übersehende Fehler korrigieren.

Das Tool kann in einer optisch ansprechenderen Version von Fireworks Police oder auf der offiziellen Projektseite vom CSS Beautifier getestet werden. Auf GitHub steht der CSS Beautifier außerdem für den Offline Einsatz zur Verfügung.

Weiterführende Links

Finde einen Job, den du liebst

3 Reaktionen
Anon
Anon

Ein CSS-Beautifyer, so etwas vortschrittliches habe ich ja noch nie gesehen! Wenn ihr euren Innovationstrieb gerade nicht bremsen könnt, dann baut doch auch noch einen QR-Code Generator oder einen Bild-zu-Uri-Converter.

Antworten
Jakiku

So etwas habe ich gesucht. Habe noch eine CSS mit dem Code in einer Zeile. Ich hasse so etwas wie die Pest.

Antworten
waldi
waldi

Nettes Tool :) ProCSSor kann das auch und hat noch vielfältigere Einstellungsmöglichkeiten.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden