Schreibt man eine Weile an einer Seite, wächst das Stylesheet zusehens. Nur bei den ganz Ordentlichen unter uns bleibt der Code dabei schön übersichtlich und lesbar. Was also tut man, wenn die Seite zwar fertig ist, das Stylesheet dafür aber extrem unaufgeräumt aussieht?

Möglichkeit Nummer eins ist, den CSS (Cascading Style Sheets) Code selbst auf Vordermann zu bringen. Dies hat den Vorteil, dass man nach jedem Schritt das Ergebnis kontrollieren kann.

Möglichkeit Nummer Zwei ist, Tools zum Optimieren des CSS einzusetzen. An dieser Stelle habe ich mal vier Tools ausprobiert, die eine solche Optimierung versprechen.

Dazu habe ich das Screen Stylesheet von Schraegschrift durch die Tools gejagt und anschließend geprüft, welche Auswirkungen das Optimieren auf das Design hatte.

Originalgröße des Stylesheets vor dem Optimieren: 21.6 KB

1. CleanCSS

Dieser Optimierer bietet die verschiedensten Möglichkeiten, die Lesbarkeit mit der Komprimierung in Einklang zu bringen. Die härteste Methode brachte es auf 16.4 KB. Mit der Lesbarkeit des CSS Stylesheets war es dann aber auch vorbei. Ein weiteres Arbeiten an dem Stylesheet kaum denkbar. Das Design der Website funktionierte nach dieser Optimierung des CSS bis auf einen kleineren Fehler bei den Social Network Buttons tadellos.

cleancss

Die Optimierung mit erhöhter Lesbarkeit brauchte immerhin auch noch eine kleinere Filegröße zu Stande: 21.1 KB

Hier gab es keinerlei Fehler mehr. Selbst bei der höchsten Lesbarkeit gab es noch eine kleine Einsparung in der Filegröße. Ich muß auch sagen: Ja, das Stylesheet sieht echt besser aus als vorher.

CleanCSS ermöglicht die Eingabe des Stylesheets auch durch Angabe einer URL, nicht jedoch den Upload eines Files. Das optimierte Resultat hingegen kann als Datei ausgegeben werden.

Die Seite ist in Deutsch verfügbar unter: http://www.cleancss.com/

 

2. Robson CSS Compressor

Die Möglichkeiten zum Optimieren sind hier nicht ganz so ausgefeilt. In der lesbar-Variante komme ich hier auf 23.6 KB. Das ist mehr als beim Original. Das Stylsheet funktioniert aber problemlos.

robson

16.8 KB hat das Stylesheet nach der Optimierung auf die kleinste Variante. Auch hier ist kein Fehler auf der Seite zu erkennen.

Beim Robson CSS Composer habt Ihr die Möglichkeit eine Stylesheet Datei hochzuladen. Das Angeben einer URL ist ebenfalls vorgesehen.

Die ausschließlich englische Seite findet Ihr unter: http://iceyboard.no-ip.org/projects/css_compressor

 

3. CSS Optimizer

Kaum Einstellmöglichkeiten bietet dieses Tool. Vorgesehen sind Dateiupload, URL oder Direkteingabe des zu optimierenden Stylesheets. Nach der Optimierung werden die Bildchen für externe Links plötzlich überall auf der Schraegschriftseite angezeigt. Das Stylesheet hat nun eine GRöße von 18.2 KB. Schnell wieder das Original zurückgespielt. Sieht einfach besser aus. 🙂

cssoptimizer

Die Seite ist in English unter http://www.cssoptimiser.com/optimize.php zu finden.

 

4. Online CSS Optimizer

Der Online CSS Optimizer erlaubt ebenfalls die Angabe einer URL und die Direkteingabe des Stylesheets. Nach dem Optimieren mit der ption Pretty Print hat die Stylesheet Datei 21.4 KB. Keine wirkliche Ersparnis. Schraegschrift.de funktioniert aber mit diesem optimierten CSS problemlos. Genau 18 KB hat die Variante ohne Pretty Print. Hier bleibt der Code aber dennoch recht lesbar. Die Seite funktioniert auch mit dieser optimierten Version des CSS Stylesheets.

cssonline

Der Optimizer ist in Englisch und zu finden unter: http://flumpcakes.co.uk/css/optimiser/

 

FAZIT

Bis auf kleine Ausreißer haben alle Optimierungen recht gut funktioniert. Die vielfältigsten Einstellmöglichkeiten hat man bei CleanCSS. Möchte man eine Datei hochladen, muß man hingegen auf eine andere Optimierung zurückgreifen. Die kleinste Dateigröße und damit die höchste Kompression erreichte ebenfalls CleanCSS. Auch wenn man versucht, den Code auf Lesbarkeit zu trimmen, ist CleanCSS eine gute Wahl. Ich denke, ich habe meinen Favoriten gefunden.

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Y!GG
  • Oneview
  • MisterWong
  • Reddit
  • Webnews
  • seekXL
  • Folkd
  • Digg
  • del.icio.us
  • Newsrider
  • Colivia
  • Linkarena
  • Technorati
  • Wikio DE
  • SEOigg
  • blogmarks
  • Blogosphere News
  • Blogsvine
  • Facebook
  • Google Bookmarks
  • Webbrille
Die kleinen Icons verlinken verschiedene Social Bookmarking Dienste. Über einen Eintrag würden wir uns sehr freuen. Unter http://schraegschrift.de/feed/ findet man den kompletten Newsfeed. Die Reaktionen auf diesen speziellen Eintrag können Sie mit Hilfe eines weiteren RSS 2.0 Feeds verfolgen. Sie können einen Kommentar hinterlassen, oder sie setzen ein Trackback von Ihrer eigenen Seite.

Lesenswert!

  • T.Hauser, C.Wenz, F. Maurice - Das Website Handbuch

    Hier wie versprochen das nÀchste Buch des Markt+Technik Verlages. "Das Website Handbuch" von Tobis Hauser, Christian Wenz und Florence Maurice. Als ich das Buch zum ersten Mal sah, habe ich mich ...

  • "Little Boxes" - Teil 2

    So klein sind die Boxen von Peter MĂŒller eigentlich gar nicht. Ich dachte, hmm ... Markt und Technik und ... naja, ganz schön einfach...". Aber jetzt, wo ich durch bin, muß ich sagen: Durchaus ...

  • FireScope - Die Referenz fĂŒr Firebug

    Beim Entwickeln von Webseiten schon einmal eine CSS Eigenschaft gesucht? Man weiß, dass sie da ist, es liegt einem auf der Zunge, aber man muß dennoch erst nachsehen. Es gibt nun die ...

  • China schließt einige Apple Store Kopien

    In den WerkstĂ€tten der chinesischer Fabriken wird bekanntermaßen so einiges kopiert. Wie ein durch die US Bloggerin BirdAbroad aufgedeckter Fall nun zeigt, hört es dabei aber lĂ€ngst nicht auf. In ...

  • Der Internet Explorer 9 und seine Fischfreunde

    Alles neu macht der ... April. Es ist soweit. Windows 7 hat mir den Internet Explorer 9 angeboten. Eigentlich nicht unbedingt einen Post wert? Stimmt, aber in diesem Zusammenhang ist mir erstmalig ...

  • Buch: Geld 2.0 - Geld verdienen im Web 2.0

    So, da liegt wieder ein Buch aus dem mitp-Verlag vor mir. Ich hatte hier schon positiv ĂŒber das Google Adwords Buch berichtet. Der jetzige Titel lautet "Geld 2.0 - Geld verdienen im Web 2.0". Neben ...

  • Buch: Fortgeschrittene CSS-Techniken

    In Deutschland gibt es inzwischen eine Reihe guter CSS Einsteigerwerke und auch einige Kompendien, die das Thema CSS umfangreicher behandeln. Ein mit Transcending CSS vergleichbares Buch von ...

  • Nokia und Microsoft integrieren jQuery

    Sowohl Nokia als auch Microsoft integrieren jQuery in Ihre offiziellen Entwicklertools. Bei Microsoft wird jQuery ein Teil des Visual Studio. Laut den Angaben auf der jQuery Seite möchte Nokia ...

  • Captcha Knacker

    Was haben Spammer nicht alles fĂŒr Probleme. Sie kommen schwer irgendwo rein und wenn doch, dann fliegen sie superschnell wieder raus. Sie mĂŒssen sich mit Tausenden von eMail-Adressen rumschlagen. ...

  • Piwik - Webstatistik auf dem eigenen Server

    Schon einmal Webalizer Statistiken angesehen? Nicht so prall, oder? Bei Robert Basic bin ich auf Woopra: Live-Statistik-Fernsehen der Extraklasse gestoßen. Woopra bietet Statistiken in Form eines ...

Eine Antwort hinterlassen

Name (*)
Mail (wird nicht veröffentlicht) (*)
Webseite
Kommentar