_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

Alfacsatornás PNG IE6ra

Sokan még ma is azt hiszik, hogy az IE7 előtti, még elterjedt Explorerek egyáltalán nem támogatják a transzparens PNG-ket. Nos valójában támogatják, habár kicsit trükkös a dolog. A DirectX és a css szűrők adta lehetőségekkel lehetséges alfacsatornás PNG -t háttérként behelyezni elemekre, s így, képeket is. De sajnos ennek a megoldásnak is sok korlátja is van, ezeket is megnézzük egyenként.

Az alapok

Maga a kód ilyen:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='/images/alpha.png', sizingMethod='image');

Ez egy DirectX szűrő, amit lehet IE alatt a stíluslapokban használni. Két paraméterre figyeljünk:

Hátrányok

A HTML elem, amire ráhúzod ily módon az alfacsatornás képet, elérhetetlenné válik bizonyos felhasználói interakciókra. A háttér úgy viselkedik, mintha az az elem és annak összes aleleme fölé lenne lebegtetve, holott az alelemek is jól jelennek meg (tehát nem a kép alatt). Maga az elem kattintható, de az alelemei már nem, a tartalmukat nem lehet kijelölni. Igy ha kicsit is komplexebb HTML szerkezetekre akarjuk ezt használni, javaslom az alábbi megoldást.

Minden ilyen elem esetén elhelyezek plusz egy layert, utolsó gyerek elemként abban az elemben, amire a png-t tenném. Mivel az IE7 és szinte minden nem-IE böngésző már jól kezeli az alfacsatornás png-ket, feltételes kommentet használok, hogy csak a kívánt böngészőkre jelenjen meg így és ne terheljen másokat.

<!--[if lt IE 7]>
<div class="bg"></div>
<![endif]-->

Ugyanezzel a megoldással egy stíluslapot is beemelek az oldal elején ami lekezeli ezeket az eseteket. A megoldás minimális extra kódot igényel, idővel, ha az IE6 sírba vonul, problémamentesen kivehető, egyszerű és működik. Nem valid CSS megoldás, de a css amiben használom, a feltételes komment segítségével kerül be az oldalba és csak az IE6 vagy korábbi verziói látják, így emiatt se kell aggódnom.

cimkék:

Hozzászólások, trackbackek [trackback url]

  1. Levente 03:18 | 2008.07.15

    Viszont ha a nem működő alelemek kapnak egy position: relative-ot, máris működni kezdenek az esetek többségében, bár nem minden esetben. Pl. ha a szülő elem absolute pozicionált, akkor ez nem megoldás sajnos.

  2. _nec 08:14 | 2008.07.18

    Igen, itt főleg a “bár nem minden esetben” aggaszott anno, azért használom így, mert ezzel teljesen kordában lehet tartani a viselkedését.

Szólj hozzá







kategóriák


del.icio.us

  • No bookmarks avaliable.

epp olvasom

  • A Clash of Kings

    A Clash of Kings by George R.R. Martin

flickr

  • Tuomas Holopainen - the Imagineer
  • The Flock
  • Christmas Crow
  • Geek joy
  • Fast Food - extreme edition
  • Teide north side
  • Teide National Park
  • Genesis
  • Rado Cerix
  • werk - _nec
  • werk - Strati

back to index