Er bringt Webdesigner zum verzweifeln, der Internet Explorer der Version 6. Aber besonders schlimm ist es, wenn man png-Bilder in Webseiten einfügen möchte, die den Alpha-Kanal nutzen. Heute habe ich mich damit beschäftigt und lange recherchiert und rumprobiert. Ich habe jetzt eine gute Lösung zu dem Problem gefunden und möchte es euch etwas aufgearbeitet darbieten.
Hier ein kleines vorher, nachher Screenshot:
Um dieses Ziel zu erreichen muss man lediglich kleinere Änderungen im CSS Code vornehmen. Dies hab ich anhand einer kleinen Beispiel-Webseite veranschaulicht, die ich hier zum Download anbiete.
Aber zuerst, möchte ich den Hack erklären:
CSS Code
#wrapper {
background-image: url(testbild.png);
width: 300px;
height: 300px;
}
#wrapper {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='testbild.png', sizingMethod='scale');
}
Der Code Bestandteil eins ist der eigentliche Inhalt, wenn nur dieser in der css-Datei stehen würde hätten wir eine Ausgabe wie links auf dem oberen Bild. Wenn wir aber den zweiten Teil hinzufügen, wird die Datei vom Internet Explorer mit filter:progid:DXImageTransform.Microsoft.AlphaImageLoader interpretiert und somit wird der Alphakanal korrekt dargestellt. In meiner kleinen Beispiel-Webseite habe ich, die eigentliche css-Datei aufgeteilt, in den allgemeinen Teil und den IE-Hack. Zusätzlich habe ich in den html-Code einen Kommentar eingebaut, auf den nur der IE6 anspringt und somit die zusätzliche css-Datei für den IE6 lädt. (Andere Browser werden nicht beeinflusst.)
Aber seht selbst: Download der Beispiel-Webseite (IE6 Hack)
IE-Icon von Jairo Boudewyn
Der Artikel „Alpha-Kanal-PNGs mit dem Internet Explorer“ wurde von Sven verfasst und am 30.10.2007 um 22:01 Uhr unter der Kategorie Webdesign veröffentlicht. Dieser RSS 2.0 Feed informiert über die neusten Kommentare. Über einen Kommentar, oder Trackback würde ich mich freuen.
Nice. Aber IE bleibt IE und nur, um solche netten PNGs mit Alpha zu nutzen, macht das für mich etwas zu viel Aufwand. Ich mache Seiten generell für Mozilla und mit W3C-Standards. Wenn der IE das nicht kapiert, ist das nicht mein Problem. – Ok, das ist sicher luxuriös, wenn man keinen Kunden hat, der aber genau mit einem IE 5 oder 6 die Seiten abnehmen lassen will. In der Regel funktioniert das aber sehr gut und ohne größere Spielereien in den Seiten kommt auch der IE noch halbwegs mit. XHTML und fertig angepassten AJAX-Frameworks sei Dank.
Übrigens scheinen mir die Filter im IE extrem gut für einen Overflow geeignet, greifen sie doch auf Hardware-Funktionen per DirectX zu.
ich sach nur
…
…
Vielleicht solltest du der Vollständigkeit halber erwähnen, dass diese Filter Dank ihrer : Syntax kein valides CSS sind. Daher sollte man diese Filter nicht im main.css verpacken
sonst gibbed Mecker vom W3C Validator.
Allerdings sehe ich es mit dem IE wie mein Namensvetter.