meusexmachina

Úgy látszik, nem akkor érkezünk el a tökéletességhez, amikor már nem lesz mit hozzátennünk, hanem akkor, amikor már nem lesz mit elhagynunk.

Hírek // blog

CSS etüdök I. - Fókuszpókusz [permalink]

2007. 08. 20. 21:22 • kategóriák: css

Ez az írás az első azok sorában, amelyekben olyan CSS-el kapcsolatos érdekes (zavarbaejtő, idegesítő) jelenségeket veszek górcső alá, amelyekkel webfejlesztés, a napi munkám során találkoztam.

A cím magyarázatául

Az etüd – a tanulmány jelentésű francia étude szóból – rövid zenei kompozíció, amely egy-egy játéktechnika bemutatására, begyakorlására készül. Bővebben itt, és itt.

Bevezetés

Egy furcsa jelenség az egyik képcsere technika kapcsán találkoztam jópár hónappal ezelőtt, amikor a Firefox verziószáma 1.0.7-ről 1.5-re frissült.

A képcsere – image replacement – technikák taglalásába itt most nem mennék bele, mert ez a téma még egy bejegyzést legalább megér. A lényegük az, hogy egy alapvetően szöveges elemet annak képi megfelelőjével cseréljük le.

Én képcserére a Phark módszert szeretem használni, mivel:

nem kíván extra elemeket a megvalósítása, vagyis tiszta marad a kód
egyszerű alkalmazni
egyetlen hátránya akkor jelentkezik, ha a böngészőben kikapcsolják a képek megjelenítését. Ebben a nem túl gyakori esetben ugyanis sem a behelyettesített háttérkép, sem az eredeti szövegelem nem látszik.

A módszer lényege, hogy a lecserélni kívánt szövegelemet akkora negatív bekezdés értékkel formázzuk, hogy a szövegtartalom mindenképpen eltűnjön a böngészőablakból.

h1 {
   text-indent: -999em;
   background: url(header-replacement-pic.jpg) no-repeat left top;
}

Ez a technika remekül működik a gyakorlatban, talán csak a IE5-nél bugos (itt a háttérként szolgáló képet is “indentálja” a szöveggel együtt), de épeszű fejlesztő ezzel a böngészővel már nem foglalkozik.

A Firefox 1.5 azonban bizonyos körülmények között egy furcsa hibajelenséget produkál. Ha egy link szöveges részét cseréljük le képi elemmel, és a linkre kattintunk, akkor a fókuszba kerülő link körül megjelenik a szokásos pontozott vonalból álló keret, de ehelyett:

ez látjuk:

vagyis a balra eltüntetett szövegünk “magával vitte” a fókusz jelölőkeretének bal szélét és ezzel megnövelte magát a jelölőkeretet is.

Mit lehet kezdeni ezzel a nem fatális, de kétségtelenül ronda, zavaró hibával?

Egy: fókuszban az outline

Adódik a gyors megoldás, a :focus pszeudo osztály felhasználásával:

:focus {
   -moz-outline-style: none;
}

ez a megoldás attól elegáns, hogy a Mozilla-specifikus szelektor miatt csak a Firefoxra hat, de:

nem lesz valid a CSS, mivel a szelektor nem szabványos
eltünteti a felhasználói élmény szempontjából fontos, megszokott keretet a fókuszált elem körül.

Próbálkozhatunk a szelektor szabványos változatával:

:focus {
   outline-style: none;
}

de a második probléma így is megmarad, igaz, csak Firefox alatt, hiszen az Internet Explorer 6 és 7 finoman szólva nem érzékeny erre beállításra (gy.k. nem ismeri ezt a property-t).

Kettő

Továbbgondolva a jelenséget, rájöhetünk, hogy a FF valószínűleg túlcsordulásként értelmezi a saját dobozából “kiebrudalt” szövegelemet. Rejtsük tehát el a túlcsordult részeket, próbálkozzunk ezzel:

:focus {
   overflow: hidden;
}

és BINGÓ! újra az elvárt, eddig megszokott viselkedést tapasztalhatjuk a fókuszált elemekkel kapcsolatban.

és mellékhatások tekintetében…

Persze a webfejlesztő élete nemcsak móka és kacagás!

Később észrevettem, hogy bizonyos oldalakon a select elemek – csak Firefox alatt – furcsán viselkednek: kétszer kell rájuk kattintani a szokásos egy helyett azért, hogy lenyílva felkínálják az opcióikat.

Eleinte értetlenül álltam a furcsa jelenség előtt, de hirtelen beugrott: a select opcióinak megjelenése rákattintáskor történik, vagyis amikor a select elemre kerül a fókusz.
Ráadásul a jelenség kizárólag Firefox alatt és kizárólag azokon a szájtokon jelentkezett, ahol már használtam a fenti módszert: megvolt a gyanusított.

:focus {
   overflow: hidden;
}
select:focus {
   overflow: visible;
}

vagyis a második definícióval állítsuk vissza az alapértelmezett viselkedést csak a select elemekre vonatkozóan az előző szabály felülbírálásával.

És lőn! Működik!

Utóhang

Hiába telt el több hónap azóta, a fent elemzett jelenség a Firefox 2.x sorozataiban is hibaként jelentkezik: a Phark módszer használatának tehát még ma is szükséges kiegészítője a fenti legutolsó kódrészlet.

Frissítés

Firefox alatt van még egy elem, amelynek problémát okoz az univerzális szelektorra alkalmazott overflow: hidden definíció.

A HTML forrásba beágyazott flash fájlok csak a második kattintásra működnek az elvárt módon helyesen, feltehetően azért, amiért a select is rendetlenkedik: az első kattintáskor a böngésző csak fókuszba helyezi az elemet.

Tehát ha flash mozit tartalmaz az oldalunk, az alábbi definícióval egészítsük ki a CSS fájlunkat:

embed:focus {
   overflow: visible;
}

« előző • következő »

az oldal tetejére

Keresés

Kategóriák

Linkajánló

Az ellenállhatatlan mosoly Az IE8-at megtanították mosolyogni? Jövő nyáron meglátjuk ;)
swf Image Replacement Vetett árnyék, lekerekített sarkok és körvonal képekre, kombinálva is. Érdemes kipróbálni!
Cascading Style Sheets Håkon Wium Lie, a CSS egyik atyjának doktori disszertációja a lapleíró nyelvekről. CSS fanoknak kötelező!
10 éves a CSS! Hihetetlen, hogy ez a technológia már 10 éves!
Txp Resources Pluginek, tippek, tudnivalók a textpatternről.