A problem occured while loading the plugin: sgb_error_documents -> : Only variables should be passed by reference on line 81
2007. 08. 20. 22: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.
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.
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:
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?
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:
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).
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.
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!
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.
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;
}
teamtom © 2004-2006 || pax webiscum || tesztelve: Firefox1.5 • Opera9 • Internet Explorer6+ || motor: textpattern