20. Februar 2013 | Workshops | Keine Kommentare

CSS sprite

CSS sprite ist eine Grafik die aus mehreren kleinen Bildern besteht. Sehr praktisch ist sie für kleine Navigationen, weil der Browser nicht viele verschiedene Bilder laden muss, sondern nur ein einziges. Es bedeutet eine schneller geladene Seite.

In diesem Workshop erstellen wir eine kleine Navigation mit Links zu verschiedenen Bereichen und als Hintergrundbild fügen wir ihr eine Grafik aus mehreren kleinen Bildern  zu. Dieses Verfahren heisst CSS sprite und  hilft dabei, dass der Browser weniger HTTP Anfragen senden muss und die Seite dadurch schneller geladen wird.

Als Erstes brauchen wir eine Grafik. Die Datei unten ist 200 x 27 px groß. Mit Hilfslinien teilen wir sie in 5 gleiche Bereiche, jeder 40px breit. In diese Bereiche fügen wir kleine, ca. 20x20px große Buttons ein. Fertige Grafik speichern wir als png.

CSS sprite

Der zuständige HTML Kode besteht aus einer Liste und einem span tag. Der span Tag beinhaltet den Link in Textform, damit  die Navigation auch ohne CSS benutztbar bleibt. Für die normale Ausgabe wird der Text mit einer extremen Positionierung aus der Sicht entfernt.

<ul id="navi">
<li><a id="a" href="#"><span>Link 1</span></a></li>
<li><a id="b" href="#"><span>Link 2</span></a></li>
<li><a id="c" href="#"><span>Link 3</span></a></li>
<li><a id="d" href="#"><span>Link 4</span></a></li>
<li><a id="e" href="#"><span>Link 5</span></a></li>
</ul>

Die CSS Angaben:

#navi{position:relative;top:4em;left:3em;width:200px;height:27px;} 
#navi li{float:left;list-style-type:none;} 
#navi a:link,#navi a:visited,#navi a:hover,#navi a:active{
display:block;height:27px;width:40px;
padding:0;background:url(sprite-css.png);} 
#navi span{position:absolute;left:-3000px;top:-3000px;} 
#a{background-position:0 0px;} 
#b{background-position:-40px 0;} 
#c{background-position:-80px 0;} 
#d{background-position:-120px 0;} 
#e{background-position:-160px 0;}

Damit wäre die Aufgabe an sich gelöst, ein Problem bleibt aber noch. Wenn man die Website mit deaktivierten Bildern ansieht, ist auch die Navigation unsichtbar. Das kann mit einer Verschlüßelung des Bildes behoben werden. Dazu muss man die CSS Datei als PHP Datei speichern. Oben fügen wir einen Header, damit die Datei als text/css ausgegeben wird, und die folgende Funktion ein:

<?php

	header('Content-type: text/css');
	function data_uri($file, $mime) {
	$contents = file_get_contents($file);
	$base64 = base64_encode($contents);
	return ('data:' . $mime . ';base64,' . $base64); }

?>

In der CSS Datei ändern wir den Pfad zu dem Bild:

#navi a:link,#navi a:visited,#navi a:hover,#navi a:active{
display:block;height:40px;width:20px;padding:0;background:url
('');}

Wenn Sie die CSS Datei jetzt im Browser öffnen, werden Sie sehen, dass statt eines Pfades zum Bild ein sehr langer, verschlüßelter string zu sehen ist. Der zusätzliche Nutzen liegt darin, dass man Ihre Bilder jetzt nur mit einem Screenshot klauen kann.

Probleme gibt es, natürlich und wie immer, nur mit dem Internet Explorer bis zu der Version 7. Erst der IE8 erkennt die Bilder. Deswegen empfehle ich, alle Hintergrundbilder in gewohnter weise in eine nur für Internet Explorer lesbare CSS Datei zu hinterlegen.

Quelle PHP Script: http://en.wikipedia.org/wiki/Data_URI_scheme