PNG je odličen format in normalni brskalniki (Mozilla Firefox, Opera, Flock) ga z lahkoto prikazujejo, vključno s transparencami, ki so mogoče celo najboljša stvar, ki se je zgodila spletnim grafičnim formatom.
Problematičen je "le" Internet Explorer 6, nezasluženo najbolje uporabljen brskalnik na "modri kugli" (po W3Counterju ima kar 43,33 % delež, po TheCounterju pa grozljivi 50 % delež), ki transparence zaradi (večini spletnih razvijalcev) neznanega razloga* ne prikazuje kot je potrebno.
In ker sem danes ponovno našel "transparency hack", ki zagotovo deluje, ga delim z vami (prvič sem ga uporabil na Hudih bejbah).
Za uspešen izris PNG-ja v IE-ju potrebujete:
- poljubno PNG sliko (lahko je tudi transparentna), paziti morate le, da je PNG slika široka toliko kot element v katerem ga boste prikazovali (
<div>, <h1>, ponavljanja po X oz Y osi hack v IE 6 ne podpira (na žalost)),
- ščepec CSS kode,
- dve žlici Vegete ...
... in vaš PNG bo deloval kot se šika. Tudi v IE6. Zagotovo.
Primer
Na strani, ki jo pravkar berete imamo <h1> kot transparenten PNG, ki pa v IE6 do danes ni deloval:
Pobrskal sem po starih CSS dokumentih in v nekaj minutah apliciral "hack", ki omogoči transparenco v I-fuckin'-E-ju 6, koda pa se glasi:
h1 {
background: transparent url(img/h1.png) no-repeat 0 0 !important;
filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(src='http://www.em3r10.com/sites/all/themes/em3r10-rc3/img/h1.png',sizingMethod='crop');
margin: 0;
padding-left: 70px;
height: 136px;
text-indent: -9999px;
display: block;
overflow: hidden;
background: none;
}
Da vam bo hack deloval, pazite na naslednje haklce: prvi background je za normalne brskalnike, ki PNG znajo prikazati, tisti !important na koncu vrstice je nujen, da ga bodo taisti brskalniki prikazali, ker imamo v zadnji vrstici background: none, ki je tam samo zaradi klinčevega IE6, vendar bodo normalni brskalniki zaradi !important za tapravo vzeli prvo vrstico.
V drugi vrstici je neka čudna kobasa (v zgornji kodi je vrstica cela) filter:progid:DXimageTransform..., ki jo noben razvijalec pri zdravi pameti ne bi metal v svoj CSS (CSS ne bo več validen, če dodate to vrstico kode), ampak če bo IE6 prikazoval transparentne PNG-je se splača (lahko uporabite t.i. conditional commenting in za brskalnike starejše od IE6 uporabite posebno CSS datoteko).
Potrebno je dodati, da naj bo pot do PNG-ja v drugi vrstici absolutna, ker drugače hack ne bo deloval. To je to, žlico Vegete posujte po tipkovnici, če vam stvar ne bo delovala, a je verjetnost za to precej nizka.
Po apliciranju zgoraj opisanega CSS hacka se PNG lepo izpisuje tudi v IE-ju 6. Komentarji dobrodošli ;)
