Transparentni PNG, CSS in Internet Explorer

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:

PNG v IE-ju - ne deluje

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.

PNG v IE 6 deluje
Po apliciranju zgoraj opisanega CSS hacka se PNG lepo izpisuje tudi v IE-ju 6. Komentarji dobrodošli ;)

21. November 2007 by davorin
Categories: brskalniki, css | Tags: , , , , , | 6 comments

Comments (6)

  1. Priporočam ogled 2. točke tega članka za nekoliko drugačen in po mojem mnenju lepši pristop do problema.

  2. Uuu tole bo pa 100% prišlo prav. Hvala ti :)

  3. Ni panike … nekej sem še gledal in mi ni čist’ jasno, od kje se je prikradelo overflow:hidden, ker tudi brez njega hack čisto dobro deluje?! Vsaj, kolikor sem preverjal.

  4. tooo! končno ena delujoča rešitev, najlepša hvala!

  5. Si prepričan da se splača uporabiti alpha transparency v tvojem primeru. Tvoj logo izgleda da bi se dalo narediti z index transparency-jem če bi le bil pripravljen izgubiti tisto rahlo belino v ozadju loga. Morda se splača poskusiti in potem ne rabiš nobenega hacka.

    Samo v razmislek.

  6. V tem primeru je razmislek čisto validen, hack je v resnici najbolj prikladen za primere alfa transparenc, le opisani primer mogoče ni najboljši, je pa vsekakor razumljiv, mar ne?

Leave a Reply

A((Wake)) top mp3 Ambulance LTD pop Andy With Rama West music downloading blessthefall music to download Collections Of Colonies Of Bees song downloads Desired State songs Die Krupps and Front Line Assembly mp3 Engine7 mp3 music Existereo and Deeskee mp3 online Hugh Hopper albums Immaculate Machine mp3 Jake E. Lee download Kapel Maister all mp3 Koto - Ciber People - Proxyon music Malachi Constant instrumental Mortal Treason pop NWA music to download Opprobrium mp3s Ricky Van Shelton music to download Shankar and Caroline instrumental Southern Death Cult top mp3 Steve Angello ft Laid Back Luke mp3 downloads Sub 6 top mp3 Archers Of Loaf best mp3 Barney Wilen album Bulgarian Magic Voices download songs Coco Band top mp3 Custom Kings new mp3 Dj Kapulet mp3 online Enbe Orkestrasi music to download Error Corrective best mp3 Excoriate get mp3 Finisterra mp3 song Gorgeous Frankenstein top mp3 Groundation songs Heorot mp3 songs House Of Shakira new mp3 India Martinez dowland J Majik and Wickaman music downloading Joakim review Legohead mp3 search Maurice Weddingfield music to download Miriam Stockley dowland Plastikman instrumental Sarah Buxton downloads Sarcoma Inc. mp3 search Shade Empire all mp3 Shadrane mp3 music Video Kids review Wolf Tones instrumental Anorexia Nervosa get mp3 As De La Sierra downloadable music Bill Laswell, Boris Feoktistov music search Chap music download Chemlab downloadable music Chuck Norris english mp3 Deepack mp3 search Fixer music I/DEX / h.h.t.p. / -ED downloadable music Isaac Hayes download songs Jan Hammer and Jerry Goodman music downloading Jimmy Thackery mp3 John Digweed and Nick Muir downloads Kym Mazelle dowland Luciferion album Marshall Tucker Band download Omara Portuondo all mp3 Reach The Sky get mp3 Richie Santana mp3s Robbie Shakespeare download Roughcut music search Sainkho Namtchylak and Shelley Hirsch, Catherine Bott get mp3 Scott Brown and Brisk album Silverchair music to download Storyteller music search Subaudition buy mp3 Teenage Fanclub all mp3 Xiu Xiu mp3 Apples in Stereo all mp3 Barclay James Harvest dowland Beverly Knight dowland Blazing Eternity mp3 songs Clap Your Hands Say Yeah instrumental Crushing Blow instrumental Dispatch vs Horizons Music song downloads DJ Snowman music search Elodie Frege dowland Filo And Peri Vs Serge Devant song downloads Fire Town music to download Krunch download M&M Productions music Mohammad Musavi all mp3 Passi album Paulo Moura and Yamandu Costa music download Pharmacists music downloading Rasco download songs Richie Hawtin, James Ruskin best mp3 Scarlett Marshals review Silent Witness download songs Xzibit dowland