PNG-Transparenz für den IE6 ohne HTC

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.

Geschrieben von Nico Steiner in Referenzen um 22:03 | Kommentare (0) | Trackbacks (0)

Kommentare

Ansicht der Kommentare: (Linear | Verschachtelt)

Noch keine Kommentare

Kommentar schreiben

Name
E-Mail
Homepage
Antwort zu	[ Ursprung ]
Kommentar	Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert. Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss um dieses Verfahren anzuwenden. Hier die Zeichenfolge der Spamschutz-Grafik eintragen:
	Daten merken? Bei Aktualisierung dieser Kommentare benachrichtigen