Egy ideje ráérős időmben azon vagyok, hogy létrehozzak egy alapot képező form.css-t, ami a tökéletes nullázását adná a form elemeknek. A pixel pontosság persze, szinte elérhetetlen, ha figyelembe vesszük az ie, ff, opera input mezőinek erősen eltérő megjelenítését, és a teljesen értelmetlenül eltérő alapértelmezett formázásait minden egyes böngészőnek.

Nándi kollégámat sikerült meghatnom elvetemült szándékommal, és végül egy közös megoldást kísérleteztünk ki, eme nemes feladat ellátására, “pure css” alapokon. Ez még csak egy radio buttonra és checkboxra használható megoldást hozott, amit egyenlőre ie-5-6-7, ff 1.5-2, opera 9-en kívűl máshol nem sikerült tesztelnünk, de ezeken már kielégítő megoldást jelent.

A trükk lényege, hogy a LABEL tagot használjuk fel egy image-replace megoldással karöltve, és kicsit trükkös a transparens gif az új megjelenéshez.

Az alábbi html kódban jól látható, hogy a LABEL tagunkba helyezzük a hozzátartozó INPUT-ot, és egy a kép-kitakarós megoldást (FIR) lehetővé tevő SPAN tagot.

A fenti kódból jól kitűnik, egy FIR-es megoldással a LABEL-ben, a checkbox főlé feszítünk egy gif-et. Minthogy mindenki kicsit eltérően jeleníti meg a checkboxot, mindenki kicsit más árnyék-effektekkel, és más pipával, ezért úgy határoztunk, a pipát kivéve kitakarjuk a többit. Ha a transzparens gifet megvizsgáljuk, jól látható, hogy a cél érdekében többször is csaltunk
checkbox.gif
checkbox21.gif

Az egyik ilyen, hogy a kép közvetlen közepe az, ami áttetsző, mivel a checkbox teljes keretét megpróbáljuk elfedni. A pipa közvetlen környezetét is ki-ki takarjuk még, ez a gif-en a középtájékon elhelyezkedő fehér rész, mivel előfordult olyan böngésző, ami a takarás ellenére, a chechkbox default keretét helyenként megjelenítette még a takarás ellenére is.

No de, a legérdekesebb részek egyike, hogy miért is csempésztük bele a LABEL tagba magát az INPUTot. Sokat vitatható kérdés, vajon hogy lenne tisztább egy input-label használata. Sokakkal beszéltem, akik a dizájnolhatóság kedvéért előszeretettel rakják a LABELbe az inputot magát, én helyzetfüggően szoktam ezt alkalmazni.

A jelen eset hatalmazott fel rá, hogy most is így járjunk el. Ennek leginkább az volt az oka, hogy míg a MOZILLÁk hajlandóak egy teljes mértékben letakart INPUT-nak is átadni a klikk eseményt (szűlő-gyermek viszony következtében), addig ezt az MS szépséges kék E betűje nem hajlandó eljátszani. Így a LABEL FOR van olyan kedves és IE bácsinak is elmondja, hogy “hékás, ide klikkeltek no…..”

demonstráció

Igaz, már magyarul is született egy egész remek leírás a témáról, Tornado-nak köszönhetően a Cloneshit-en, azért mégis lenne egy-két kiegészítendő része a dolognak, és egyből kibővíteném egyéb lehetőségekkel, pl a felhasznált textúrával kapcsolatban, vagy annak tologatása kapcsán. A bejegyzés írása közben leltem meg a Szöveges menü képessé alakítása lépésről lépésre című remek leírást, ennek ellenére kifejtem a dolgot

Az image replace egyben SEO barát, másrészt ha a gombok állapotait és eleve a gombokat magukat egy képre helyezzük, jelentősen csökkenthetjük a fileok számát, és preloadra se nagyon lesz szükség

Az alábbi példában a lehető legjobb megoldást fogom tálalni, egy footer esetére levetítve

FIR - FARHNER IMAGE REPLACEMENT

Ezt egy viszonylag egyszerű, egy, valamint több <a> és <span> tagból álló eltérő gomb szélességű menün mutatom be. Nézzük a html kódot:

A CSS kód részleteiben:

A footert tartalmazó doboz:

A footer <a> elemének definiálása (kötelező tulajdonságok: position, display:block, height, overflow)

Majd az <a> elemek méretét, szélességét egyenként megadjuk (hiszen a kép alapú gombok esetén, eltérő gomb szélesség van) - Ha absolute
helyezzük el az <a> tagokat is, akkor érdemes ebben a sorban megadni az elemek top, és left értékeit is!

A FIR lényege, hogy az <a> elemben hagyunk egy üres <span></span> elemet, ez lesz a kitakaró elem. Fontos, hogy a legfelső absolute pozíciónált elemet rendereli legfelülre a böngésző, ezért ezzel a spannal, 100% magasság és szélességet kell felvennünk, hogy teljes mértékben lefedje az <a> elemünk text szövegét. Mivel abszolut pozíciónáltuk, ezért érdemes megadni a span bal-felső koordinátáit a top:0px; és a left:0px; -el. Végül az egy soros background-dal az összes gombunk takaró spanjának megadjuk a kívánt, egy háttérrel megoldott menüképünket.

Végül minden egyes spannak - direkt célzással - felvesszük a háttérképén a megfelelő pozíciót. Elöször definiáljuk az alap állapotát, majd a hover-t. Mivel a gombok alap és rollOver állapotát érdemes egymás alatt elhelyezni, ezért a két background állapot között a jobb oldali értékkel, a fentről -24px-ellel lejjebb változik.

A metódus maga, csak elsőre tünik olyan bonyolultnak, ráadásul utolagosan akár egy img taget, könnyen kiszedhető egy gomb a html-ünkből, vagy szimplán css-ből az li idjén keresztül display:none-al eltüntethető.

és a számunkra legfontosabb részletek, maguk a BUGOK:

És igen, mint minden css alapú dolognál itt is vannak böngésző eltérésekből fakadó hiányosságok, hibák, bugok, stb.

1. Az egyik ilyen, egy ie5 és ie6nál felmerülő eset, hogyha a css elején nem definiáltunk eltérő text-decoration állapotot az ‘a’ és ‘a:hover’-nek, akkor az ie hajlamos elfelejteni az első hover megjelenítése után az egér elmozgatása esetén az alap állapotra vissza húzni a gomb textúráját.
2. A másik, hogy GoogleToolbar, Yahoo toolbar, és Ie devtools használata esetén villódzni szeret szerencsétlen imagereplace, ami megint csak nem túl szerencsés.
3. Végül, hogy pl ie, ff, opera előfordul, hogy eltérően számítják egy háttértextúra 0px-es értékét, és egy 1 pixeles eltérés figyelhető meg, de ezzel is viszonylag ritkán bukik le a shitbuilder - gyakran megoldás lehet rá, hogy 0px helyett a top vagy elf tértéket adjuk meg, illetve, hogy 1px-t állítunk be, így már mindannyian ugyanazt a pontot fogják megjelölni.

Természetesen egyéb képcserélős css metódusok is akadnak, részletesebben az alábbi linkeken találsz felvilágosítást, illetve néhány egyéb technika is bemutatkozik, hogy egyes szitúációkat, hogyan lehet elkerülni…

alternate fir
revised-image-replacement
image_replacement

Elsőre ennyi jutott eszembe a téma kapcsán, remélem segítségedre voltam

Előre!!!