Mit sed CSS decompressen - Gehaxelts Blog

Um Ressourcen zu sparen, werden CSS Dateien oft “minified” bzw. “compressed”.

Diese Komprimierung kann man mit ein wenig sed wieder leserlich machen.

CSS komprimieren

Es gibt viele Dienste im Internet zu finden, welche einem CSS-Code minimieren.

Aus

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}

wird dann der Einzeiler:

@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;src:local('PT Sans Italic'),local('PTSans-Italic'),url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')}@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;src:local('PT Sans'),local('PTSans-Regular'),url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff')}

CSS decompressen

Wie man sieht, ist die komprimierte Variante sicherlich etwas performanter, jedoch kaum lesbar. Für kleine Änderungen ist kein Spielraum mehr.

Möchte man irgendwas dran ändern, und man hat den Originalcode nicht mehr, dann kann man sog. beautifier nutzen, oder man schmeißt auf der Konsole einen Einzeiler an:

cat file.css | sed -e "s/}/\n}\n\n/g" | sed -e "s/{/ {\n\t/g" | sed -e "s/;/;\n\t/g" | sed -e "s/:/: /g" 

Wobei man “file.css” durch die entsprechende Datei ersetzt.

Bei der komprimierten Zeile, würde der Einzeiler folgenden Output liefern:

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'),local('PTSans-Italic'),url(http: //themes.googleusercontent.com/static/fonts/ptsans/v4/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'),local('PTSans-Regular'),url(http: //themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff')
}

Das ist nun wesentlich leserlicher.

Vielleicht hilft das ja dem einen oder anderen.

Gruß

Gehaxelt