Kann er aber nicht, und deswegen gibt es mittlerweile einige Workarounds extra für dieses klitzekleine, spezielle Problem.

Wir erinnern uns: Im Internet Explorer 6 werden PNG24s mit Alphakanal zwar dargestellt, allerdings leider ohne den letzteren. Die Stellen, die transparent sein sollten, werden meist grau dargestellt. Sieht ziemlich beknackt aus:

Oben: Firefox stellt Transparenzen richtig dar, unten: der Internet Explorer 6 zeigt graue Boxen

Original: VanderVaart.com

Diese Problematik kann man auf mehrere Weisen lösen, die gängisten habe ich mal hier zusammengestellt:

Lösung 1:

Per CSS.

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Das könnte dann so eingesetzt werden:

<img src="test.png" width="200" height="200" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="testbild" />

Problem dabei: die filter-Eigenschaft ist im CSS laut W3C nicht definiert, das Stylesheet validiert nicht. Im schlimmsten Falle könnte es durchaus passieren, daß ein älterer Browser das Stylesheet deswegen komplett ignoriert, auch wenn er nur mit der “filter”-Eigentschaft nichts anfangen kann.
Sollte man doch von dem Wunsch übermannt werden, diese Variante einzusetzen, wäre es durchaus ratsam, zu Conditional Comments zu greifen, da die Filter-Eigenschaft ohnehin nur vom IE interpretierbar ist.

< !--[if IE 6]>
Special instructions for IE 6 here
<! [endif]– >

Wer jetzt glaubt, damit sei nun alles paletti, hat leider nicht ganz recht. Mit diesem kleinen CSS-Schnipsel hat man dem IE 6 nun natürlich nicht durch Zauberhand beigebracht, wie man PNG24 richtig darstellt. Wäre ja auch zu schön. Stattdessen pflanzt der IE 6 nun einfach eine neue “Zwischenebene” an die Stelle, an der das PNG sitzt, wendet die filter-Eigenschaft darauf an, und lädt das entsprechende PNG hinein. Wieso um alles in der Welt das SO gelöst werden sollte, habe ich ohnehin noch nie so richtig verstanden, es ist aber so.

Lösung 2:

Der IE-PNG Fix von Thomas Wittek, welcher den ursprünglichen Fix von Angus Turnbull aufgreift.

Ist sehr infach einzubauen und lädt schnell.

Ein paar kleine Caveats sind aber auch dort zu beachten, am schmerzhaftesten für die meisten Webdesigner ist die Tatsache, daß sich PNGs, auf die der Filter angewandt wurde, bei dieser Methode nicht mehr via background-repeat pattern lassen, außerdem gibt es Beschränkungen in der Positionierung.

Lösung 3:

PNG8 anstatt PNG24.

Was viele nicht wissen: PNG8 unterstützt auch Alphatransparenz, bis zu einem gewissen Grad zumindest (binär). Während in allen halbwegs modernen Browsern das PNG mit Alphatransparenz angezeigt wird, lässt der IE 6 (und darunter) diese einfach weg. Sieht zwar auch nicht ganz optimal aus, allerdings bei weitem besser als die hässlichen graue Flächen, die bei der Nutzung von PNG24 auftreten würden.

Hier sieht man den Einsatz von PNG8 am Beispiel dieser Website. Im Firefox ist der Dropshadow sichtbar (links), der Internet Explorer 6 (rechts) lässt diesen einfach weg.

Ist in vielen Fällen meiner Meinung nach wirklich die Methode erster Wahl und sämtlichen JavaScript/CSS-Fixes vorzuziehen, allerdings hängt dies natürlich stark vom Einsatzgebiet ab. Auf für ein Layout essentielle Bestandteile zu verzichten, macht auch wieder keinen Sinn.

Vorteil: Kleine Dateigrößen, keine Hacks/Tricks

Nachteil dieser Methode: PNG8 arbeitet genau wie GIF mit palettenbasierten Farben. Es sind also keine 32Bit möglich sondern - die 8 im Namen sagt’s schon - 8 Bit.
Das führt dazu, daß die Transparenzabstufungen möglicherweise nicht so smooth sind wie bei PNG24, für die meisten Anwendungszwecke aber trotzdem ausreichend.
Bisher habe ich allerdings auch noch nicht rausgefunden, wie man in Photoshop CS3 beim Exportieren von PNG8 die Alphatransparenz einstellen kann. Ich verwende daher extra dafür Fireworks.
Sollte mich jemand bezüglich der Vorgehensweise in Photoshop erleuchten können, bitte ich dringendst um Nachricht :-)

Lösung 4:

Falsche Transparenzen.

Diese Lösung ist so simpel wie effizient:
Transparenzen vorgaukeln, wo gar keine sind.

Sehr schön eingesetzt wurde diese Technik von Cameron Moll.

Ein Blick auf das Hintergrund offenbart, daß der Dropshadow im Grafikprogramm bereits fest in das Muster des Seitenhintergrundes eingebunden wurde, was natürlich äußerst praktisch ist:

Kein großer Aufwand, keine CSS-/JavaScript-Methode nötig, kein zusätzliches Bild für den Dropshadow.
Nachteile: Geht natürlich ausschließlich bei Hintergründen, die nur nach unten pattern. Seiten mit Hintergründen, die sich sowohl nach rechts als auch nach unten wiederholen, müssen leider auf eine andere Methode zurückgreifen.

Wahooohoo! Ich hab’s geschafft!

Ich bin im Fotowettbewerb der Hochbahn Hamburg “100 Jahre Hochbahn” unter die besten 10 gekommen!

Die besagten besten 10 bekommen je eine Digitalkamera von Pentax, außerdem - und das ist saucool - wird ihr Bild auf einem der XXL-Busse als “Rollende Galerie” quer durch Hamburg tuckern. Juchu, ich freu mich! :-)

Von heute bis zum 18.07. läuft die Abstimmung für das beste Bild, welches zusätzlich noch auf ein großes Plakat gedruckt und in der Nähe des Wohn- oder Arbeitsplatzes der Gesamtsiegers präsentiert wird.

Tja, ich bin momentan “leider nur” auf Platz 2 im Ranking, sollte jetzt jemand Lust haben, für mich zu stimmen, ich würde mich freuen ;-)

Ich bin jedenfalls gespannt wie’s ausgeht, und freu mich sehr darauf, “mein” Bild demnächst auf einem Bus irgendwo in Hamburg zu entdecken.

fotocredit: ifijay

Wie könnte man den Juli besser beginnen als mit einer kleinen Auswahl der meines Erachtens nach interessantesten Artikel und Blogbeiträge des Vormonates?

In diesem Sinne:

1. Smashing Magazine: Flexible Layouts: Challenge For The Future

   Ein interessanter Artikel von YAML-Entwickler Dirk Jesse über die Notwendigkeit, flexible Layouts vermehrt einzusetzen. Ein bisschen viel Lob für YAML aber hey - er hat’s entwickelt ;-)

2. A List Apart: Sketching in Code: the Magic of Prototyping

   Eine effektive Herangehensweise, beschrieben von David Verba, das sogenannte “Wireframing” durch interaktive Prototypen zu ersetzen. Sehr empfehlenswert für jede/n Webentwickler/in.

3. WebDesignerWall: 2008 Design Trends

   Eine ausführliche Übersicht von 82 gut gestalteten Webseiten, fein säuberlich geordnet nach Stilart.

   Zusammengestellt wurde das Ganze von Nick La, welcher übrigens ebenso erfreut ist wie ich, daß der “typische Web 2.0″-Look endlich out zu sein schein. Juchu.

4. FrancescoMugnai.com: 37 FREE Must-Have Fonts

   Hier ist nicht viel zu sagen, der Titel spricht für sich: 37 schöne Freefonts.

5. NETTUTS: Hack Together a User Contributed Link Feed with WordPress Comments

   Ein Tutorial, das anschaulich beschreibt, wie man seinen Lesern mittels Wordpress die Möglichkeit gibt, eigene News zu veröffentlichen. Auch ein Feed wird praktischerweise gleich mitgeneriert.

6. noupe: Using CSS to Fix Anything: 20+ Common Bugs and Fixes:

   Eine kurze, aber anschauliche Auflistung von mehr als 20 der häufigsten CSS-Bugs, die einem schon mal den letzen Nerv kosten können, wenn man sie nicht kennt. Glücklicherweise liefert der Artikel auch gleich die passenden Lösungen dazu.

7. Pearsonified: How Much Should a Web Design Cost?

   Ok.. Ein zugegebenermaßen etwas älterer aber sehr ausführlicher Artikel über Preiskalkulation von Chris Pearson.

8. Outlaw Design Blog: Business Plan for Designers

   Was ist ein Businessplan und wofür brauche ich ihn? Was sollte drin stehen? Ein informativer Artikel von “Danny Outlaw”.

9. CSS Globe: CSS do’s and dont’s Part 2- Markup

   Alen Grakalic schreibt über die Do’s und Dont’s im Bereich CSS, diesmal schwerpunktmäßig über semantisches und valides Markup.
   Nicht zu vergessen: Teil 1.

10. Positive Space: 30 Essential PDF Documents every Designer should download

    30 PDFs, die entweder praktisch, nützlich, informativ, hochgradig interessant oder einfach unverzichtbar sind.

Bis bald :-)