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:

• src
  ami a kép elérése, az oldal gyökeréhez relatívan ( a stíluslapoktól eltérően, ahol a relatív címzés a css állomány útvonalához képest értendő)
• sizingMethod
  ennek három beállítása van: image, scale és crop.
  Ha image-re állítod, a png azzal a méretekkel jelenik meg ami a kép valós mérete, függetlenül az őt tartó elem méreteitől.
  A scale mód kinyújtja a képet az őt tartó elem méreteinek megfeleően. Ez ideális egy tengely mentén nyújtott háttereknél, amikor más esetben egy tengely mentén ismétlődő hátterünk lenne – ennél a megoldásnál sajnos nincs ismétlődés, tehát így kell tervezni vele.
  Crop mód esetén levágja a kép kilógó részleteit ha kissebb, és eredeti méretben mutatja, ha nagyobb a hordozó elem. Ez közelíti meg leginkább a background-image viselkedését.

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.

És igazuk van. A felhasználók tömeges frissítése nehezen fog az ő oldalukról indulni, az oldalak, webalkalmazások fejlesztőinek is lehet lépéseket tenni ebbe az irányba. Ha valami elavult, indokold meg miért nem támogatod, ne csak a felhasználóknak, de az ügyfélnek, a főnöködnek és a pénzügyesnek is.
Egyszerű a dolog: mert egyáltalán nem, vagy többletmunka árán tudja ugyanazt a felhasználói élményt nyújtani. A többletmunka pénz, és a hatékonyságot rontja más munka kárára.

Frissíteni megéri a felhasználónak is, el lehet neki mondani, hogy ettől csak jobb lesz neki, az ő érteke is.

Addig is ott a graceful degradation elv, ami annyit tesz, hogy minél régebbi, vagy képességeiben gyengébb a böngésző, annál több felhasználói élményszintű szolgáltatás tűnik el az oldalról, meghagyva két alapvető pontot:

• az adatok megjelenjenek,
• navigálható legyen az oldal.

PNG helyett egy csúnyább gif, flash helyett alternatív tartalom, ajax helyett aloldalak, apróságok.

Ahelyett, hogy kiírod: márpedig ez csak firefox alatt fog futni, inkább csak közöld, hogy a böngésződ nem nyújtja mindazt a szolgáltatást ami igazából ehhez a sitehoz kéne, frissíts. Tedd kíváncsivá a látogatót.

Amíg ezeket a lépéseket nem kezdjük el mi, fejlesztők, addig egy szavunk se lehet arra, hogy sokan használják még az Explorer 6-ost.

A “Gray” és “grey” szavak a fekete és a fehér közötti színárnyalatot jelentik.

Az Internet Explorer szerint a “grey” nem szín. A “gray” az.