Browserweichen & Inline-Bilder
Um zu verhindern, dass statt der eingebetteten Bilder nur leere Flächen auf der Homepage angezeigt werden, ist zuweilen ein kleiner Umweg nötig. Dank Conditional-Comments können fehlende Daten nachgeladen werden, wenn es nicht so richtig mit den Inline-Fotos klappt. Besteht man darauf, dass die Internetseite unter jedem Browser läuft – was eigentlich der Normalfall sein sollte – kommt man nicht um diese Tricks herum.
Will der Seitenbetreiber sicher gehen, dass auch wirklich jeder Besucher in den Genuß seiner Fotos kommt, so kann nur der Einsatz von Conditional-Comments dieses Problem sicher lösen. So könnten die Bilddaten als Hintergründe von transparenten IMG-Elementen in einem Stylesheet-Abschnitt, der direkt in die HTML-Datei eingebettet wird, ausgeliefert werden.
Mittels eines Conditional-Comment können dann die Hintergrundbilder bei Bedarf per externem Link zur jeweiligen Bilddatei nachgereicht werden. Zwar werden die Daten dann bei IEs unterhalb von Version 8 doppelt ausgeliefert, allerdings schließt eine solche Lösung auch keinen Benutzer aus. Da die Nutzerzahlen der Browserdinos zumindest langfristig sinken werden, ist dies ein annehmbarer Kompromiss. Nachfolgend ein Beispiel zum Einsatz einer solchen Lösung:
<head>
...
<style type="text/css">
img#strand {
background-image:url("data:image/jpg;base64,<Daten>");
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
img#strand {
background-image:url("/pic/strandbild.jpg");
}
</style>
<![endif]-->
</head>
<body>
...
<img id="strand" width="200" height="150" src="/pic/t.gif">
...
</body>
</html>
Das obige Beispiel nutzt ein vollständig transparentes Bild von 1x1 Pixel Rastergröße (abgelegt unter „/pic/t.gif” auf den selben Domain), welches das Bildformat GIF nutzt. Dabei wird das Bild mittels der Attribute „width” und „height” auf die Größe des per Cascading-Stylesheet eingebetteten JPG-Bildes – angegeben im ersten Style-Abschnitt des Beispiels – skaliert. Hierdurch entsteht eine transparente Fläche, die das im Hintergrund angegebene Bild durchscheinen lässt. Die im HTML-Code angegebenen Maße bezüglich der Bildauflösung sollten exakt zum hier darzustellenden Foto passen.
Unter dem ersten Style-Abschnitt wird ein weiterer Style angegeben, der ausschließlich durch Internet Explorer in Versionen unterhalb von 8 – „<” steht hier für „less than” – verarbeitet wird. Wichtig ist hier, dass diese CSS-Angaben nach dem allgemeinen Stylesheet mit dem eingebetteten Bild steht, da sonst der externe Link durch die eingebetteten Bilddaten überschrieben würde. Dies führte dazu, dass die Bilddaten von allen Browsern – auch von denen, die Inline-Fotos darstellen können – aus der hier angegebenen externen Datei nachgeladen würden.
Die hier genutzte Vorgehensweise ist etwas umständlicher als die Variante beim vorherigen Beispiel, in dem die Bilddaten direkt im SRC-Attribut des IMG-Tags eingebettet wurden. Dagegen muss hier zu jedem eingebetten Bild ein Style mit den zugehörigen Bilddaten angegeben werden und darüber hinaus ein alternativer Style für die alten IEs unter dem ein Link zum extern gespeicherten Bild angegeben ist. Daraus folgt allerdings, dass die Daten von alten IEs in jedem Fall mehrfach herunter geladen werden. Vorteilhaft ist dagegen, dass keine weitere Browserweiche nötig ist und die Bilddaten in jeder Browseranwendung zur Verfügung stehen.