prezentace

Transkript

prezentace

Chyby v zobrazování www stránek
Josef Chludil, Martin Boroš
O čem si neřekneme
y Technické chyby IE jako programu (nečekané pády aplikace,...)
y Bezpečnostní chyby….
y Špatné ovladání (především předchozí verze)…
y Absence systému doplňků
y Podpora standardů – CSS3 a podobně ….
y Atd…..
Obsah y Řekneme si především o chybách v zobrazování CSS a (X)HTML v IE y Zaměříme se na aktuálně nejvíc používané verze: IE6, IE7, IE8
Módy vykreslování IE
y IE5 – 1 mód – nestandardní zobrazení –tzv. quirk
y
y
y
y
y
y
mode
Od IE6 2 módy – quirk mode a standardní mód
Přepíná mód podle <!DOCTYPE>
Quirk mode se občas nazývá Režim kompatibility
Opera přepíná podobně jako IE
IE8 přidává další režim – vylepšený standardní mód IE7 – podpora standardů CSS2.1 atd...
IE8 pak v tomto módu projde ACID2 testem
Standardní mód
y Blokový mode vykreslování podle W3C
y Internet Explorer 6 a 7 (se striktním doctype) a Opera (se striktním doctype). y <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01">
y <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐
strict.dtd"> Nestandardní QUIRK mód
y Režim zpětné kompatibility
y <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Transitional//EN">
<html>...
y nebo bez doctype:
y !!!V IE6 se přepnou do Quirk módu přepnou i dokumenty obsahující striktní doctype – pokud není doctype na první řádce!!!
y Nepříjemná chyba
IE8 standard mode
y Nejlepší podpora standardu v IE
y Přepínání pomocí meta tagu nebo HTTP hlavičky s názvem y
y
y
y
X‐UA‐Compatible
Nabývá hodnot odpovídající verzi prohlížeče nebo speciální hodnoty IE=edge (značící automaticky nejnovější mód prohlížeče) nebo IE=EmulateIE7 (zajistí zapínání quirks nebo standardního módu přesně, jak to činil IE7).
Nebezpečí do budoucna – zakonzervování chyb
Compatibility View – přepínání pro uživatele
IE8 v tomto módu projde ACID2 testem
IE8 Nástroj pro vývojáře
y Nový nástroj ve kterém mohou kodéři kontrolovat kód
y Nabízí možnost přepínání zobrazovacích módů
y Problémy s modem Standard IE8 i velké weby např.: Facebook, Myspace nebo CNN.com
y Pro uživatele je možnost Compatibility View
y Přepne se do IE7 Standard
IE8 Nástroj pro vývojáře
Rozdíly Standard a Quirk
Nejdůležitější
y jinak počítají šířku a výšku (boxmodel)
y jinak zobrazují velikost písma (quirk mód má písmo o stupeň větší)
y quirk mód dovoluje nastavovat rozměry řádkovým prvkům IE nezobrazuje XHTML
y Všechny verze
y IE neumí/nepodporuje zobrazeni XHTML se správným MINE
y Zobrazí jen tehdy je‐li jako MINE uvedeno text/html
y Příklad: http://ondrej.jikos.cz/vyuka/swi117/
BOX MODEL
y Historie box modelu: http://www.webylon.info/K.10
y Zdroj: http://www.jakpsatweb.cz
Standardní zobrazení
y
Zdroj: http://www.jakpsatweb.cz/css/priklady/mod‐standard‐priklad.html
Nestandardní mód
y
Zdroj: http://www.jakpsatweb.cz/css/priklady/mod‐quirk‐priklad.html
Hackování šířky a výšky
y Hack s uvozovkami (nevalidní)
.prvek {padding‐left: 20px; width: 300px; width: "320px";}
v uvozovkách pro quirk mód
y Hack se zpětným lomítkem
. prvek {padding‐left: 20px; width: 320px; w\idth: 300px;}
w\idth neuvidí nestandardní módy
y Hack s podtržítkem (validní asi, jsou rozepře)
.prvek {padding‐left: 20px; width: 300px; _width: 320px;}
IE ve standardním módu uvidí _width, proto pro stránky které jsou v quirk
Hackování šířky a výšky
y Hack s important a poznámkou
.prvek {height:18px !important; height /**/:24px;}
Je to validní zápis a z validních zápisů je asi nejjednodušší.
y Matrjoška
<div style="backgound‐color: yellow; width: 300px;">
<div style="margin: 5px;">
obsah prvku
</div>
</div>
ukecaný hack, nejspolehlivější
Peekaboo bug ‐ Mizející text v IE
y Peekaboo bug se projevuje tak, že při vykreslení opticky chybí y
y
y
y
y
y
y
část textu na stránce. Text však lze myší označit.
Jen v IE6 (oba módy)
Dokument obsahuje box (v příkladu níže #peekaboo), který nemá určenou šířku a má definovánu libovolnou barvu pozadí. Tento box obsahuje jiný box, který však je plovoucí (#float). Plovoucí box je obtékán textem. Ten může být klidně rozdělen mezi více tagů, ale jeho celková výška nesmí být větší než výška plovoucího boxu. Tento text je následován libovolným elementem, který má definovánu vlastnost clear.
Mezi boxy #peekaboo a #float neexistuje jiný prvek, který by měl definovánu výšku nebo šířku.
Zdroj: http://ie‐brouci.dero.name/
Peekaboo bug ‐ Problémový kód
<html>
<head> <title>Peekaboo Bug</title>
<style>
#peekaboo { padding: 10px; background‐color: #eee; }
#peekaboo #float { width: 150px; height: 150px; float: left; background‐color: #FFFDF5; border: 1px solid #EFD364; }
#peekaboo #cleared‐text { clear: left; background‐color: #ddd; }
</style>
</head>
<body>
<div id="peekaboo">
<div id="float"> Plovoucí element </div>
<div>Zde je text, který vlastně není vidět.</div>
<div id="cleared‐text">Donec vel arcu eu massa pretium volutpat...</div>
</div>
</body>
</html>
Správné vykreslení
Vykreslení v Internet Exploreru
Označení neviditelného textu
Řešení Peekaboo Bugu
y Definujeme boxu, který je nadřazený plovoucímu (tzn. #peekaboo) šířku nebo výšku. Obyčejně se vystačí s width: 100%; y Aplikujeme Holly Hack. Ten spočívá v tom, že se pro IE nastaví boxu malá výška, Explorer si daný box stejně roztáhne (pracuje s vlastností height tak, jak by se mělo pracovat s min‐height). Aplikace tedy vypadá následovně: #peekaboo: /* \*/ * html #peekaboo { height: 1px; } /* */ y Zrušíme boxu #peekaboo barvu pozadí, není‐li její definice nezbytně nutná. y U obtékajícího textu nastavíme vlastnost position na hodnotu relative. Double margin bug
y Double margin bug se projevuje u plovoucích (float) prvků tak, že vlevo plovoucí prvek má dvojnásobně velký levý vnější okraj (margin‐left), analogicky vpravo plovoucí prvek má dvojnásobný pravý okraj (margin‐
right).
y IE6
Problémový kód
<html>
<head>
<title>Double Margin Bug</title>
<style>
/* tyto dve definice pouze nakresli pracovni prostor */
body { background‐color: #eee; text‐align: center; }
#document { width: 600px; border: 1px solid black; padding: 30px 0; margin: 20px auto; background‐
color: white; text‐align: left; }
#box { margin‐left: 20px; width: 100px; height: 100px; background‐color: #FFF0ED; border: 1px solid #a00; clear: left; }
#float‐box { float: left; margin‐left: 20px; width: 100px; height: 100px; background‐color: #FFF0ED; border: 1px solid #a00; }
</style>
</head>
<body>
<div id="document"> </div>
</body>
</html> <div id="float‐box"></div> <div id="box"></div>
Zobrazení
Řešení Double Margin Bugu
y Řešením by mohla být matrjoška, ale CSS zná jedno chytré a plně účinné řešení.
y Nastavíme plovoucímu boxu (#float‐box) vlastnost display na hodnotu inline.
Ošetřený kód
<html>
<head>
<title>Double Margin Bug</title>
<style>
/* tyto dve definice pouze nakresli pracovni prostor */
body { background‐color: #eee; text‐align: center; }
#document { width: 600px; border: 1px solid black; padding: 30px 0; margin: 20px auto; background‐color: white; text‐align: left; }
#box { margin‐left: 20px; width: 100px; height: 100px; background‐color: #FFF0ED; border: 1px solid #a00; clear: left; }
#float‐box { float: left; margin‐left: 20px; width: 100px; height: 100px; background‐color: #FFF0ED; border: 1px solid #a00; display: inline; }
</style>
</head>
<body>
<div id="document"> <div id="float‐box"></div>
<div id="box"></div>
</div>
</body>
</html> Float bug
y Float bug se projevuje setrváním plovoucího boxu v běžném toku dokumentu, ačkoliv by měl být vyjmut.
y Internet Explorer v libovolné verzi y Existují dva boxy, jeden z nich je plovoucí a v logické struktuře dokumentu se nachází před druhým boxem. Tento plovoucí box se poté nesprávně zobrazí vedle druhého boxu.
Problémový kód
y <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1‐strict.dtd">
<html>
<head>
<title>Float Bug</title>
<style>
#box { background‐color: #E8F3FF; width: 200px; }
#float { background‐color: #FFEEE8; float: left; width: 50px; height: 50px; }
</style>
</head>
<body>
<div id="wrap">
<div id="float"></div>
<div id="box">Duis porta volutpat justo. Aliquam pede neque…div>
</div>
</body>
</html> Zobrazení
Pzn.:Záhadné 3px mezery mezi boxy si nevšímejte, jedná se o jiný bug IE, který řeším v článku 3px bug.
Řešení Float Bugu
y Řešením je přesunout deklaraci šířky (width) z boxu #box nadřazenému elementu, v našem případě boxu #wrap.
Ošetřený kód
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1‐
strict.dtd">
<html>
<head>
<title>Float Bug</title>
<style>
#wrap { width: 200px; }
#box { background‐color: #E8F3FF; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Duis porta volutpat justo. Aliquam pede neque...</div>
</div>
</body>
</html>
3px bug
y 3px bug se projevuje nelogickým odsazením boxu či textu vedle plovoucího boxu o tři pixely.
y Projevuje se v IE6 všude + Quirk mode IE7 a IE8
y Mějme box s určenou šířkou, který obsahuje jiný plovoucí box a text. Text bude od plovoucího boxu o tři pixely
odsazen. Při aplikaci vlastnosti margin‐left na box s textem tak, aby tento již plovoucí box vizuálně neobsahoval, se chyba projevuje nadále.
y Dosadíme‐li místo plovoucího boxu plovoucí generovaný řádkový prvek (typicky obrázek), tento se v ose x posune o tři pixely vlevo, text v obalovém boxu bude také odsazen o tři pixely.
Kdy se chyba projevuje
y IE6 všude, IE7 a IE8 v quirk modu
y Mějme box s určenou šířkou, který obsahuje jiný plovoucí box a text. Text bude od plovoucího boxu o tři pixely odsazen. Při aplikaci vlastnosti margin‐left na box s textem tak, aby tento již plovoucí box vizuálně neobsahoval, se chyba projevuje nad
y Dosadíme‐li místo plovoucího boxu plovoucí generovaný řádkový prvek (typicky obrázek), tento se v ose x posune o tři pixely vlevo, text v obalovém boxu bude také odsazen o tři pixely. ále.
Problémové kódy
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1‐strict.dtd">
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; }
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>
Problémové kódy
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; border: 1px solid black; }
</style>
</head>
<body>
<div id="wrap">
<img src="bug.gif" id="float" alt="brouk" />
</div>
</body>
</html> Zobrazení první příklad OK
Chybně v IE
Zobrazení druhý příklad OK
Chybně v IE
Řešení 3px Bugu
y Řešení je snadné, stačí nastavit vlastnost margin‐right plovoucího boxu na hodnotu −3px. V případě obrázku pak nastavujeme i vlastnost margin‐left, a to na stejnou hodnotu.
Unscrollable content bug
y Unscrollable content bug se projevuje nezobrazením vertikálního posuvníku při přetečení obsahu absolutně pozicovaného prvku mimo viditelnou část stránky.
y Už od 5 verze; IE6 + quirks
y Existují dva do sebe vnořené boxy, vnější nemá definovány rozměry a má nastaveno position: relative. Vnořený box je absolutně pozicovaný a je v něm nějaký obsah. Přeteče‐li tento obsah mimo viditelnou část stránky, Internet Explorer nezobrazí vertikální posuvník a na skrytou část obsahu se nelze nijak dostat. Problémový kód
<html>
<head>
<title>Unscrollable Content Bug</title>
<style>
#wrap { position: relative; background‐color: #E8F3FF; padding: 20px 0; }
#box { position: absolute; background‐color: #FFEEE8; } </style>
</head>
<body>
<div id="wrap"> <div id="box">Lorem ipsum dolor sit amet…</div>
</div>
</body>
</html>
Zobrazení
Řešení Unscrollable Content Bugu
y Problém je vyřešen, pakliže obalovému boxu nastavím jednu z vlastnost width nebo height. Vhodná příležitost k použítí Holly hacku, který nastaví boxu v IE výšku 1px, prohlížeč si box stejně roztáhne.
Ošetřený kód
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1‐
strict.dtd">
<html>
<head>
<title>Unscrollable Content Bug</title>
<style>
#wrap { position: relative; background‐color: #E8F3FF; padding: 20px 0; }
/* \*/ * html #wrap { height: 1px; } /* */
#box { position: absolute; background‐color: #FFEEE8; } </style>
</head>
<body>
<div id="wrap"> <div id="box">Lorem ipsum dolor sit amet…</div>
</div>
</body>
</html>
Guillotine bug
y IE6
y Guillotine bug je charakterizován náhodným uříznutím či objevením textu při najetí myši na odkaz.
y Existují dva boxy – jeden obalový a druhý v něm plovoucí, který však není ukončen vlastností clear. y Obalový box obsahuje za deklarací plovoucího boxu více (alespoň 3) odkazů, které mají nadefinovánu změnu určitých vlastností (padding, background…) při najetí myši (a:hover). y V obalovém boxu máme několik odkazů, které mají nadefinovanou změnu určitých vlastností při najetí myši. Při přejetí třetího odkazu (bráno podle logické struktury dokumentu) dojde k uříznutí přetékající části plovoucího boxu na úroveň spodní hrany obalového boxu. Při přejetí prvního či druhého odkazu, potažmo libovolného odkazu v plovoucím boxu, dojde ke správnému znovu překreslení dokumentu.
Zobrazení
OK
Chybně v IE
Řešení Guillotine Bugu
y Řešení je poměrně jednoduché. Spočívá v umístění prázdného divu s definovanou vlastností clear: both za obalový box. Jedná se samozřejmě o sémanticky nesprávné řešení, neboť prvek nemá v dokumentu logický význam, avšak je plně funkční a jednoduché. y V případě, že obalový box má nastavenu šířku, by toto řešení nestačilo V takovém případě musíme obsah vnějšího boxu (#wrap) uzavřít do dalšího boxu, na který aplikujeme Holly hack. Stinnou stránkou tohoto řešení je, že obalový box v takovém případě bude roztažen na výšku plovoucího. Proto se této kostrukci raději vyhněte. y http://www.positioniseverything.net/explorer/guillotine.html
y Na Position Is Everything najdete článek k tomuto tématu, který zahrnuje všechna možná řešení včetně možnosti zachování sémantické korektnosti dokumentu
Italics bug
y Italics bug se projevuje neočekávaným rozšířením boxu, který y
y
y
y
obsahuje text psaný kursivou.
IE6
Internet Explorer rozšíří zprava box tak, aby se do něj vešel celý text psaný kursivou. Některá písmena (např. „j“) mají volně přetékat přes okraj boxu, aniž by ovlivnila jeho šířku. Toto pravidlo je špatně implementováno v IE, kde je přetékající kursiva zleva oříznuta a zprava rozšíří box, ve kterém je umístěna. Toto chování vede principielně ke třem možným problémům.
Rozšíření boxu s pevně zadanou šířkou může nastat náhodně či v důsledku zarovnání obsaženého textu do bloku.
Důsledek prvního problému je nasnadě: zobrazení zbytečného horizontálního posuvníku v případě, že box s textem zabírá 100% šířky stránky, či se tomuto číslu přibližuje. Problémové kódy
<html>
<head>
<title>Italics Bug 1</title>
<style>
#box { width: 200px; background‐image: url('./ie/images/chyby/italics‐bg.gif'); font‐size: 200%; font‐style: italic; text‐align: justify; }
</style>
</head>
<body>
<div id="box">aou bbf uslf krjy dfgkl jsgh asdfzdf</div>
</body>
</html> Problémové kódy
<html>
<head>
<title>Italics Bug 2</title>
<style>
#box { width: 100%; background‐color: #E2EFFB; font‐
style: italic; }
</style>
</head>
<body>
<div id="box"> Lorem ipsum dolor sit amet…</ div>
</body>
</html> Zobrazení příklad 1
IE
OK
y Box je vykreslen široký přesně 200px, zkosený text přes něj napravo přetéká.
y Box je vykreslen široký přesně 200px, zkosený text přes něj napravo přetéká.
Zobrazení příklad 2
Řešení Italics bugu
y Podstata řešení je nastavit Internet Exploreru vlastnost overflow na hodnotu visible. Poté aplikujeme Holly hack (nastavíme boxu výšku 1px, box se stejně roztáhne), protože ke správné funkčnosti je třeba uvést alespoň jeden rozměr boxu. Tím se zamezí přetékání znaků z boxu. V praxi to je čisté a málokdy limitující řešení, neboť většina boxů nesoucích textový obsah má definovaný padding. K tomu použijeme škaredou, ale efektivní kombinaci hacků. Nejdříve komentářovým hackem odstraníme IE/Mac, potom kombinací selektorů * html všechny prohlížeče různé od IE a nakonec pomocí lomítka v názvu vlastnosti vyčleníme pravidla pro Internet Explorer 5 a pro ostatní (IE5 takovou vlastnost nezpracuje, vyšší verze ano).
y Velmi detailní článek k tomuto bugu naleznete na webu Position Is
Everything. Autoři tam rozebírají mimo jiné problém kursivou plněných boxů, které obtékají plovoucí elementy. Odkaz máte níže.
Zdroje
y
y
y
y
y
y
y
y
y
y
y
http://zdrojak.root.cz/clanky/tri‐zobrazovaci‐mody‐internet‐exploreru‐8/
http://weblog.jakpsatweb.cz/b/1110642096‐ie7‐zachova‐quirk‐a‐vylepsi‐standard‐mod.html
http://www.jakpsatweb.cz/css/mody‐prohlizecu.html
http://www.my‐debugbar.com/wiki/IETester/HomePage
http://www.webylon.info/
http://www.lupa.cz/clanky/soumrak‐nad‐modernim‐x/
http://ie‐brouci.dero.name/
http://interval.cz/clanky/implementacni‐chyby‐v‐prohlizecich‐plovouci‐prvky‐a‐obtekajici‐text/
http://www.positioniseverything.net/explorer/threepxtest.html
http://www.positioniseverything.net/explorer/guillotine.html
http://ondrej.jikos.cz/vyuka/swi117/

prezentace

Transkript

Podobné dokumenty

4. Rozdíly v interpretaci CSS moderními prohlížeči

jQuery

Bakalářská práce - PDF

Specifikace výroby dat pro Digi ShowCAR Sc01

NAVOD NA TVORBU OJNICE V CATIA V5 NAVOD NA TVORBU

Ceny inzerce na webovém portálu stribro.cz od 1. 9. 2015

Zpráva o zdraví obyvatel hlavního města Prahy

CSS Blokový model

Media kit 2011 - ortopedie