Der Arne hatte heute ein Problem mit der Darstellung von animierten PNG-Grafiken mit Alphatransparenz im Internet Explorer 7.
Dieses Problem lief mir soweit ich mich erinnern kann bereits vor über einem Jahr im Zuge einer kleinen Webanwendung über den Weg, und da die Aufklärung darüber wohl noch nicht so weit her ist, will ich das hiermit mal schnell nachholen.
Meine Gebete wurden erhört, nur leider habe ich das wohl zu spät mitbekommen.
Gerade eben habe ich die DebugBar für den Internet Explorer entdeckt. Das ist für mich schon fast eine kleine Sensation! Die DebugBar sieht auf den ersten Blick so aus wie der kleine Bruder von Firebug, einer Extension die wohl kein Webentwickler mehr missen möchte.
DebugBar bildet nun die annähernd gleichen Funktionalität auch für den Internet Explorer ab. Man kann die einzelnen DOM-Elemente per Drag & Drop aktivieren oder durchklicken, sich deren (vom IE “interpretierten”) CSS-Eigenschaften ansehen, einzelne Elemente wie Bilder, Formulare und Links auflisten lassen, AJAX-Calls verfolgen, JavaScript-Funktionen einsehen und selbst das (X)HTML lässt sich on-the-fly validieren. Ein ebenfalls nettes Feature ist die grafische Darstellung des (meist kaputten) Boxmodels, also der width/height, padding, border und margins.
Ich denke das kann doch ein großer Schritt in Sachen Bug-Bekämpfung des IE sein. Zwar werden wir in einigen Fällen wohl um unsere Hacks nicht herum kommen, doch das “WARUM, WARUM VERDAMMT!!!” klärt sich vielleicht doch etwas schneller als bisher.
Mir ist zudem aufgefallen das sich die Toolbar wunderbar mit MultipleIE zu verstehen scheint, man kann sie also beim Debuggen auf einem System sowohl im IE6 als auch IE7 zeitgleich verwenden.
Doch aufgepasst, solltet ihr DebugBar für kommerzielle Projekte benutzen wollen, so wird eine Gebühr von 59$ für eine Single-User-License fällig. Für private Geschichten ist die nutzung der Software jedoch kostenlos.
Als ich vor einiger Zeit begann das PNG-Format für mich zu entdecken, machte sich auch sehr schnell Ernüchterung bei mir breit.
Der Grund dafür war, dass der Internet Explorer in all seinen Version ein Problem mit den Gammawarten von PNG-Grafiken hat. Im Resultat macht sich das in sofern bemerkbar, dass der IE in der Regel alle PNG-Grafiken ein wenig dunkler darstellt als es z.B. Opera und Firefox tuen.
Das machte sich bei der Anwendungen von PNG-Grafiken in sofern schlecht, da die Grafiken sich oft von ihrer eigentlichen Hintergrundfarbe abheben, und man somit im Prinzip eine gesonderte CSS-Datei für den IE anlegen müsste.
Doch dieser Spuk ist nun endlich vorbei. Des Rätzels Lösung ist das kleine aber durchaus feine OpenSource-Tool TweakPNG. TweakPNG kann verschiedene Default-Werte von PNG-Grafiken modifizieren, hinzufügen oder löschen. Somit lässt sich z.B. die Standardhintergrundfarbe für Browser ohne Alpha-Kanal festlegen u.v.m.
Für das fixen des Bugs ist jedoch im besonderen der Wert “gAMA” wichtig. Öffnet man eine PNG-Datei mit TweakPNG, löscht die Chunk-Zeile “gAMA” und speichert die Datei wieder, so lässt sich beobachten, dass die PNG-Grafik fortan in allen Browsern identisch ausgegeben wird.
Wahrscheinlich für viele ein alter Hut, ich wollte es den Unwissenden unter euch aber dennoch nicht vorenthalten.
P.s.: Ein sehr guter Hack um dem IE6 ebenfalls den Umgang mit einem Alpha-Kanal beizubringen, findet sich in diesem Tutorial.
