CSS box model a CSS reset
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

CSS box model a CSS resetCSS box model a CSS reset

 

CSS box model a CSS reset

Google       Google       3. 6. 2009       30 271×

Základní kámen úrazu začínajícího kodéra či webdesignéra: jak dosáhnout toho, aby každý element měl stanovenou (a dobře vypočtenou) velikost a jak ji vůbec spočítat, aby byl daný element správně vykreslen? Víte, že na vině v chybné interpretaci box modelu je W3 konsorcium samo? Jak dosáhnout téměř stejných výsledků napříč prohlížeči?

Box model je (měl by být) znám snad každému. Je to dokola omílané téma, základní kámen vědění. Setkáte se s ním na každém webu nebo blogu, který se tématicky zabývá webdesignem. Přesto však v něm spousta lidí chybuje, a proto je dobré si ho připomenout. Základní kámen úrazu totiž tkví v rozhodnutí W3C - world wide web konsorcia a nikoliv ve vývojářích Internet Exploreru, jak se mnozí chybně domnívají. Konsorcium tak udělalo z box modelu doslova noční můru všem začátečníkům - a pro ně je tento článek určen.

Základní informace: box model je matematický model, dle kterého se počítají rozměry blokových elementů (div, p…). Týká se to atributů width, height, border a padding (atributu margin nikoliv).

Historie

Na počátku (rok 1994 - 1995) prohlížeč Netscape implementuje u elementu img atributy width, height a border, a to nejprve tak, že rozměry elementu určují atributy width a height, okraje (border, padding a margin) se připočtou k těmto rozměrům. To je správný - a také dnešní - postup při výpočtu rozměrů elementu, nazvěme si ho validním modelem. (Poznámka: padding byl doplněn později v roce 1996 konsorciem W3, ale v rámci zjednodušení jej uvádím naráz spolu s ostatními atributy). Názorněji to zobrazuje následující obrázek:

Rozměry elementu tedy spočítáme následovně (výška se spočítá obdobně):

Šířka pole pro text: definovaná, 200 px
Šířka odstavce = 200 px + (2 x 5 px) + (2 x 5 px) = 220 px

V roce 1995 se však atributy u elementu table v prohlížeči Netscape začínají počítat jinak, a to tak, že celkový rozměr elementu určují jak atributy width a height, tak i okraje (border a padding). Tomuto říkejme nevalidní model a opět to názorněji zobrazuje následující obrázek:

Rozměry elementu v tomto případě spočítáme následovně (výška se spočítá obdobně):

Šířka odstavce: definovaná, 200 px
Šířka pole pro text = 200 px - (2 x 5 px) - (2 x 5 px) = 180 px

Rozdíl je myslím patrný. V prvním případě jsme si určili šířku odstavce (šířku pole pro text) 200 px a poté zvolili nějaké okraje (to není pro nás důležité, text bude v odstavci širokém 200 px). V druhém případě však - i když také nastavíme šířku odstavce na 200 px - bude výsledná šířka pro samotný text menší (zde o 20 px), což má za následek různé zobrazení v prohlížečích a deformaci textu uvnitř odstavce. Ba navíc, rozdíl v celkové velikosti elementu (odstavce) činí celých 40 px.

Roku 1996 vydává konsorcium W3 doporučení, dle kterého by se mělo zacházet s atributy width, height, padding a border dle validního modelu, nicméně vcelku pozdě. V roce 1997 totiž vychází Netscape 4.0, který chtěl počítat rozměry stejně, jak je počítá u tabulek (aby se vše počítalo stejně). Používá tedy nadále nevalidní model. Ve stejném roce byl vydán Internet Explorer 4.0, který přebral implementaci z Netscape 4.0, používá tedy také nevalidní model. Důvody jsou zřejmé, webové stránky již byly vytvářeny dle nevalidního modelu a cílem bylo nabídnout zobrazení minimálně stejné, jako měl Netscape a na které už byli uživatelé zvyklí. Zde je nutné zdůraznit, že tržní podíl Netscape 4.0 byl jen o něco málo větší než podíl Internet Exploreru 4.0 a pouze cca 2 % uživatelů používala v této době jiný prohlížeč než Netscape nebo Internet Explorer!

Psal se rok 1998 a prohlížeče byly jednotné - používaly nevalidní model (poznámka: označení nevalidní je pouze pomůckou pro rozdělení a lepší pochopení modelů a jejich rozdílů). 98 % uživatelů* tedy používalo prohlížeče, které se chovaly jednotně a zobrazovaly stránky dle stejného modelu (dá se říct, že se tedy chovaly standardně). I přesto však konsorcium W3 ve stejném roce vydává druhé CSS doporučení: používat validní model.

* Malá poznámka: oněch 98 % není zcela přesných. Přesněji to bylo tak, že 98 % uživatelů používalo prohlížeč s nevalidním modelem (Netscape/IE) nebo vůbec žádným (tj. starší verze Netscape nebo IE, které CSS vůbec nepodporovaly).

V roce 1998 vychází Opera 3.5 a ta implementuje dle konsorcia W3 validní model. O rok později, v roce 1999, se Netscape dočká nového vykreslovacího jádra (Gecko) a implementuje také validní model. O další rok později (2000) vychází IE 5.0 a ten dovoluje nastavit webmasterům libovolný box model pomocí atributu box-sizing. V roce 2001 na svět přišel IE 6.0 a obsahoval dva vykreslovací režimy: standardní (validní model) a zpětně kompatibilní (nevalidní model neboli také quirk mód). V roce 2003 Opera 7.0 rozeznává také tyto dva režimy a implementuje po vzoru IE 6.0 atribut box-sizing (Mozilla implementovala stejný atribut pod názvem -moz-box-sizing v roce 2000). box-sizing je implementován i v IE 8.0.

Jak je vidno z předchozího odstavce, celou vinu nese konsorcium, které i přes jednotu prohlížečů prosazovalo validní model. Vznikla tak situace, kdy se minoritní moderní prohlížeče podřídily doporučení konsorcia (a patřičně se tím marketingově chválily - tu dobu máme všichni v paměti), a na druhé straně byl majoritní Internet Explorer, jehož vývojáře zajímala hlavně zpětná kompatibilita. Ač nechci nikoho obhajovat, Internet Explorer vinu nenese a byl tedy neprávem nařčen (a historicky znemožněn) z nedodržování standardů. Ostatním - minoritním - prohlížečům o nic nešlo, neměly co ztratit. Kdyby tehdejší boj vyhrál Netscape (s Internet Explorerem), situace by byla stejná a pouze by byl za viníka označen Netscape.

Historii jsem čerpal z Chamurappiho článku V kaskádovém ringu na jeho Webylonu.

Poznámka: netvrdím, že je dobré, když Internet Explorer zůstal u nevalidního modelu, ani zde nikoho neobhajuju - názor ať si každý udělá sám.

Identifikace problému

Problém tedy v dnešní době nastává u prohlížeče Internet Explorer 6 ve quirk režimu, ve kterém vykresluje dle nevalidního modelu. Internet Explorer 7 a 8 již standardně vykresluje ve validním režimu, pokud webmaster, manuálně uživatel nebo seznam stránek v kompatibilním zobrazení neřeknou jinak.

Problém se projevuje v počítání rozměru elementů (viz obrázky nahoře). U quirk módu (nevalidního modelu) se do šířky elementu započítává width, padding a border. U standardního režimu (validní model) se do šířky elementu započítívá pouze jeho šířka, tedy width.

Řešení

Řešením je donutit Internet Explorer (hlavně 6, lépe i 7 a někdy také Operu), aby použil standardní režim vykreslování, tedy validní režim. Toho docílíme tak, že:

  • použijeme striktní DOCTYPE
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01">

    nebo
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • a (kvůli chybě v IE 6) DOCTYPE umístíme hned na první řádek
  • Pokud používáte XHTML: Petr Pixy Staníček dále upozorňuje: IE 6 obsahuje ještě jednu závažnou chybu: pokud XHTML dokument začíná XML deklarací (což by měl, pokud používá jiné kódování než UTF-8), IE to špatně pochopí, nepovažuje jej za striktní a zpracovává jej v quirk režimu. Tuto chybu ovšem již nelze napravit. Příklad:
    <?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    Používáte-li XHTML, můžete využít pro IE 6 hack s podtržítkem, ten je však použitelný pouze tehdy, vykresluje-li IE 6 dokument v quirk režimu. Více na JakPsátWeb.cz: Hackování šířky a výšky.

Více o režimech prohlížečů a kdy je který aktivován v článku DOCTYPE a režimy prohlížečů od Petra Pixyho Staníčka.

Matrjoška

Dalším řešením (obejitím problému s CSS box modelem) je použití Matrjošky. Nejedná se ruskou panenku, ale o způsob práce s paddingem. Řešení spočívá v tom, že text obalený elementem (např. DIVem), kterému jste chtěli nastavit padding, obalíte ještě jedním elementem (DIVem), kterému tento padding nastavíte. Lépe pochopitelné na příkladu. Místo původního jednoho DIVu:

<div style="width: 200px; padding: 5px;">
    text
</div>
použijete následující dva DIVy:
<div style="width: 200px;">
    <div style="padding: 5px;">
        text
    </div>
</div>
Výsledek bude totožný jak v quirk, tak i ve standardním režimu.

CSS reset

Pokud vytváříte webové stránky, kódujete šablony nebo programujete rozsáhlé webové projekty, měli byste resetovat výchozí CSS nastavení použitého prohlížeče, tzn. většinou nastavit všechny hodnoty na nulu, což vám dá jistou garanci, že vaše stránky nebo váš projekt bude ve všech moderních prohlížečích vypadat stejně. CSS reset je kousek kódu, který vám ulehčí život a udělá vaše stránky, projekty nebo webové aplikace mnohem kompatibilnější napříč všemi prohlížeči.

Identifikace problému

Každý prohlížeč má nastaveny výchozí hodnoty u každého elementu. To znamená, že např. Internet Explorer má nastavený větší padding u samotného elementu body než Firefox nebo Opera (pouze příklad). Dalším příkladem mohou být rozdílné okraje (margin) u odstavců. Výsledkem tedy je, že každý prohlížeč bude vaši stránku/projekt zobrazovat částečně odlišně, nenastavíte-li jim implicitně atributy jako border, line-height, margin nebo padding.

Řešení

Řešením je všechny známé elementy, které se chovají různě v prohlížečích, resetovat na společné hodnoty. Například vynulovat border, margin nebo padding. Nevytvářejte si vlastní, ale použijte raději webmastery osvědčené a uživateli vyzkoušené CSS resety, je jich celá řada, stačí si vybrat.

Nejpoužívanější CSS reset je od Erica Meyerse, jehož vždy aktuální verzi najdete na jeho stránce. Používejte ho však pouze na nově vytvářené stránky, jinak by se vám mohly ty stávající rozhodit a asi byste měli na delší dobu o zábavu postaráno. Obecně použití CSS resetu mohu vřele doporučit. Další typy CSS resetů naleznete na stránce help-developer.com.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

To je prozatím vše, snad tento článek někomu pomohl blíže se seznámit s problematikou CSS box modelu, proč je s ním tolik problémů, jak je vyřešit a jak předejít většině dalších problémů při vytváření stylopisu. V některém z dalších článků se zaměřím na pár speciálních případů kolem CSS. Nakonec ještě přikládám, jak se vykreslují jednotlivé vrstvy - tedy hierarchii CSS box modelu. Originál vytvořil Jon Hicks.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Lukáš ChurýLukáš je šéfredaktorem Programujte, vyvíjí webové aplikace, fascinuje ho umělá inteligence a je lektorem na FI MUNI, kde učí navrhovat studenty GUI. Poslední dobou se snaží posunout Laser Game o stupeň výše a vyvíjí pro něj nové herní aplikace a elektroniku.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Stavebnice umělé inteligence 1

Stavebnice umělé inteligence 1

Článek popisuje první část stavebnice umělé inteligence. Obsahuje lineární a plošnou optimalizaci.  Demo verzi je možné použít pro výuku i zájmovou činnost. Profesionální verze je určena pro vývojáře, kteří chtějí integrovat popsané moduly do svých systémů.

Obrázek ke článku Hybridní inteligentní systémy 2

Hybridní inteligentní systémy 2

V technické praxi využíváme často kombinaci různých disciplín umělé inteligence a klasických výpočtů. Takovým systémům říkáme hybridní systémy. V tomto článku se zmíním o určitém typu hybridního systému, který je užitečný ve velmi složitých výrobních procesech.

Obrázek ke článku Jak vést kvalitně tým v IT oboru: Naprogramujte si ty správné manažerské kvality

Jak vést kvalitně tým v IT oboru: Naprogramujte si ty správné manažerské kvality

Vedení týmu v oboru informačních technologií se nijak zvlášť neliší od jiných oborů. Přesto však IT manažeři čelí výzvě v podobě velmi rychlého rozvoje a tím i rostoucími nároky na své lidi. Udržet pozornost, motivaci a efektivitu týmu vyžaduje opravdu pevné manažerské základy a zároveň otevřenost a flexibilitu pro stále nové výzvy.

Obrázek ke článku Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Za poslední rok se podoba práce zaměstnanců změnila k nepoznání. Především plošné zavedení home office, které mělo být zpočátku jen dočasným opatřením, je pro mnohé už více než rok každodenní realitou. Co ale dělat, když se při práci z domova ztrácí motivace, zaměstnanci přestávají komunikovat a dříve fungující tým se rozpadá na skupinu solitérů? Odborníci na personalistiku dali dohromady několik rad, jak udržet tým v chodu, i když pracovní podmínky nejsou ideální.

Reklama autora

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý