CSS: Průhlednost / Opacity

Můžete mě považovat za CSS barbara, přesto o vlastnosti opacity a vůbec o možnosti řešit průhlednost výhradně přes CSS jsem ještě před pár dny nevěděl a měl jsem nutkání průhlednost řešit bůhvíjak přes JavaScript.
Aby to ovšem nebylo tak jednoduché, vývojáři prohlížečů (resp. především Microsoft se svým /prohlížečem??/ IE) stavějí do cesty spoustu barikád týkajících se kompatibility.
Pro spolehlivou průhlednost nějakého prvku totiž nestačí pouhá vlastnost opacity.

Pro běžné, současné prohlížeče postačí skutečně pouze následující zápis:
.transparent {opacity: 0.5}
Pro starší prohlížeče založené na jádru Gecko (Netscape Navigator, Mozilla <1.7, Firefox <0.9) platí:
.transparent {-moz-opacity: 0.5}
Na starší prohlížeče založené na jádru KHTML (např. Safari <1.2) platí tento:
.transparent {-khtml-opacity: 0.5}
Microsoftímu IE 5 až 7 je potřeba dát průhlednost najevo takto:
.transparent {filter: alpha(opacity=50)}
Aby těch IE-čkových hacků nebylo málo, (resp. nebyl by to Microsoft, kdyby si tvrdohlavě nechtěl prosazovat něco speciálního) pro IE 8 platí následující šílený zápis:
.transparent {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}
Komplexní, spolehlivý zápis tedy vypadá následovně:
.transparent {
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

filter: alpha(opacity=50);
}
Nutno říci, že W3C v aktuální verzi CSS (2.1) neuznává ani jeden z těchto zápisů a validátor proto zahlásí chybu.
W3C by rádo uvedením CSS 3 sjednotilo tyto způsoby do jednoho - samozřejmě prvního - vlastnosti opacity, která rovněž od této verze bude uznána za správnou.

Zdroje:

CSS2 - opacity
opacity - MDC
CSS Transparency Settings for All Browsers