CSScaffold soll flexible und programmierbare CSS Layouts ermöglichen und lässt sich auf der CSScaffold Github Projektseite › herunterladen.

Dabei sollen die Vorteile von CSS-Cacheer (Konstanten, Caching, Server-Imports, Grids, CSS-Formatierung und Erweiterbarkeit durch Plugins) mit folgenden Funktionen kombiniert werden:

• Eigenschaften wie Kolumnenraster, Spaltenraster, usw. lassen sich variabel angeben.
• Automatisch generiertes Bild des Gestaltungsrasters
• Eingebautes CSSTidy
• Optimierung und Säuberung des CSS-Quellcodes
• Ausführen einfacher mathematischer Berechnungen
• weitere Funktionen lassen sich in der CSScaffold Dokumentation nachlesen.

Wer sich schonmal einen ersten Eindruck über die Funktionsweise verschaffen möchte, sollte unbedingt den 8 minütigen Screencast anschauen:

Die HD Version ist um einiges schärfer und lässt sich nur auf der Vimeo-Seite anschauen

Sprungmarken

• CSS-Sprites
• Base64-Kodierung
• CSS Cacheer
  • Installation
• CSS Cacheer im Einsatz
  • Der erste Zugriff durch den Browser
  • Worauf man achten sollte
  • Erweitung durch Plugins

Nachtrag vom 26.03.2009

Die Base64-Kodierung funktioniert nicht unter Internet Explorer Version 6 und 7. Danke an die Moderatoren Daniel und Sascha von Technikwürze Folge 130 für den Hinweis!

CSS-Sprites

Wer viele Hintergrundbilder über CSS einbindet, muss ohne Optimierung mit ebensovielen HTTP-Requests rechnen. Um dies zu verhindern, greift man auf CSS-Sprites zurück.

Der Aufwand diese zu erstellen, bzw. zu ändern ist jedoch meist nicht zu unterschätzen. Zwar gibt es Tools, die einen dabei unterstützen. Der Gesamtaufwand bei Änderungen (andere Postition, zusätzlicher Hintergrund usw.) bleibt dennoch hoch.

Base64-Kodierung als Alternative

Statt alle Hintergründe in eine große Bild-Datei zu packen, lassen sich diese auch über eine Base64-Kodierung direkt in das Stylesheet integrieren. Das Bild wird dabei in eine 8-Bit Zeichenkette kodiert, die nur aus ASCII-Zeichen besteht. Der ursprüngliche URL-Verweis im Stylesheet wird anschließend durch die generierte ASCII-Zeichenkette ersetzt.

Ein Beispiel

Ohne Base64-Kodierung

#branding h1 {
background: url(../images/branding.png) no-repeat;
}

Mit Base64-Kodierung

#branding h1 {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEU==)
}

Selbstverständlich ist das manuelle Ersetzen der Bilder durch die Zeichenkette sehr aufwendig. Durch einen Parser lässt sich der Prozess jedoch automatisieren. Die Hintergrundbilder im Stylesheet werden mithilfe des Parsers automatisch durch kodierte Zeichenketten ersetzt.

CSS Cacheer

Einen solchen Parser hat Shaun Inman entwickelt. Mit CSS Cacheer stellt er einen mächtigen server-seitigen CSS Pre-Prozessor zur Verfügung, der neben der Base64-Kodierung auch Konstanten, Caching, Server-Import, Grids, CSS-Formatierung und weitere, über Plugins bereitgestellte Erweiterungen, verfügt.

Da die Base64-Kodierung sehr CPU-lastig ist, wird das resultierende Stylesheet gecacht. Der Parser kommt erst bei einer Änderung des Stylesheets erneut zum Einsatz.

Installation

Vorausetzung für die Verwendung von CSS Cacheer ist ein lauffähiger Apache 2-Webserver mit aktiviertem mod_rewrite Modul und Grundkentnisse im Umgang mit der Apache 2-Konfigurationsdatei. Informationen zur Apache 2-Konfiguration finden Sie z.B. bei SELFHTML ( Die Apache-Konfigurationsdatei: Apache 2 für Linux ).

Zur Installation sind folgende Schritte notwendig:

• Schritt 1: Paket herunterladen und in den CSS-Ordner entpacken
• Schritt 2: die Rewrite-Rules direkt in die Apache-Konfigurationsdatei einfügen.

Schritt 1

Das Paket kann von Shaun Inman’s CSS-Cacheer Blog-Beitrag heruntergeladen werden. Dort lassen sich auch detailierte Installationshinweise finden.

Anschließend wird das Paket in den CSS-Ordner entpackt.

Es befinden sich nun 2 Dateien und ein Unterordner zusätzlich im CSS-Ordner:

• .htaccess
• css-cacheer.php
• /css-cacheer

Schritt 2: Apache Konfiguration 

Falls man Zugang zur Apache Konfigurationsdatei besitzt, sollte man die Rewrite-Rules aus der .htaccess Datei unbedingt dort unterbringen ( Apache Tutorial: .htaccess - When (not) to use .htaccess files ). Das spart Operationen auf das Dateisystem und erhöht die Ladegeschwindigkeit der Site.

Dazu fügt man folgende Zeilen in die Apache 2 Konfigurationsdatei ein:

<Directory /var/www/projectname/css>
	RewriteEngine	on
	RewriteCond		%{REQUEST_FILENAME}		-f
	RewriteCond 	%{REQUEST_URI}	     .css$
	RewriteRule 	^(.+)$ 				 /var/www/projectname/css/css-cacheer.php?cssc_request=%{REQUEST_URI}&%{QUERY_STRING}
</Directory>

Statt des Pfades /var/www/projectname/css fügt man hier den absoluten Pfad zum CSS-Ordner ein.

Nun muss nur noch der Apache-Server neugestartet werden.

CSS Cacheer im Einsatz

Der erste Zugriff durch den Browser

Beim ersten Zugriff auf die CSS-Datei über den Browser werden alle über eine CSS-Datei eingebundenen Hintergrundbilder durch ASCII-Zeichenketten ersetzt und in die CSS-Datei integriert.

CSS Cacheer cacht anschließend die modifizierte CSS-Datei und sendet sie an den Browser zurück. Bei einem erneuten Aufruf wird lediglich die gecachte CSS-Datei an der Browser geschickt.

/* Processed and cached by Shaun Inman's CSS Cacheer (with BasedOn, Base64, Constants, NestedSelectors, Grid & Pretty enabled) on Wed, 11 Feb 2009 21:10:33 +0000 <http://shauninman.com/search/?q=cacheer> */
...

Worauf man achten sollte

Keine doppelten Anführungszeichen im Stylesheet verwenden

Wer doppelte Anführungszeichen in seinen Stylesheets verwendet, z.B. bei der Angabe von Schriftarten “Times New Roman” usw., wird schnell festellen, dass CSS Cacheer mit folgender Fehlermeldung die Arbeit verweigert:

XML error: > required at line 1

Um diese Fehlermeldung zu vermeiden, sollte man alle doppelten Anführungszeichen durch einfache ersetzen: statt “Helvetica Neue” also ‘Helvetica Neue’.

Auf die Dateigröße der Hintergrundbilder achten

Wer seine Hintergrundbilder mit Firefox erstellt und diese im speicherintensiven Fireworks PNG-Format abspeichert, bekommt ebenfalls die oben erwähnte Fehlermeldung. Man sollte also darauf achten, nur Bilder mit optimierter Dateigröße zu verwenden.

Erweiterung durch Plugins

CSS Cacheer wird mit einigen Plugins ausgeliefert. Diese ermöglichen u.a. den Einsatz von Konstanten, eine CSS-Fromatierung, Verschatelte Selektoren und noch einiges mehr. Wer mehr über diese Plugins erfahren möchte, sollte sich den original Blog-Beitrag von Shaun Inman durchlesen.

CSS Cacheer: eine Alternative zu CSS-Sprites ist der erste Beitrag einer kommenden Serie, die sich internsiver mit CSS Cacheer befassen wird.

Das eBook richtet sich an alle, die Ihren Javascript-Anwendung mehr Performance entlocken wollen.

Wer sich über den Themenumfang informieren möchte, findet auf der Website ein vorläufiges Inhaltsverzeichnis.

Käufer der Beta-Version bekommen einen Preisnachlass von $ 5.