PNG-Transparenz für den IE6 ohne HTC
Ich nehme eine aktuelle Zusammenstellung von Performance-Problemen des IE6 im Zusammenspiel mit der HTC-Technologie zum Anlass, eine Alternative für PNG-Transparenz im IE6 ohne den Einsatz von HTC vorzustellen. Grund für die Entwicklung war die Konfrontation mit einigen der im Artikel genannten Probleme bei der Umsetzung eines unserer letzten Projekte.
Abgesehen vom Erzeugen des Namespace UNOUNO.ie kann diese Lösung nativ ohne zusätzliches JavaScript eingesetzt werden. Wie bei der ursprünglichen HTC-Lösung werden lediglich Elemente mit der Klasse alphapng mit PNG-Transparenz versehen. Der Code muss am Ende der Seite vor dem schließenden body-Tag eingebunden werden. Weiterhin sollte im Stylesheet über einen Conditional-Comment oder über den * html Selektor die Regel .alphapng a { z-index: 999; } angegeben werden, um die Funktion von Links sicherzustellen.
// init ie Namespace
UNOUNO.namespace('ie');
// place path to blank 1x1 pixel here
UNOUNO.ie.getPixel = function() {
// Pfad zu einem 1x1-Pixel transparenten Gif
return '/modules/frontend-elements/img/pnghack/transparent.gif';
};
// sets proprietary filter for alpha transparenz
UNOUNO.ie.setFilter = function(src) {
return 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="' + src + '")';
};
UNOUNO.ie.fixPng = function(element, width, height) {
// fix "normal" Images and Inputs
if (/IMG|INPUT/.test(element.nodeName)) {
if (element.src) {
if (/.*\.png([?].*)?$/i.test(element.src)) { // make sure it is png image
var source = element.src;
element.style.filter = UNOUNO.ie.setFilter(source);
element.src = UNOUNO.ie.getPixel();
if (width) {
element.style.width = width + 'px';
}
if (height) {
element.style.height = height + 'px';
}
var position = element.currentStyle.position;
if (position != 'absolute' && position != 'relative') {
// this may cause layout bugs
element.style.position = 'relative';
}
}
}
}
// fix elements with png as background
var bgSrc = element.currentStyle.backgroundImage || element.style.backgroundImage;
if ((bgSrc + element.src).indexOf(UNOUNO.ie.getPixel()) == -1) {
var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+[^\)]*$/i);
if (bgPNG) {
var source = bgPNG[1];
element.style.backgroundImage = 'url("' + UNOUNO.ie.getPixel() + '")';
element.style.filter = UNOUNO.ie.setFilter(source);
}
}
};
UNOUNO.ie.getElementsByClassName = function(clsName) {
var retVal = new Array();
var elements = document.getElementsByTagName("*");
for (var i = 0;i < elements.length;i++){
if (elements[i].className.indexOf(" ") >= 0){
var classes = elements[i].className.split(" ");
for (var j = 0;j < classes.length;j++){
if (classes[j] == clsName)
retVal.push(elements[i]);
}
}
else if (elements[i].className == clsName) {
retVal.push(elements[i]);
}
}
return retVal;
}
UNOUNO.ie.initFixPng = function(element) {
var pngElements = UNOUNO.ie.getElementsByClassName('alphapng');
for (var i = 0; i < pngElements.length; i++) {
UNOUNO.ie.fixPng(pngElements[i]);
}
};
UNOUNO.ie.initFixPng();
Es gibt für diese Lösung Einschränkungen. So werden keine sich wiederholenden (gekachelten) oder in irgend einer Weise positionierten Hintergrundbilder berücksichtig. Die neuste Version des TwinHelix IE PNG Fix verspricht dafür zwar eine Lösung, allerdings verrät ein Blick in den (im Alpha-Stadium befindlichen) Quellcode, das da jede Menge Voodoo passiert, dessen Konsequenzen sich für komplexe Layout-Szenarien, mal ganz abgesehen von den geschilderten Problemen mit HTC, nur sehr schwer abschätzen lassen.
