<p id='prepend'>Znalost implementaΦnφch chyb v prohlφ₧eΦφch, vedle normativnφch definicφ kaskßdov²ch styl∙ a (X)HTML znaΦkovßnφ, je pro bezstresovou tvorbu webov²ch strßnek bezpodmφneΦn∞ nutnß. V sΘrii o implementaΦnφch chybßch bych vßs rßd seznßmil s projevy i °eÜenφm t∞ch nejproblematiΦt∞jÜφch. V tomto Φlßnku se nauΦφte odstra≥ovat nejznßm∞jÜφ implementaΦnφ chybu Internet Exploreru a zßrove≥ budete mφt mo₧nost pochopit princip pracovnφch re₧im∙ v modernφch prohlφ₧eΦφch.</p>
<p>Abych p°edeÜel nedorozum∞nφm, hned na zaΦßtku upozor≥uji, ₧e nebudu psßt o chybßch ohro₧ujφcφch bezpeΦφ a soukromφ u₧ivatele, n²br₧ o chybßch p°i vykreslovßnφ dokument∙. A v∞zte, ₧e pod pojmem dokument myslφm HTML Φi XHTML k≤d spoleΦn∞ s kaskßdov²mi styly.</p>
<h3>ChybnΘ rozm∞ry box∙</h3>
<p>Nejznßm∞jÜφ implementaΦnφ chybou v∙bec je chybn² box model Internet Exploreru. Specifikace CSS °φkß, ₧e vlastnost <strong>width</strong> blokovΘho boxu urΦuje <em>Üφ°ku obsahu</em>. Celkovß viditelnß Üφ°ka pak vznikne souΦtem vlastnostφ width, padding a border. OvÜem sebev∞dom² Internet Explorer nedbß specifikacφ a vlastnost width interpretuje jako celkovou viditelnou Üφ°ku. SkuteΦnß velikost obsahu je pak menÜφ o velikosti levΘho a pravΘho rßmeΦku (border-left, border-right) a levΘ a pravΘ v²pln∞ (padding-left, padding-right). Velikosti okraj∙ (vlastnost margin) nehraje p°i chyb∞ ₧ßdnou roli.</p>
<div class='image'>
<img src='podklady/bien/730/boxmodel.png' alt='Rozm∞ry boxu podle CSS specifikace a podle IE' title='Rozm∞ry boxu podle CSS specifikace a podle IE' />
<br /><span class='comment'>Rozm∞ry boxu podle CSS specifikace a podle IE</span>
</div>
<p>Z obrßzku je patrnΘ, jak je specifikacφ vlastnost width zam²Ülena a jak ji chßpe Internet Explorer. Pro nßzornost demonstruji problΘm na nßsledujφcφm HTML dokumentu:</p>
<div class='sample'>
<html>
<br /><head>
<br /> <title>TestBox 1</title>
<br /> <style type="text/css">
<br /> #sample {
<br /> margin : 15px;
<br /> border : 10px solid black;
<br /> padding : 20px;
<br /> width : 150px;
<br /> background-color : #dadada;
<br /> }
<br /> </style>
<br /></head>
<br /><body>
<br /><div id="sample">
<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
<p>V p°φkladu pracuji pro jednoduchost pouze se Üφ°kou boxu, problΘm se vÜak t²kß i v²Üky blokovΘho boxu, pota₧mo vlastnosti <strong>height</strong>.</p>
<p>èpatnou implementacφ box modelu jsou posti₧eny vÜechny verze Internet Exploreru s implementovan²mi vlastnosti margin, padding, border a width. Jmenovit∞ tedy verze 4, 5, 5.5 a 6. U ÜestΘ verze IE chyba vznikß jen v re₧imu zp∞tnΘ kompatibility, ve standardnφm re₧imu neexistuje. TuÜφm, ₧e si prßv∞ te∩ kladete otßzku: <q>Co je to re₧im prohlφ₧eΦe?</q></p>
<h3>Re₧imy prohlφ₧eΦe</h3>
<p>Re₧im prohlφ₧eΦe je v∙bec prvnφ okolnost, kterou je t°eba t°eba p°ed rozborem chyb vzφt na v∞domφ. Jde o to, ₧e modernφ prohlφ₧eΦe nep°istupujφ k HTML dokument∙m stejn²m zp∙sobem. Mß to logiku - jestli₧e dokument pln∞ koresponduje se standardy, prohlφ₧eΦ se jich sna₧φ p°i vykreslovßnφ dbßt, zatφmco dokument strukturovan² prav∞k²m zp∙sobem zobrazφ podle p°edpotopnφch zvyklostφ. A prßv∞ tento dvojφ metr naz²vßme re₧imy prohlφ₧eΦ∙. Re₧im prohlφ₧eΦe urΦuje, jakß pravidla budou pro vykreslovßnφ dokumentu platit. N∞kterΘ chyby v prohlφ₧eΦφch jsou typickΘ jen pro jeden z re₧im∙ a prßv∞ v kontextu s re₧imem je t°eba je znßt.</p>
<h4>Modernφ prohlφ₧eΦe</h4>
<p>Re₧imy p°φsluÜφ jen modernφm prohlφ₧eΦ∙m (Internet Explorer 6, Opera 7, Mozilla M18, Mac IE5 a Safari a nov∞jÜφ). V∞tÜina modernφch prohlφ₧eΦ∙ disponuje dv∞ma re₧imy. Prvnφm je <strong>standardnφ re₧im</strong>, ve kterΘm by m∞l prohlφ₧eΦ maximßln∞ dbßt specifikacφ norem, a druh²m je <strong>re₧im zp∞tn∞ kompatibilnφ</strong> (naz²van² tΘ₧ "quirk"), v n∞m₧ prohlφ₧eΦ dokument vykresluje star²mi a Φasto od norem odliÜn²mi postupy zatφ₧en²mi chybami. Prohlφ₧eΦe Mozilla 1.0 a Safari 1.1.1. ovlßdajφ od jmenovan²ch verzφ v²Üe navφc i <strong>re₧im tΘm∞° standardnφ</strong> (almost standard), kdy se standard∙ nedr₧φ zcela. Faktem je, ₧e standardnφ m≤d prohlφ₧eΦ∙ IE6, Opera 7 a Mac IE5 je, co do napln∞nφ specifikacφ, prakticky bli₧Üφ tΘm∞° standardnφmu ne₧ pln∞ standardnφmu m≤du u poslednφch verzφ Mozilly a Safari. StarÜφ prohlφ₧eΦe, z t∞ch nezanedbateln²ch jmenovit∞ Internet Explorer 5.x, re₧imy nep°epφnajφ a pova₧ujeme je za <strong>quirk prohlφ₧eΦe</strong>.</p>
<h4>Volba re₧imu</h4>
<p>KlφΦov²m je systΘm v²b∞ru re₧imu. U supermodernφ specifikace XHTML 2 je jasn∞ p°ikßzßno, ₧e tyto musφ b²t poslßny klientovi s HTTP hlaviΦkou <samp>Content-Type: application/xhtml+xml</samp>, na zßklad∞ kterΘ se ka₧d² modernφ prohlφ₧eΦ nastavuje do pln∞ standardnφho re₧imu.</p>
<p>U dokument∙ podle <acronym title='Document Type Declaration'>DTD</acronym> specifikacφ XHTML 1.0, HTML 4.01 a starÜφch je volba re₧imu slo₧it∞jÜφ. U vÜech je vracena hlaviΦka <samp>Content-Type: text/html</samp>, kterou se prohlφ₧eΦ pro technologickou neurΦitost °φdit nem∙₧e. Na scΘnu tak nastupuje funkce <strong>doctype sniffing</strong>, detekujφcφ DTD uvedenΘ v DOCTYPE dokumentu a p°epφnajφcφ prohlφ₧eΦ do vhodnΘho re₧imu. Zde vÜak systΘm zφskßvß na kapitßlnφ nep°ehlednosti, jeliko₧ ka₧d² prohlφ₧eΦ (Φasto i r∙znΘ v²vojovß verze konkrΘtnφho prohlφ₧eΦe) volφ pro stejn² dokument jin² re₧im.</p>
<h3>P°ehled re₧im∙</h3>
<p>Kompletnφ <a href='podklady/bien/730/rezimy.htm'>p°ehled re₧im∙</a> naleznete v p°ipojenΘ tabulce. Pro zjednoduÜφ do v²pisu nezahrnuji DTD <em>Frameset</em>. Obecn∞ platφ, ₧e DTD Frameset p°epne prohlφ₧eΦ do stejnΘho re₧imu jako DTD <em>Transitional</em>. Nezapome≥me ovÜem, ₧e ka₧d² rßm pracuje ve vlastnφm re₧imu, urΦenΘm v n∞m naΦten²m dokumentem.</p>
<p>Internet Explorer 6 oΦekßvß DOCTYPE na ·plnΘm zaΦßtku dokumentu. Pakli₧e je u XHTML dokumentu deklarovßno k≤dovßnφ, p°epne se do re₧imu zp∞tnΘ kompatibility. ╪eÜenφ, spoΦφvajφcφ v nastavenφ serveru tak, aby vracel XHTML dokumenty s HTTP hlaviΦkou <samp>Content-Type: application/xhtml+xml</samp>, nßm takΘ nepom∙₧e, proto₧e zde narß₧φme na skuteΦnost, ₧e IE (vΦetn∞ Üestky), po boku s n∞kter²mi starÜφmi prohlφ₧eΦi, tyto dokumenty v∙bec nezobrazφ.</p>
<p>PokroΦilφ u₧ivatelΘ prohlφ₧eΦe Opera mohou editacφ souboru s nastavenφm vy°adit funkci doctype sniffing a vynutit tak standardnφ Φi zp∞tn∞ kompatibilnφ re₧im bez ohledu na DTD. Tato volba je urΦena jen webov²m tv∙rc∙m, nikdo z b∞₧n²ch u₧ivatel∙ by ji nem∞l mφt nastavenu, je vÜak dobrΘ o nφ v∞d∞t.</p>
<h3>╪eÜenφ implementaΦnφ chyby</h3>
<p>Ji₧ vφme, co jsou to re₧imy prohlφ₧eΦe, a takΘ vφme, ₧e chybn² box model se t²kß vÜech verzφ Internet Exploreru, jen v Üestce vznikß p°i zp∞tn∞ kompatibilnφm re₧imu. Jestli₧e chyba neomezuje Φitelnost a p°ehlednost dokumentu, nemusφme si jφ vÜφmat. V opaΦnΘm p°φpad∞, ke kterΘmu dochßzφ zejmΘna p°i Üirok²ch v²plnφch a rßmeΦcφch, m∙₧eme pou₧φt n∞kter² z nßsledujφcφch postup∙.</p>
<h4>MatrjoÜka</h4>
<p>NejbezpeΦn∞jÜφ je vyhnout se konstrukcφm, kterΘ chybu zp∙sobujφ. Jednφm z nejproslulejÜφch a mezi webdesignΘry nejoblφben∞jÜφch °eÜenφ, je takzvanß <strong>matrjoÜka</strong>. HTML matrjoÜka se sklßdß z n∞kolika v sob∞ vno°en²ch element∙, nejΦast∞ji z anonymnφch blokov²ch alement∙ <div>. Pro demonstraci °eÜenφ pomocφ matrjoÜky pou₧ijeme ukßzkov² HTML k≤d ze zaΦßtku Φlßnku, kter² p°φsluÜn²m zp∙sobem upravφme:</p>
<div class='sample'>
<html>
<br /><head>
<br /> <title>TestBox 2</title>
<br /> <style type="text/css">
<br /> #sample {
<br /> margin : 15px;
<br /> width : 210px;
<br /> }
<br /> #sample .in1 {
<br /> border : 10px solid black;
<br /> background-color : #DADADA;
<br /> }
<br /> #sample .in2 {
<br /> margin : 20px;
<br /> }
<br /> </style>
<br /></head>
<br /><body>
<br /><div id="sample">
<br /> <div class="in1">
<br /> <div class="in2">
<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
<br /> </div>
<br /> </div>
<br /></div>
<br /></body>
<br /></html>
<br />
</div>
<p>Nynφ by u₧ m∞la naÜe ukßzka ve vÜech prohlφ₧eΦφch vypadat stejn∞, leΦ v IE5 nßm s vy°eÜenφm jednΘ chyby vznikla jinß - v horizontßlnφm sm∞ru je vÜe v po°ßdku, ale ve vertikßlnφm sm∞ru je mezi rßmeΦkem a textem mφsto dvaceti bodovΘ mezery mezera nulovß. To je vÜak ji₧ jinß implementaΦnφ chyba, kterou si nechßme do n∞kterΘho z dalÜφch dφl∙ serißlu. I tak si matrjoÜku dob°e pamatujte a nauΦte se ji vyu₧φvat. Je to nejjist∞jÜφ °eÜenφ i n∞kter²ch dalÜφch implementaΦnφch chyb.</p>
<h4>CSS trik</h4>
<p>Nejkrajn∞jÜφm mo₧n²m °eÜenφm je vyu₧itφ n∞kterΘho z mnoha CSS trik∙, v anglicky mluvφcφch zemφch naz²van²ch <strong>CSS hacks</strong>. CSS triky obchßzejφ jednu implementaΦnφ chybu prohlφ₧eΦe vyu₧itφm jinΘ chyby nebo nedokonalostφ implementace. Chybu box-modelu jich °eÜφ celß °ada, mezi nejznßm∞jÜφ pat°φ trik ßla <em>Tantek ╟elik</em>. Vychßzφ z toho, ₧e IE 5.5 na jemu neznßmΘ, ale jinak validnφ definici vlastnosti <samp>voice-family: "\"}\"";</samp> zastavφ zpracovßnφ dalÜφch definicφ. NßÜ p°φklad oÜet°en² tφmto trikem by pak vypadal nßsledovn∞:</p>
<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
<br /></div>
<br /></body>
<br /></html>
<br />
</div>
<p>PovÜimn∞te si p°idanΘho DOCTYPE se striktnφm DTD. Jeliko₧ IE6 na definici <samp>voice-family: "\"}\"";</samp> nekonΦφ a zpracovßvß i nßslednß pravidla, je t°eba, aby pracoval v pln∞ standardnφm re₧imu.</p>
<p>Obecn∞ platφ, ₧e CSS triky se majφ pou₧φvat jen k °eÜenφ chyb u "mrtv²ch" prohlφ₧eΦ∙ (prohlφ₧eΦe s ukonΦen²m v²vojem), pop°φpad∞ u prohlφ₧eΦ∙ kterΘ majφ v poslednφ verzi opraveny vÜechny chyby, na kter²ch se trik zaklßdß. P°edpov∞d∞t, kterß chyba bude v novΘ verzi prohlφ₧eΦe opravena a kterß nikoli, nedokß₧e s trochou nadsßzky ani sßm v²robce, pokud vÜak jsou v souΦasnΘ verzi opraveny vÜechny chyby, v∞tÜinou nenφ d∙vodu se jich obßvat ve verzφch nßsledujφcφch. </p>
<div class='refer'>
<h3>Odkazy, zdroje</h3>
<h4>Chybn² box model IE</h4>
<ul>
<li><a href='http://www.pixy.cz/blog/2003_08_archiv.html#1061885333'>O Üφ°ce prvku, Exploreru, Mozille a matrjoÜce</a> - Petr StanφΦek</li>
<li><a href='http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp'>CSS Enhancements in Internet Explorer 6</a> - Lance Silver (Microsoft.com)</li>
<li><a href='http://mozilla.org/docs/web-developer/quirks/doctypes.html'>Mozilla's DOCTYPE sniffing</a> - David Baron (Mozilla developer)</li>
<li><a href='http://www.hut.fi/~hsivonen/doctype.html'>Activating the Right Layout Mode Using the Doctype Declaration</a> - Henri Sivonen</li>
<li><a href='http://pro.html.it/articoli/id_312/idcat_31/pro.html'>Il <!DOCTYPE> ed il <!DOCTYPE> switch nei moderni browser</a> - Marcello Cerruti</li>
<li><a href='http://www.opera.com/docs/specs/doctype/'>The Opera 7 DOCTYPE Switches</a> (Opera software)</li>
<h4><a href='http://interval.cz/__redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=236'>NauΦte se ASP. NET za 21 dnφ</a></h4>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3064'>Interval v roce 2004: Publish or perish!</a></li>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3034'>Jak budovat a rozvφjet e-shop - transakce</a></li>
</ul>
</div>
</div>
<div class='page-right-box cauldron'>
<h3>Diskuznφ kotel</h3>
<div class='page-right-box-in'>
<ul>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2561'>Internet Explorer 7 se jmenuje MyIE2</a><div>149 komentß°∙ </div></li>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1304'>BezpeΦnost p°edevÜφm û include v PHP</a><div>95 komentß°∙ </div></li>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2965'>ImplementaΦnφ chyby v prohlφ₧eΦφch I.</a><div>59 komentß°∙ </div></li>
