Alpha-transparente PNG-Grafiken auch für den IE kleiner Version 7!
-
Webdevelopment
- 10 Jun, 2008
Twittern - Kommentare (11)
Transparenzen in Bildern und Grafiken für den IE kleiner der Version 7 darzustellen zeigt, ein nicht ganz unbekanntes Problem. Gerade bei Grafiken die sich wie die Abbildung über wechselnden Hintergrundfarben oder Farbverläufen befinden, ergibt dies ein oft unansehnliches Bild. Zur Lösung dieses Problems gibt es wie so oft, mehrere Ansätze. Da gerade bei den Suchanfragen oder direkten Anfragen an das Webstandard-Team, nach einer solchen Lösung gefragt wird, wollen wir an dieser Stelle auf ein kleines aber feines JavaScript hinweisen, welches von Dean Edwards entwickelt wurde. Neben vielen anderen Features die dieses Skript ermöglicht, ermöglicht der Download des Skriptes unter der zusätzlichen Verwendung einer transparent Grafik im GIF-Format, eine optimale Darstellung alpha-transparenter PNG-Grafiken in allen IE-Versionen kleiner der Version 7.
Internet Explorer < 6 goes transparency
Die Implementierung des Skriptes und die daraus resultierende Anwendung ist denkbar einfach. Da der IE7 und sein noch in der Beta-Phase befindlicher Nachfolger alpha-transparenter PNG-Grafiken korrekt darstellen können, können sie das nach dem Download erhaltene Skript bspw. via Condidtional Comments implementieren. Mit der entsprechenden Bedingung, nämlich nur für den IE kleiner als (lower than =lt) Version 7, wir ausschließlich diesen Browser-Versionen das Skript zur Ausführung angeboten. Nun benötigt dieses Skript zur optimalen transparenten Darstellung der Grafiken noch eine 1x1 Pixel große transparente GIF-Grafik, die sich nach dem Download im selben Ordner wie das JavaScript wiederfindet. Der die Grafik in einem anderen Ordner ablegt als das JavaScript, sollte den Pfad zur Grafik in der JavaScript-Datei anpassen.
JavaScript-Implementierung
...
<head>
...
<!--[if lt IE 7]>
<script src="js/IE7.js" type="text/javascript"></script>
<![endif]-->
...
</head>
...
Damit die Darstellung wie in der zweiten Abbildung korrekt ist, gibt es eigentlich nur noch einen Punkt zu berücksichtigen. Die Bezeichnung der Grafik. Damit das JavaScript von Dean Edwards mit der Grafik "korrespondieren" kann, muss die Grafik wie im Code-Ausschnitt zu sehen am Ende des Dateinamen die Bezeichnung ...-trans.png tragen. Die weiteren JavaScript-Dateien die ihr mit dem Download dieses Skriptes erhaltet, nehmen sich weiterer Darstellungsbugs der IE Versionen an. Wer mehr darüber wissen möchte, kann die Möglichkeiten dieser JavaScript-Datei u.a. hier testen. Auch wenn diess etwa 31KB große Script kein Allheilmittel zur Lösung browserspezifischer Unzulänglichkeiten darstellt, bietet es trotzdem allemal eine interessante Art der Schützenhilfe für den Microsoft-Browser.
Zusammenfassung
- JavaScript und die 1x1px transparente GIF-Grafik downloaden
- Via Conditional Comments auf das JavaScript referenzieren
- Bilder mit der Endung ...-trans.png bezeichnen
Update: Da die Kommentare der Leser mit interessanten Links nicht im Kommentarbereich "verpuffen" sollten, werden diese an dieser Stelle in den Artikel integriert. Einer dieser Ansätze basiert auf der Verwendung des AlphaImageLoader-Filter. Da der IE 5.0 diese spezielle ActiveX-Komponente nicht besitzt, ist diese Methode nur für den IE5.5 und IE6 gültig. Allerdings ist das Skript ( dank an Andi von wirgestalter.ch für den Hinweis) mit gerade einmal 2KB ein echtes Fliegengewicht und damit eine weitere adäquate Möglichkeit dieses "Manko" der älteren IE-Versionen zu beheben. Wer zu dieser Methode weitere Erklärungen benötigt, dürfte die bei Jeena und seinem Artikel "Wie kann man PNG-Alphatransparenz im IE nutzen?" finden. Carlo weist zudem auf eine weitere Lösung hin, die sich auch des AlphaImageLoader-Filters bedient und in dem Artikel "Transparent PNGs in Internet Explorer 6" ausgiebig beschrieben wird.
"Modernes Webdesign mit CSS- Das neue Buch!"
Jetzt direkt bestellen!
Top Artikel - CSS3, HTML5 & Co.
- CSS3 Toggler - Transform & Transition Modules
- Call-to-Action Button - MouseOver-Special-Effects
- CSS4 Preview - The future of Webdesign
- CSS3 Tutorial - Sliding Menü
- Top 10 - JavaScript-Frameworks
Webdesign Bilder Galerie
Blog-Partner
- Web - Online Marketing Agentur CROSS
- Suchmaschinenoptimierer (Freelancer - SEO & SEM)
- SEO Analysen, Umsetzung & Consulting by meentix
- SEM - Suchmaschinenmarketing
- PR SEO
10 Jun 2008, 11:56
@Andi: Dafür kann es aber einiges mehr ;o) Aber wie gesagt, ... "Zur Lösung dieses Problems gibt es wie so oft, mehrere Ansätze". Wer aber ausschließlich die Transparenz von Bildern bedienen möchte, kann mit dem von dir erwähnten Skript sicherlich einiges an KB einsparen.
10 Jun 2008, 12:02
schon klar. allerdings geht es in diesem beitrag doch um die alpha-transparenz im ie < 7 ;-)
Schöner Beitrag.
Allerdings stört mich das mit dem "-trans.png".
Das geht auch ohne: http://24ways.org/2007/supersleight-transparent-png-in-ie6
Übrigens: sollte es nicht "The IE
10 Jun 2008, 15:35
@Jeena Paradies jetzt weiss ich wenigstens wieder, woher ich meinen link hatte :-)
mir schwebt gerade die frage vor, ob dieses script auch endlich die css-sprites-technik mit berücksichtigt `?
@webstandard-team
well, nope. sicherlich die auflistung der dank .js verfügbaren selektoren, aber transparente pngs funzen nich mit css-sprites für den ie6....
18 Jun 2008, 17:36
Hatte ich auch mal verwendet. Aber dann stand ich beim Kunden und sehe, dass das transparente PNG zwar angezeigt wird, aber mit einem "Bild nicht gefunden"-Kreuz darüber.
Wenn man eine 100%ige Unterstützung haben möchte gibt es nur eins: Auf transparente PNGs verzichten, bis der IE6 unter 2% Marktanteil hat...
Lasse mich aber gerne etwas besseren belehren.
Grüße
19 Jun 2008, 08:36
@Philipp: Eigentlich passier genau dass, nur dann wenn die transparente GIF-Grafik vergessen wird. Ansonsten hat es bisher immer funktioniert. Nur auf transparente Grafiken zur verzichten weil der IE6 abwärts es nicht kann, ist vielleicht ein wenig viel des Guten, wenn es dafür doch zahlreiche Möglichkeiten gibt. Auch wenn diese auf JavaScript basieren. Ansonsten biete diesen IE Versionen via Conditional Comments doch eine entsprechende "Alternativgrafik" an.
21 Jan 2009, 14:38
Hm, warum so kompliziert und die dateien mit der endung "-trans.png" versehen? Im IE7.js Script einfach nach "-trans.png" Suchen und durch ".png" ersetzen. Fertig ist das ganze und alle PNG ob Transparent oder nicht, werden eingeschlossen.
26 Feb 2009, 11:12
Auf jeden Fall eine gute Möglichkeit! Es ist nur nicht so gut erklärt, finde ich. Denn bis ich selbst paar Mal probiert habe, war mir nicht klar, z.b. ob ich die .gif Bilder selbst erstellen soll oder ob das Script es übernimmt.
21 Aug 2009, 12:03
Hallo,
wenn die Besucher JavaScript ausgeschaltet haben, dann funktioniert das wie so oft nicht mehr. Im Grunde kommt man mit Conditional-Comments aus. Hierzu können die Bilder in das Stylesheet verlegt und als Hintergrund unter ein transparentes GIF gelegt werden. Im "normalen" Style steht für das betreffende Element dann:
background-image:url(alpha.png);
und in der HTML-Datei ein in Conditional-Comments gefasstes:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png', sizingMethod='scale');
background:none;
Hierbei ist auf die Reihenfolge der Angaben zu achten. Die Filter müssen nach dem Einbinden oder der Definition des Stylesheets erfolgen. Auf diese Weise spart man sich das - trotz Kompression - recht umfangreiche JavaScript-File.
Hier ist man aber wieder auf ActiveX angewiesen, was nicht zuletzt aufgrund der immer mal wieder auftretenden Sicherheitslücken ausgeschaltet sein kann. Allerdings arbeitet das Script von Dean Edwards wohl auch mit diesem Filter und diese Beschränkung gilt auch für das Script: Kein ActiveX, kein Alphakanal
Bin mal gespannt, wann die - glaubt man den Statistiken von Webhits - vielen IE6-Nutzer endlich mal ihre unsicheren Browser-Dinosaurier gegen neuere Versionen austauschen. Für IE8 braucht man mittlerweile nichtmal mehr Browserweichen....
Gruß
Alex