Früher war vieles besser: Beim Umsetzen eines Layouts in (X)HTML verzichteten Web-Entwickler und Designer, soweit es nur ging, auf den Einsatz von transparenten Grafiken im PNG-Format und nahmen somit die Einschränkungen bei der Gestaltung einer Webseite in Kauf. Der Verantwortliche für diesen Ausnahmezustand war sich keiner Schuld bewusst. Internet Explorer 6 und seine in der Versionsnummer jüngeren Brüder konnten und können bis dato keine transparenten PNGs fehlerfrei verarbeiten und darstellen.

Die augenblickliche Welt sieht ganz anders aus. Die modernen Browser, darunter auch der Platzhirsch Internet Explorer 7, sind in der Lage komplexe Layouts verbindlich darzustellen, auch wenn PNG-Bilder zum Bestandteil des entworfenen Designs werden. Auf dieser Grundlage entfaltet sich die Kreativität, gestalterische Freiheit nimmt ihren Lauf - elegante Designumsetzungen sind die blumigen Folgen.

Leider sind die älteren Versionen des Internet Explorer unter den Nicht-Power-Nutzern noch stark verbreitet und lassen so ungewollt stilvolle Webseiten „alt“ aussehen. Nur wegen der PNG-Grafiken mit einem Transparenzfaktor, die auf der Seite ihre Verwendung finden. Höchste Zeit also über einen effektiven Workaround für alle IE-Versionen kleiner 7 nachzudenken.

Dr. Web Logo als transparentes PNG im IE 6

Als Lösung kursieren im Internet unterschiedliche Ansätze, die mehr oder weniger wirkungsvoll und unterschiedlich schwer zu implementieren sind. Die einfachste Methode ist der Gebrauch einer sogenannten HTC-Datei, die im Inneren über einen leicht verständlichen JavaScript-Code verfügt und bei Verarbeitung mit Microsoft-internen Filterfunktionen hantiert. Die besagte Datei trägt einen vielversprechenden Namen iepngfix.htc und wird per Copy&Paste aus dem ZIP-Archiv entnommen, welches auf der Download-Seite des Fix-Entwicklers Angus Turnbull zur Verfügung steht. Somit wäre die erste und die schwierigste Maßnahme von insgesamt zwei abgehackt.

Im zweiten Schritt muss lediglich eine entsprechende CSS-Definition - alternativ inline im (X)HTML-Code oder im externen CSS-File - festgelegt werden, welche den nicht ganz zeitgemäßen Browser dazu bewegt, die im Hauptverzeichnis des Projektes abgelegte HTC-Datei bei der Formatierung zu berücksichtigen und anzuwenden. Und das geschieht nach folgendem simplen Muster:

PNG-Fix auf alle Elemente anwenden

 {
  behavior: url(iepngfix.htc);
}

PNG-Fix nur auf Inline- und im Div vorhandene Hintergrundgrafiken anwenden

      img, div {
  behavior: url(iepngfix.htc);
}

Wahlweise kann der Fix-Aufruf auch direkt in CSS-Klassen notiert werden und muss nicht unbedingt für alle grafische Objekte geltend gemacht werden (wie im letzten Code-Beispiel vorgeschlagen). Prima klappt die offerierte Lösung auch mit transparenten PNG-Bildern, die per StyleSheet als Hintergrund eines Bereichs deklariert sind. Doch Vorsicht: Soll diese Hintergrundgrafik mittels repeat-Eigenschaft vertikal und/oder horizontal wiederholt werden, so kommt es gar nicht zum gewünschten Effekt und das Bild erscheint nur ein einziges Mal. Bedauerlicherweise ein unschöner Nebeneffekt des Fixes.

Gleiches Logo mit eingespieltem PNG-Fix für IE 6

Unterm Schlussstrich ist der besprochene Ansatz eine simple Lösung, das anspruchsvolle Layout mit Alpha-PNGs auch auf älteren IE-Versionen schick (und durchsichtig) aussehen zu lassen. (tm)

Erstveröffentlichung am 10.09.2007

Verwandte Artikel

• Wie breit ist width ? (0)
• Ein Pixel nach unten im Internet Explorer (1)
• Zielgruppengerechte Farbwahl (0) €
• Workshop: Das Flash-Magazin - Teil 2: Projektaufbau (0) €
• Wie der Besucher das Design beeinflusst (0)
• Wettbewerb Typografisches Layout: Mitmachen und Gewinnen! (6)
• Weil "Optimiert für 800x600" einfach nicht ausreicht... (18)