Végigolvastam, és megemésztettem az A List Apart Prettier Accessible Forms cikkét. Nagyon szép cikk, és sokat is lehet belőle tanulni, de nem az igazi. Lényeg ami lényeg: a struktúra <fieldset> / <ol> / <label> + <input>, és a label-nek nem float-ot, hanem inline-box-ot használ. De mivel pont a Firefox nem támogatja ezt a megjelenítést, ezért JavaScript-tel alakítja át az oldalt. Ez ugye ellent mond annak az elvnek, hogy a építsd és teszteld a CSS-t a legjobb elérhető böngészőben, mielőtt a többiben tesztelnéd.

Az elsődleges kérdés: miért nem float? Azt mégiscsak egyszerűbb kezelni… A válasza egyszerű, nem megmagyarázó: ha egy bonyolultabb float-ba raksz bele ilyen float-ot, akkor nem szép IE alatt. Mit ne mondjak, nem értem. Igazán megmagyarázhatta volna, lévén senki sem igazolta vissza, hogy tényleg.

A második kérdés az, hogy miért <ol>? Persze, mert így legalább sorszámosítja a kérdéseket a felolvasó szoftver, ami szerintem egy egész jó ötlet. Itt azért felvetették a <dl>-t is, mint alternatívát, ami szemantikailag lehet, hogy jó, de én még mindig azt mondom, hogy a <label>-be kell beágyazni a beírómezőket. Amit persze ott nem lehet.

A harmadik az inline-box említésekor hozott elő belőlem rossz élményeket, ti. elég mostohán kezelik a böngészők, nem beszélve arról, hogy nem egy népszerű beállításról van szó. Nézzük csak meg, mit is takar ez a display tulajdonság:

[Az inline-box beállítása] azt eredményezi, hogy az elem egy olyan soron belüli dobozt fog alkotni, ami felsőszintű blokkdobozként viselkedik, hasonlóan a helyettesített elemekhez. Az inline-box belülről blokkdobozként, maga az elem pedig soron belüli elemként formázható.

A szép perspektívának megvan azonban az ára: IE alatt szépen működik, de csak azokra az elemekre, amik eredetileg soron belüliek (pl. <span>, <label>). Mozilla alatt meg egyáltalán nem megy… van viszont -moz-inline-box, ami majdnem ugyanolyan, mint az eredeti. A gond csak az, hogy a hosszú szövegeket nem töri meg. Ezt persze úgy védhetjük ki, hogy a <label>-be (ami display: -moz-inline-box) egy valódi blokkdobozt teszünk, és annak állítjuk be a szélességét.

Összköltség: a JQuery JavaScript lib, és az, hogy Firefoxhoz el kell indítanunk egy átalakító scriptet. Természetesen ez az a pont, ahol a puristák rögtön a torkodnak ugranak, és ha nem vigyázol, megöl a webes szakemberekből összeverődött lincstömeg.

Mindazonáltal a JQuery nagyon jó, szerintem korrektebb, mint a Prototype, bár a kicsit oldschool-nemtudjuk-miazadesign-de-weboldaltakarok kinézete elriasztja az embereket.