meusexmachina

Hírek // blog

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

2008. 12. 31. 14:39 • kategóriák: css

Néhány nappal ezelőtt az eredeti cikkben megírt praktika egy újabb mellékhatásával szembesültem.

A Firefox 3 a fókuszba kerülő select elem bármely overflow értékére a hibás viselkedéssel válaszol: csak a második kattintásra nyílik le.

1. példafájl: a probléma

Rájöttem, hogy a látszólag a kényelmet szolgáló

:focus {
   overflow: hidden;
}

Phark-javító extradefiníció túl általános. Sőt, ez esetben kifejezetten kártékony, hogy olyan elemek is megkapják, amelyek csak Firefox esetében ugyan, de rosszul reagálnak rá.

A “globális definíció lokális felülbírálással” elv itt egészen egyszerűen nem működik jól.

Megoldás 1.

Elhagyjuk az általános definíciót, és minden egyes elemnél, ahol a Phark-képcserét alkalmaztuk, hozzáadjuk a javítást is, így:

[[CONTEXT]] a {
   ...
   text-indent: -999em;
}

[[CONTEXT]] a:focus {
   overflow: hidden;
}

Ennek a megoldásnak a használata persze csak fokozott éberséggel javasolható: ha bízunk magunkban, vagy van időnk a tesztelésre, ez is jól működik!

2. példafájl: megoldás 1.

Megoldás 2.

Pofonegyszerű: mivel eredetileg háttérképpel “ékesített” linkek “ronda” viselkedését próbáltuk meggyógyítani, próbáljuk a gyógyírt – egyetlen betű hozzáadásával! – célzottan bevetni:

a:focus {
   overflow: hidden;
}

és készen is vagyunk! bár a megoldás általánosnak tetszhet, de a sima linkek fókuszba kerülése esetén nem tapasztalunk mellékhatást.

3. példafájl: megoldás 2.

« előző • következő »

---

az oldal tetejére

Keresés

---

Kategóriák

• css
• fejlesztés
• szájt

• Dániel
• Flóra
• reflexió
• visszanéz

---

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.

---