Podivný obdélník ve Firefox 1.5?
S příchodem nové verze rozšířeného prohlížeče na spolehlivém Gecko jádru – Firefox 1.5 – se objevilo několik nových nesrovnalostí s výslednými rendery některých stránek.
Nejpalčivější pro některé webové tvůrce může být nové chování jemného obdélníku, který označuje fokus vybraného aktivního prvku na stránce. Nevím, od jakého buildu je tato změna v akci, ale každopádně až od poslední finální verze je takto nepříjemná. Rozšiřuje box s fokusem mimo vlastní efektivní rozměr boxu, který element generuje, tak, aby obsáhl i záporné odsazení textu. Takto samostatně to může znít naprosto korektně a logicky, ale ve většině případů to nebude námi kýžený cíl a označený region by měl být pouze ve velikosti rozměru onoho boxu. Proč?
Velké hodnoty záporného odsazení textu v boxu se používá
k posunutí textu mimo viditelnou oblast, ať už pro potřeby
image replacementu či některých aktivních prvků, neboť
prosté display: none; může způsobit ignorování těchto
textů čtečkami (hlasové čtečky nejsou aurálním médiem, ale pouze
interpretem obrazovkového média).
Proto při aktivaci např. odkazu v takovém elementu dojde k objevení se tohoto zvýraznění, které se může táhnout velice nevzhledně mimo mantinely vlastního bloku přes celou šířku stránky až do obsažení oněch negativních hodnot daleko za hranicemi viewportu prohlížeče.
Názornou ukázkou budiž na této stránce logo Alphanumeric v kontextovém bloku po pravé straně, viz screenshot (PNG, 52kB).
Co s tím? Inu, možností je několik…
- Nejlepší je podle všeho explicitní nastavení
overflow: hidden; - Jako jedna z možností je kombinace
line-height: 0; font-size: 0; - Máme také k dispozici od FF 1.5
outline: 0;, které ale zhoršuje použitelnost celého odkazu
Středa, 21. 12. 2005 9.13 | Trvalý odkaz | Trackback
[1] Yuhů
Nebyl by prosím screenshot? Mám FF 1.0 a nechce se mi ji kvůli tomu povyšovat.
Pokud jsem to dobře pochopil, tak overflow:hidden je asi opravdu nejlepší. Ještě bych zkusil popřemýšlet o outline-color. Třeba by šla udělat taková barva, která nebude na pozadí vidět, ale na tlačítku ano.
Asi by se také dalo vynulovat outline a pohrát si s preudotřídou :focus.
Když už je řeč o použitelnosti – docela se divím, že ve FF na těchto stránkách nevidím ve formuláři kurzor (nebliká a nevím, kam píšu). Jinde se mi to nestává.
21. 12. 2005 13.53
[2] Ikrk
ad kurzor: to by mě taky zajímalo, mě to dělá taky (mám FF 1.5). Sám s tím mám probl na svých stránkách a nevím, jak se toho zbavit. Osobně mám ale pocit, že to nějak souvisí s fixníma prvkama na stránce. Je to hodně divný, ale ten kurzor mi nefunguje jen v horní a dolní části obrazovky, uprostřed je v pohodě…
21. 12. 2005 14.16
[3] Bohumír Bednařík (BoboCop)
Trošku OT – Řekl bych, že ten kurzor zmizí vždy, když je „zasunut“ na úroveň toho obrázku na pozadí (to pravítko nebo co to je). Když je pod ním, tak je bez problémů vidět (alespoň se mi to tak jeví v mém FF 1.5).
21. 12. 2005 15.57
[4] Jan Brašna
Screenshot jsem přidal, nějak jsem na něj pozapomněl.
Kurzor je dlouhodobá chyba Gecka – bohužel s ní už téměr rok co ji sleduji nikdo nic nedělá, stejně je potřeba upravit layout, tak to vyeliminuji.
21. 12. 2005 18.34
[5] Daniel Srb ben Abraham
Hm, overflow:hidden a FF1.5 bych radši neviděl. Zkuste si to ve spojení s position:absolute, přestane fungovat z-index… to je skoro lepší než IE.
Samozřejmě se to projevilo hned v aktuálně vyráběném (téměř hotovém) webu. Jediné plus je bugzilla, našel jsem ten bug, včetně informace o tom, že bez oveflow:hidden se to neděje. To mi ušetřilo alespoň nějaký čas a naštěstí to šlo upravit aby tato vlastnost nebyla třeba.
Omluvte pokud je to zmatený, ale bolí mě zub a sem trošku pod práškama. : F
21. 12. 2005 22.22
[6] Jan Brašna
[5] Upřímně, ono 1.5 přineslo hodně nových problémů, kombinace floatů a záporných marginů dělá taky zajímavé efekty… Užívej prášků :)
21. 12. 2005 23.07
[7] Daniel Srb ben Abraham
Doufám, že ten slavnej aktualizovač i se slavnou mozilla foundation nám dovolí v nejbližší době na tuhle hloupou chybu zapomenout.
Začínám mít rád „nevinný“ IE bugy typu double-margin, sice to vypadá jinak, ale většinou se to kvůli tomu nestane nepoužitelým. z-index je poněkud jiný kafe…
22. 12. 2005 8.07
[8] Ticonderoga
Jen tak mimochodem, ten „podivný obdélník“ se zobrazuje stejně i v Caminu 1.0b1 na Macu. Ale to je vlastně takovej Macovej FireFox :)
8. 1. 2006 0.36
[9] SuE
teď objevili ameriku i jinde – ale mají na to jiné řešení : http://sonspring.com/…dotted-links
13. 1. 2006 10.24
[10] Jan Brašna
[9] Díky za link. Čekal jsem nějaké vychytávky, ale v podstatě to jsou jen variace už dříve známých řešení a třeba mně osobně se nelíbí, protože se snaží outline zcela odstranit, což moc nepomáhá kvalitě webu.
13. 1. 2006 10.43