Doctype
<!doctype html>

HTML <!doctype> je zvláštní část kódu, která se obvykle zapisuje na začátek HTML stránek.

V minulosti se hodila pro přepínání režimů prohlížečů. V dnešní době se prakticky vždy hodí používat standardní režim, kterého jde docílit jednoduchým tvarem:

<!doctype html>

Při neuvedení <!doctype> se použije tzv. quirk režim (nestandardní režim zpětné kompatibility).

Standardní režim

Standardní mód zajistí co možná nejjednotnější chování napříč nejpoužívanějšími prohlížeči. A umožní (hlavně v případě starých IE) využívat nové vlastnosti. Je tedy docela vhodné jej používat.

Rozdíly vykreslovacích režimů

Rozdíly v box-modelech

Nejzásadnější rozdíl je v počítání rozměrů bloků, tzv. box modelu v Internet Exploreru.

  1. Režim standardní / obsahový / box-sizing: content-box přičítá k rozměrům výšky/šířky elementu i rozměry paddingů a borderů,
  2. Režim nestandardní / quirk / okrajový / box-sizing: border-box respektuje zadané rozměry šířky/výšky a rámečky a odsazení provede „uvnitř“.

Jako výhodnější box-model se zdá být ten nestandardní, kde je šířka nastavená vlastností width konečná a rozměry borderu a paddingu na ní nemají vliv.

Některé komplikované CSS konstrukce se v okrajovém modelu (quirk) řeší lépe než v obsahovém (standardní režim) nebo jsou ve standardním režimu neřešitelné (bez přepnutí box-modelu).

Od IE 8 a prakticky ve všech ostatních prohlížečích jde box-model přepnout na úrovní CSS následujícím předpisem s využitím vlastnosti box-sizing:

*, *:before, *:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Ve starších IE byla jediná možnost, jak docílit výhodnějšího okrajového box-modelu, použít quirk režim. Pro starší Explorery sice existuje ještě boxsizing.htc, ale nejspíš to nebude fungovat 100% jako opravdový okrajový (border-box) box-model.

Prohlížeče mimo IE mají box-model stále stejný nezávisle na (ne)uvedení <doctype>.

Dědičnost velikosti písma v tabulce

V quirk režimu obsah tabulky nezdědí velikost písma od svého rodiče.

Text v tabulce a mimo tabulku tak bude mít jinou velikost. Ve standardním režimu ji bude mít stejnou.

<div style="120%">
  Text mimo tabulku
  <table>
    <tr>
      <td>Text v tabulce
    </tr>
  </table>
<div>

Zbavit se tohoto chování jde pomocí font-size: 100% pro tabulku.

Živá ukázka

Nepovinné jednotky px

V quirku se CSS jednotky uvedené bez rozměrů budou automaticky považovat za pixely. Následující zápis tak bude plně funkční:

element {
  width: 100;
  height: 100;
}

Při používání standardního režimu je nutné napsat 100px.

Další rozdíly

Výše uvedené rozdíly jsou nejzásadnější, existují ale ještě další odlišnosti:

Zpětně kompatibilní režim (quirk)

Quirk je v překladu rozmar, výstřelek nebo vrtoch.

Quirk režim se používal hlavně v minulosti, protože sjednocoval chování starých Explorerů (neznalých obsahového box-modelu – starší než IE 6). Nemuselo se potom tolik ladit pro různé verse IE.

Později (IE 6IE 7) byl quirk možnost, jak záměrně docílit v Internet Explorerech okrajového box-modelu.

„Almost Standards“

Některé prohlížeče mají ještě „skoro standardní“ režim, ten se ale liší jen velmi nepatrně od normálního standardního. (Více o tom na MDN.)

Historie <!doctype>

Před HTML 5 se objevovaly různé obskurní doctype jako:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html "-//W3C//DTD HTML 4.01//EN">

Či dokonce XHTML podoby:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Vzhledem k tomu, že <!doctype> slouží pouze k přepnutí režimu, používá se dnes převážně stručná podoba:

<!doctype html>

Přepínání versí HTML

Dříve se mohlo zdát, že <!doctype> slouží k přepínání versí (X)HTML.

To se ale nikdy nedělo a neděje, protože prohlížeče verse HTML nebo CSS nerozlišují.

Kromě přepínání vykreslovacího režimu tak má doctype vliv pouze na validátor.

Standardní, ne standart

V českém jazyce se přídavné jméno slova „standard“ píše s D.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Rozbalovací nabídka <select>

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

Převod inline CSS na externí

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

Vlastní HTML atributy

Vlastní atributy v HTML

Jak je to s vytvářením a používáním atributů s vlastními názvy v HTML stránce.

Chyby při programování

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

Nový řádek v HTML a CSS

Odřádkování v HTML a CSS

Jak v HTML, HTML atributu nebo CSS vložit nový řádek.

Komentáře