Alpha-transparente PNGs („PNG-24“ für diejenigen, die sie aus Photoshop speichern) sind für Webdesigner eine wunderbare Sache. Wir können einen Button mit einem Schlagschatten erstellen, und dieser Schatten wird auf alles darunter liegende multipliziert, selbst wenn sich der Hintergrund ändert. Dies mag trivial erscheinen, ist es aber nicht. Die Möglichkeiten, die Alpha-Transparenz einem Designer eröffnet, sind vielfältig. Das Problem ist, wie Sie wahrscheinlich gut wissen, dass Internet Explorer (IE < v7) keine Alpha-transparenten PNGs unterstützt. Je mehr man darüber nachdenkt, desto trauriger wird es. Glücklicherweise gibt es im Laufe der Jahre einige Methoden, die uns helfen, diese älteren Versionen von IE in Form zu bringen. Hier ist eine Zusammenfassung einiger dieser Techniken.
HINWEIS: Alle diese Techniken verwenden letztendlich den Microsoft AlphaImageLoader-Filter, um die Transparenz zu erzwingen. Die Techniken variieren nur darin, WIE und WANN dieser Filter angewendet wird.
Verwendung des AlphaImageLoader-Verhaltens für spezifische CSS-Klassen
Internet Explorer unterstützt eine „benutzerdefinierte Erweiterung“ von CSS in Form eines „behaviors“-Attributs. Keiner der anderen großen Browser unterstützt dies, was es Ihnen ermöglicht, den Vorteil der Browser-Spezifität zu nutzen, um diesen PNG-Hack nur auf Browser anzuwenden, die ihn benötigen. Diese Technik verwendet einen großen, hässlichen Block nicht validierender CSS, der im Wesentlichen den AlphaImageLoader-Filter verwendet, um die Transparenz zu erzwingen.
Denken Sie daran, dass es zwei Stellen gibt, an denen Sie möglicherweise Transparenz anwenden müssen: auf Inline-Grafiken (<img>) und auf CSS-Hintergrundbilder. Mit dieser Technik könnten Sie das Verhalten auf eine bestimmte CSS-Klasse (wie „.png“) anwenden und diese Klasse dann selektiv dort anwenden, wo sie benötigt wird, ODER Sie könnten das Verhalten global auf alle img-Elemente anwenden.
Beachten Sie auch, dass dies zwar für CSS-Hintergrundbilder funktioniert, aber nicht funktioniert, wenn das Bild auf irgendeine Weise wiederholt oder positioniert wird.
MEHR ZU DIESER TECHNIK
Komodo Media: Ersetzen von Bildern durch Hintergrundbilder
SNIPPLR: Verwendung eines Filters für IE und eines Attributselektors für Mozilla
Verhalten und Verweis auf eine HTC-Datei
Das Beste an dieser Technik ist, dass sie mit einer einzigen Zeile in Ihrer CSS-Datei auskommt, die auf diese „.htc“-Datei verweist, und Sie sind fertig. Das Verhalten wendet auf magische Weise den notwendigen proprietären Microsoft-Kram auf die benötigten Seitenelemente an, und Sie haben Alpha-transparente PNGs in IE.
MEHR ZU DIESER TECHNIK
Twin Helix: IE PNG Fix
Verwendung von Javascript
Da JavaScript die magische Fähigkeit hat, alle Elemente auf Ihrer Seite zu überwachen und zu durchforsten, kann es ideal sein, um nach allen angewendeten Klassen auf Ihrer Website zu suchen. Es gibt ein paar wirklich überzeugende Gründe, diesen Weg zu gehen. Erstens können Sie das JavaScript bedingt nur für die IE-Versionen anwenden, die es benötigen. Zweitens ist es genauso „einstellen und vergessen“ wie die HTC-Methode. Drittens ist daran nichts ungültig, sodass Sie sich keine Sorgen machen müssen, dass Ihr Code oder CSS die Validierung nicht besteht. Viertens hat JavaScript die Fähigkeit, „neue“ Inhalte zu sehen, die einer Seite hinzugefügt werden (denken Sie an AJAX), und entsprechend zu handeln. Die vorherigen Techniken funktionieren nur beim ersten Laden der Seite.
MEHR ZU DIESER TECHNIK
24 Ways: Superslight
PNGHack auf Google Code
Das ist eine großartige Ressource, Chris. Ich wollte mich in letzter Zeit mit IE-PNG-Hacks beschäftigen, hatte aber einfach keine Zeit. Jetzt muss ich das nicht mehr tun. :) Danke!
Man kann auch die JavaScript-Methode mit einer einzelnen Zeile in der CSS-Datei kombinieren. Ich benutze das oft:
#some-element { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image/some-graphic.png', sizingMethod='crop'); }Wie Sie richtig bemerkten, sind die Nachteile, dass Sie die Grafik nicht positionieren können und sie auch nicht wiederholen können. Mit etwas kreativer Nutzung der Grafik(en) können Sie jedoch normalerweise das erreichen, was Sie brauchen.
Ich sollte auch darauf hinweisen, dass man das Wiederholen ein wenig „cheaten“ kann, indem man ein Bild erstellt, das entweder vertikal oder horizontal gestreckt werden kann, und sizingMethod='scale' verwendet (dies bewirkt, dass das Bild gestreckt wird) im Gegensatz zu sizingMethod='crop', das, wie Sie erraten haben, das Bild zuschneidet.
Sie können diese Regel in ein bedingt kommentiertes Stylesheet aufnehmen oder den * html-Filter verwenden.
Ausgezeichnete Zusammenfassung einiger der nützlicheren Ansätze zur Bewältigung dieses äußerst ärgerlichen Problems. Trotz der vielfältigen Möglichkeiten, die transparente PNG in IE 6 und früher bieten, scheuen wir uns immer noch davor zurück, diese Technik für Hintergrundbilder zu verwenden – die Ergebnisse scheinen bestenfalls inkonsistent zu sein.
Ein häufiges Problem, auf das man achten sollte, sind deaktivierte Anker-Tags – insbesondere dann, wenn ein Design die Verwendung eines transparenten PNG (mit angewendetem JavaScript-Filter) für ein großes Hintergrundbild erfordert, das auf die Body- oder eine Container-Div angewendet wird. In einigen Fällen deaktiviert diese Kombination alle Links auf der betreffenden Seite. Diese Situation tritt am häufigsten auf, wenn sizingMethod auf 'scale' gesetzt ist, wie von chipgrafx oben erwähnt.
Wir haben eine Reihe von Ansätzen zur Behebung dieses Problems ausprobiert, die meisten beinhalten die Anwendung zusätzlicher CSS-Eigenschaften auf die betroffenen Anker-Tags. Die Anwendung von Positionierung und einem z-index scheinen die häufigsten zu sein. Leider fügt dies einen weiteren Schritt unnötiger Komplexität hinzu, um den IE-Bgsleight-Ansatz zu lösen. Leider scheinen keine dieser Taktiken eine durchweg zuverlässige Lösung zu bieten.
@Boxcar Studio: Danke, dass Sie das erwähnen. Das ist besonders beängstigend zu wissen, dass selbst wenn Sie die Transparenz erfolgreich zum Laufen bringen, Sie auf noch heimtückischere Weise von kaputten Links oder nicht fokussierbaren Seitenelementen betroffen sein könnten.
Hallo Chris, tolle Seite und Ressource hier,
Ich hatte große Probleme mit PNG-Transparenz-Problemen mit meinem neuesten Theme, „rainbow feather“, für WordPress. Es brach irgendwie alles in Internet Explorer 6 und es dauerte Wochen, bis ich es repariert hatte.
Ich verwende halbtransparente PNGs auf einem Farbverlaufshintergrund. Wenn Sie sich das ansehen möchten, finden Sie es unter http://www.h4x3d.com/themes/feather/
@jez: Sehr cooles Theme! Der Menübereich sieht in IE anders aus als in FF. Ich mag ihn in IE fast besser, aber beide funktionieren. Cool, wie man das mit bedingten Stylesheets machen kann.
Ich war gerade dabei, das Internet nach den Details des „PNG-Hacks“ zu durchsuchen. Ich werde IE6 vielleicht immer noch langweilige GIFs servieren, aber das ist ein großartiger Ausgangspunkt.
Hallo Chris!!!
Wie immer hat das Lesen deines Blogs mir als Anfänger sehr geholfen. Ich hatte immer große Schwierigkeiten mit PNG-Transparenz, also habe ich stattdessen immer GIF verwendet.
Und ich habe immer Probleme, diese Hacks anzuwenden. Ich glaube, ich bekomme nicht alles richtig hin.
Es wäre also großartig, wenn du einen Screencast machen könntest, der einige dieser Techniken erklärt oder die, die du für die beste hältst. Sowohl für normale Bilder als auch für Hintergründe.
VIELEN DANK FÜR ALLES!!!
Ist dieses Thema noch für Fragen offen?