materidesign

Ein Beispiel

Ohne Base64-Kodierung

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

Mit Base64-Kodierung

(ASCII-Zeichenkette zur bes­se­ren Dar­stel­lung gekürzt):

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

Installation

Vor­au­set­zung für die Ver­wen­dung von CSS Ca­cheer ist ein lauffähiger Apache 2-Webserver mit ak­ti­vier­tem mod_rewrite Modul und Grund­kent­nisse im Umgang mit der Apache 2-Konfigurationsdatei. In­for­ma­tio­nen zur Apache 2-Konfiguration finden Sie z.B. bei SELFHTML ( Die Apache-Konfigurationsdatei: Apache 2 für Linux ).

Zur In­stal­la­tion sind fol­gende Schritte notwendig:

• Schritt 1: Paket her­un­ter­la­den 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 her­un­ter­ge­la­den werden. Dort lassen sich auch de­tailierte In­stal­la­ti­ons­hin­weise finden.

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

Es be­fin­den sich nun 2 Dateien und ein Un­ter­ord­ner zusätzlich im CSS-Ordner:

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

Schritt 2: Apache Konfiguration

Falls man Zugang zur Apache Kon­fi­gu­ra­ti­ons­da­tei be­sitzt, sollte man die Rewrite-Rules aus der .ht­ac­cess Datei un­be­dingt dort un­ter­brin­gen ( Apache Tu­to­rial: .ht­ac­cess – When (not) to use .ht­ac­cess files ). Das spart Ope­ra­tio­nen auf das Datei­sys­tem und erhöht die La­de­ge­schwin­dig­keit der Site.

Dazu fügt man fol­gende Zeilen in die Apache 2 Kon­fi­gu­ra­ti­ons­da­tei 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 ab­so­lu­ten Pfad zum CSS-Ordner ein.

Nun muss nur noch der Apache-Server neu­ge­star­tet werden.

Der erste Zugriff durch den Browser

Beim ersten Zu­griff auf die CSS-Datei über den Brow­ser werden alle über eine CSS-Datei ein­ge­bun­de­nen Hin­ter­grund­bil­der durch ASCII-Zeichenketten er­setzt und in die CSS-Datei integriert.

CSS Ca­cheer cacht anschließend die mo­di­fi­zierte CSS-Datei und sendet sie an den Brow­ser zurück. Bei einem er­neu­ten Aufruf wird le­dig­lich die ge­cachte CSS-Datei an der Brow­ser 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 dop­pelte Anführungszeichen in seinen Style­s­heets ver­wen­det, z.B. bei der Angabe von Schrift­ar­ten “Times New Roman” usw., wird schnell fe­stel­len, dass CSS Ca­cheer mit fol­gen­der Feh­ler­mel­dung die Arbeit verweigert:

XML error: > required at line 1

Um diese Feh­ler­mel­dung zu ver­mei­den, sollte man alle dop­pel­ten Anführungszeichen durch ein­fa­che er­set­zen: statt “Helvetica Neue” also ‘Helvetica Neue’.

Auf die Dateigröße der Hintergrundbilder achten

Wer seine Hin­ter­grund­bil­der mit Fi­re­fox er­stellt und diese im spei­cher­in­ten­si­ven Fire­works PNG-Format ab­spei­chert, be­kommt eben­falls die oben erwähnte Feh­ler­mel­dung. Man sollte also darauf achten, nur Bilder mit op­ti­mier­ter Dateigröße zu verwenden.

Erweiterung durch Plugins

CSS Ca­cheer wird mit ei­ni­gen Plugins aus­ge­lie­fert. Diese ermöglichen u.a. den Ein­satz von Kon­stan­ten, eine CSS-Fromatierung, Ver­scha­telte Se­lek­to­ren und noch ei­ni­ges mehr. Wer mehr über diese Plugins er­fah­ren möchte, sollte sich den ori­gi­nal Blog-Beitrag von Shaun Inman durchlesen.