PNG cu transparenta in IE5+ si FF

Pentru cine a folosit GIF-uri si stie cat de pacatoasa e transparenta lor pe la margini, PNG-ul, cu nivelele lui de transparenta atat de dragalashe, e mana cereasca. Numai ca IE (inclusiv v.7) (ca de obicei) e atat de inapoiat incat nu poate afisa zonele transparente din PNG-uri ca transparente, ci ca un background gri, suparator. Daca chiar vrei sa obtii PNG cu transparenta in IE, trebuie musai sa bagi un filtru (filtrul = o alta inventie abominabila M$) dedicat trebii asteia, filtru care nu face decat sa afiseze, ca background, imaginea PNG setata, dupa exemplul:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);

Solutia cea mai folosita de catre trupetzi in general e sa implementezi un javascript care, odata incarcata pagina, sa “caute” prin toata structura HTML dupa imagini de tip PNG si sa le inlocuiasca, cu un replace global, cu holdere in care sa introduca filtrul respectiv, preluand, evident, de la imaginile originale toti parametrii necesari afisarii corecte (latime, inaltime, url imagine). Cum solutia asta este una care tine de javascript, si cum presupune operatii asupra structurii documentului, o las aici, si continui cu ce ma intereseaza pe mine aici: aspectul CSS al problemei.

De ce CSS? Poi e cam simplu… pentru ca de multe ori ai nevoie sa folosesti acel PNG in CSS, ca background-image… caz in care solutia de mai sus devine complet ineficienta.

Pentru cine nu a cetit inca articolul !important; , recomand inainte de a continua, lectura lui.

In mod normal, in CSS, definim o imagine ca background in felul urmator:

.style {
background-image: url(img/png-file.png);
}

, treabã care merge bine in FF dar nu merge deloc in IE.
In IE in schimb, dupa cum ziceam, poti face asa:

.style {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);
}

Dupa cum vezi, rezulta doua proprietati diferite, care incearca sa obtina acelasi lucru. Daca ai cetit deja articolul recomandat mai sus, atunci o sa intelegi de ce solutia la problema noastra e sa aplicam un dublu !important; , in felul urmator:

.style {

background-image: url(img/png-file.png) !important;

background-image: none;

filter: none !important;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);

}

In felul asta, FF o sa “vada” un background si zero filtre, iar IE o sa “vada” zero background si un filtru. Problema rezolvata. Atat pentru azi…