Individuelle HTML-Buttons: Eine Datei – 15kb!

Individuelle HTML-Buttons - AnimationZunächst vielen Dank allen CSS- und HTML-Begeisterten für die Neugier an diesem Experiment und das mit diesem Blog verbundene Interesse an Tipps und Tricks rund um das Thema E-Commerce. Angelehnt an das Kernthema dieses Blogs, die individuelle Produktkonfiguration im Internet mit dem Produktkonfigurator INCONFIG und dessen Möglichkeiten individuelle Templates zu generieren, schweift man in kreativen Phasen gerne in Richtung HTML- und CSS-Spielereien ab. In einem solchen Augenblick  entstand der nun folgende Versuch um schnell und einfach individuelle Formularelemente – hier Buttons – auf einer Webseite zu implementieren. Das Ziel war es mit nur einer (Pseudo-) CSS-Datei direkt individuelle Buttons auf einer Webseite zu nutzen. Auf den praktischen Nutzen einer solchen Lösung möchte ich an dieser Stelle nicht eingehen, denn der Versuch soll rein theoretischer Natur sein.


 Das Experiment

Base64-Sprite-GIF
Base64-Sprite-GIF (Abb. 1)

Viele Wege führen nach Rom – manchmal auch nur wenige. Die Grundidee: Eine einzelne PHP-Datei liefert sowohl das Sprite-Bild (Abb. 1) als auch die CSS-Definitionen der einzelnen Buttons an den Client aus. Nach dem Einbinden dieser Pseudo-CSS-Datei im HTML-Kopf der Webseite (Codeblock 3) können unmittelbar im HTML-Quelltext die eigenen individuellen Buttons genutzt werden. Ich möchte an dieser Stelle von der optionalen Möglichkeit, nämlich dem Einsatz base64-codierter Bilder in CSS, gezielt absehen, da zum einen diese Technik nicht in den Internet-Explorern 5-7 lauffähig ist  und zum anderen da die an den Client zu sendende Datenmenge sodann auf über 30% ansteigen kann.


Bild durch PHP ausgeben

Zunächst müssen die Binärdaten des, mit einem Fotoprogramm erstellten, Sprite-Bildes mittels Base64 in lesbare Zeichen umgewandelt werden, sodass wir mit dem Bild in PHP umgehen können. Bilder der Formate JPEG, GIF und PNG lassen sich leicht über Online-Dienste, wie z.B. base64-image.de in einen lesbaren String umwandeln. Sorgen wir nun mit folgendem Programmteil zu Beginn der PHP-Datei dafür, dass sich die Datei selbst bei einer Anfrage mit dem GET-Parameter “sprite” als GIF-Bild ausgibt. In diesem Fall beenden wir das Script unmittelbar mit der Ausgabe des Bildes mittels PHP-Exit-Funktion.

if( isset( $_GET['sprite'] ) ){

    header('Content-Type: image/gif');

    exit( base64_decode( /* ... Base64-Bild-String ... */ ) );
}

CSS dynamisch ausgeben

Im nächsten Programmteil können wir nun davon ausgehen, dass der Client kein Bild anfragt und wir ihm somit das für die Buttons benötigte CSS ausgeben können. Wir könnten jeden unserer im Grafik-Sprite enthaltenen Buttons durch feste CSS-Deklarationen beschreiben oder wir behelfen uns einer PHP-Funktion die diese Aufgabe für uns übernimmt. Ich habe mich für zweiteres entschieden da wir uns ohnehin bereits in einem PHP-Script befinden und es dem Wunsch einer sehr kompakten PHP-Datei gerecht wird. Das ermöglicht uns schnell und einfach auf neue Buttonproportionen durch ein abgeändertes Sprite-Bild zu reagieren.

function GenerateButton( $ClassName, $Height, $Width, $OffsetTop, $OffsetLeft ){
 
    /* Set the three background-position-values */
    $Default   = $OffsetLeft . 'px ' . ( $OffsetTop            ) . 'px';
    $MouseOver = $OffsetLeft . 'px ' . ( $OffsetTop-$Height    ) . 'px';
    $MouseDown = $OffsetLeft . 'px ' . ( $OffsetTop-$Height *2 ) . 'px';
 
    /* Output some CSS */
}

Bei dieser Funktion setze ich voraus, dass die drei Button-Zustände “Default”, “Mouseover” und “Mousedown” vertikal in exakt selben Proportionen im Grafik-Sprite (wie in Abb. 1) zur Verfügung stehen. Für den modernen Browser können wir uns für die zwei Zustände “Mouseover” und “Mousedown” auf die CSS-Pseudo-Selektoren :hover und :active verlassen. Den Workaround für alte Internet Explorer in Version 5-7 beschreibe ich im nächsten Abschnitt. Zudem geben wir allen Buttons das durch dieselbe PHP-Datei auszuliefernde Background-Image indem wir den Bild-Pfad auf uns selbst verweisen und den zuvor definierten GET-Parameter “sprite” übergeben.

background-image: url( <?php echo basename(__FILE__) ?>?sprite );

Der letzte Schritt unserer PHP-Datei ist nun das definieren der individuellen Button-Bereiche auf der Sprite-Grafik mittels unserer zuvor definierten Funktion “GenerateButton” die wir stets für jeden button einmalig aufrufen.


Background-Position IE 5-7 Kompatibilität

Leider ist die heutige Standardtechnik aus der Kombination der CSS-Pseudoklassen :hover und :active und der CSS-Eigenschaft “background-position” mit dem Internet-Explorer kleiner Version 8 nicht vollständig kompatibel. Microsoft bietet uns dazu Mittels Dynamic Properties (expressions) und CSS-Inline-Javascript Abhilfe.

background-position : expression(

  this.onmouseover = new Function( "this.style.backgroundPosition = '0px -47px';" )
, this.onmouseout  = new Function( "this.style.backgroundPosition = '0px 0px'  ;" )
, this.onmousedown = new Function( "this.style.backgroundPosition = '0px -94px';" )
, this.onmouseup   = new Function( "this.style.backgroundPosition = '0px -47px';" )

);

Integration in der HTML-Seite

Die Buttons in einer HTML-Seite  zu nutzen ist Kinderleicht! Nachdem zunächst die erstellte PHP-Datei als CSS-Pfad im HTML-Head eingebunden wurde können wir über die CSS-Klasse “button”,  sowie über die im Script individuellen CSS-Klassen pro Button, die jeweiligen gewünschten Buttons integrieren.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" href="buttons.css.php" rel="stylesheet">
	</head>
	<body>
		<div class="button l"></div>
		<div class="button r"></div>
		<div class="button t"></div>
		<div class="button u"></div>
		<div class="button n"></div>
		<div class="button m"></div>
		<div class="button y"></div>
		<div class="button z"></div>
	</body>
</html>

Den vollständigen Quelltext der Datei könnt ihr im Folgenden kostenlos herunterladen, nach Belieben verändern und frei nutzen. Bei Fragen und Anregungen freue ich mich auf eure Nachricht an blog@inconfig.com

Download des Experiments hier: Experiment.Individuelle.Buttons.zip