| poslední úprava: 23.9.2006 15:54
Portál AbcLinuxu, 5. května 2025 02:34
23.9.2006 13:40
| Přečteno: 5193×
| Ze života
|
| poslední úprava: 23.9.2006 15:54
Že jsou webové prohlížeče, podobně jako všechny ostatní programy, plné nejrůznějších chyb, je věc zcela normální. Existuje ovšem jedna chyba ve zpracování CSS, kterou obsahují dlouho obsahovaly všechny nejrozšířenější prohlížeče kromě Opery.
Je známou realitou, že webové prohlížeče nezobrazují obsah tak, jak by si člověk přál. Dokonce ani tak, jak předepisují standardy a doporučení. Většinou je to ovšem systematická záležitost, takže se dá relativně snadno řešit. Navíc je daná chyba typická pro jeden konkrétní browser, jen výjimečně jich postihuje víc. Existuje však jedna poměrně stupidní chyba, se kterou se setkáme u celé řady prohlížečů. A co hůř, ona se projevuje jen někdy.
Představme si následující HTML soubor (DOCTYPE nyní vynechávám, ale dělá to se všemi, od HTML 4.01 Transitional až po XHTML 1.1):
<html> <head> <link href="style.css" rel="StyleSheet" type="text/css"> </head> <body> <div> ... </div> <p id="nefunguje">nefunguje</p> </body> </html>
Místo tří teček může být v podstatě cokoliv, například strukturovaný text, nejlépe s obrázky. Dokument vypadá vcelku normálně, a také normální je. Šťávu dostane až s přidáním CSS souboru (style.css):
#nefunguje {
position: absolute;
left: 20px;
bottom: 20px;
}
Co na tom je, že? Jenže chyba lávky. Když si tento dokument, ať už bude onen "třítečkový" obsah jakýkoli, zobrazíte v Opeře (verze 8 nebo 9, za starší neručím), bude to vypadat přesně podle očekávání. Nápis "nefunguje" bude v levém dolním rohu, 20 pixelů zleva a zespoda od hranice obsahujícího bloku, tedy elementu body. Zde žádné překvapení, všechno funguje, jak má.
Mnohem zábavnější to ale bude, když použijete nějaký jiný prohlížeč. Týká se to MSIE všech verzí, Mozilly a Firefoxu (zřejmě všech verzí starších verzí; ty nejnovější jsou již opraveny) a Konqueroru (dtto). Výsledek bude nedeterministický. Někdy se to vykreslí správně, jindy zůstane nápis "nefunguje" trčet sice vlevo, ale někde mezi dolním koncem obrazovky a koncem stránky.
Následné chování se bude navíc lišit. Když se u MSIE na text najede kurzorem, skočí na správnou pozici, kdežto u zbývajících browserů tam zůstane trčet. Pravděpodobnost chybného chování je závislá na délce vloženého textu - čím delší, tím pravděpodobněji chyba nastane. Pokud jsou v textu obrázky, je výskyt chyby mnohem častější (s holým textem k tomu dojde opravdu jen zřídka). Vypadá to, že se pro umístění elementu použijí rozměry obsahujícího bloku, zjištěné v nějakém okamžiku - tyto rozměry se později změní, pozice už se ale neaktualizuje (resp. u MSIE se aktualizuje při najetí kurzorem).
Otázka je, co s tím. Řešení lze rozdělit do tří skupin:
Takže jen čistě pro informaci - tato chyba tam prostě je, musí se s ní počítat, a já ji jdu ohlásit používat verze, ve kterých již chyba není. Vymalováno.
UPDATE: Pro Gecko to bylo hlášeno již v roce 2003 (bug 196937). Řešení dosud žádné. Jsem tedy velice skeptický.
UPDATE: Také pro KHTML to bylo ohlášeno, a to již v roce 2002. Něco se na tom řešilo, ale zůstává to tam stále. Zkusím provést nějaké experimenty a přihodit jim to tam.
UPDATE: Podle čerstvých zjištění byla chyba opravena jak v KHTML, tak v Gecku. Doporučuji tedy aktualizaci na nejnovější verze.
Tiskni
Sdílej:
body, který může být menší? Já bych si tipnul spíš druhou variantu (což by znamenalo, že špatně to má naopak Opera), ale raději se ještě podívám.
23.9.2006 14:02
Luk | skóre: 47
| blog: Kacířské myšlenky
| Kutná Hora
body, a podle něj by se to mělo vykreslit. Což se děje v Opeře, ne však v jiných prohlížečích. A děje se to jen někdy, pravděpodobně tehdy, když se daný element umísťuje dřív, než skončil rendering obsahu nad ním.
To právě není tak jisté. Ve specifikaci CSS Level 2 se totiž říká
The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example).
přičemž termín positioned element je definován (9.3.2) takto:
An element is said to be positioned if its 'position' property has a value other than 'static'.
Interpretace vašeho HTML+CSS tedy závisí na tom, zda je element body v tomto případě positioned, tj. jaká je hodnota jeho atributu position. Protože jste ji nespecifikoval, necháváte to na defaultním stylu prohlížeče (ve specifikaci jsem nenašel, že by bylo určeno, jaká má být). Můžete si vyzkoušet, že pokud do stylu přidáte elementu body např. 'position: absolute', bude se odstavec pozicovat skutečně vůči němu (což při neuvedení height a obsahu skládajícím se ze tří teček bude pravděpodobně znamenat nápis nefunguje mimo obrazovku.
Můj závěr je tedy takový, že nejspíš je korektní chování jak Firefoxu, tak Opery a že rozdíl je dán jiným defaultním stylem. Pokud chcete, aby se to chovalo jedním ze zmíněných dvou způsobů, definujte hodnotu atributu position pro element body.
23.9.2006 14:28
Luk | skóre: 47
| blog: Kacířské myšlenky
| Kutná Hora
div), který má position: relative (čímž se stane obsahujícím blokem), chová se to naprosto stejně. Proto bych to na toto nesváděl.
div (Firefox 2.0 beta 2).
23.9.2006 15:47
Luk | skóre: 47
| blog: Kacířské myšlenky
| Kutná Hora
23.9.2006 14:04
Luk | skóre: 47
| blog: Kacířské myšlenky
| Kutná Hora
23.9.2006 23:00
Daniel Kvasnička ml. | skóre: 52
| blog: The Joys and Sorrows of Being an IT Freak
| Ostrava
23.9.2006 23:03
Luk | skóre: 47
| blog: Kacířské myšlenky
| Kutná Hora
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.
23.9.2006 13:56
23.9.2006 19:27