Módy prohlížečů
vliv !doctype na vykreslování stránky
Skoro každý si všimnul, že některé stránky vypadají v různých prohlížečích různě. Do značné míry za tu různost mohou vykreslovací režimy, kterým se také říká módy.
Všechny prohlížeče mají
- takzvaný quirk mód, označovaný též jako nestandardní, adaptivní nebo zpětně kompatibilní,
- a standardní mód. Občas ho označuji jako standardní vykreslovací režim.
Jak se to liší:
- V Internet Exploreru se oba módy dost liší. Kvůli tomu vznikla tato stránka.
- V ostatních prohlížečích (např. Firefox, Opera, Chrome), se standardní vykreslovací mód od quirk módu liší málo.
Standardní i nestandardní režimy se dají přepínat pomocí určitých zápisů doctype uvedených úplně na začátku HTML dokumentu. Kdo chce psát ve standardním módu, musí doctype používat.
Proč je spíše lepší psát ve standardním módu:
- Standardní módy moderních prohlížečů se od sebe navzájem liší málo. Takže se nemusí moc ladit.
- Quirk módy moderních prohlížečů se od sebe navzájem liší hodně. Musí se hodně ladit (o tom níze pojednává kapitola o hackování).
Standardní mód
Jde o režim vykreslování, který se snaží co nejvíc chovat podle specifikace W3C.
Začátek kódu stránky se striktním doctype vypadá třeba takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01">
<html>...
nebo též naštěstí prostě
<!doctype html>
<html>...
Vůbec nic tedy nezkazíte, pokud budete každou svou HTML stránku začínat zápisem <!doctype html>. Chytří čtenáři mohou namítnout, že to je doctype, který se vztahuje k HTML 5. Naštěstí jeho použití i na předchozí verze HTML nezpůsobí ve vykreslování stránky vůbec žádnou újmu.
Nestandardní QUIRK mód
Quirk mód záměrně porušuje pravidla W3C, aby umožnil správné zobrazení starých stránek. Quirk mód se někdy označuje jako adaptivní režim, protože se prohlížeč jakoby adaptuje na staré dobré časy, kdy se stránky prasily.
Quirk mód používají:
- všechny stránky zobrazené v Internet Exploreru, které nemají doctype
- staré verze Opery bez striktního doctype
- a všechny stránky, které mají doctype záměrně v takovém tvaru, aby se stránka přepnula do quirk módu.
Příklad zápisu doctype na začátku stránky vykreslovaný v Exploreru v quirk módu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>...
nebo prostě bez doctype -- také způsobí zapnutí quirk módu:
<html>
...
V Exploreru 6 se do Quirk módu přepínaly i dokumenty obsahující striktní doctype, pokud toto doctype není hned na první řádce (šlo o velmi nepříjemnou chybu Exploreru). Tuto chybu neumím už dnes nasimulovat (2010), asi to vyřešily nějaké service packy Widnows. V dalších verzích Exploreru se tato chyba neprojevuje.
V Internet Exploreru 9 se dá zjistit, v jakém režimu se stránka vykresluje, zapnutím Nástrojů pro vývojáře (F12).
V čem jsou rozdíly módů v Internet Exploreru
Prohlížeče se liší v tom, jak se liší jejich módy. Tato kapitola napřed probírá, v čem se liší módy v Exploreru. Platí to od Internet Exploreru verze 6.
Za podstatné považuji v Internet Exploreru tři rozdíly módů:
- jinak počítají šířku a výšku (boxmodel)
- jinak zobrazují velikost písma (quirk mód má písmo o stupeň větší)
- quirk mód dovoluje nastavovat rozměry řádkovým prvkům
- v quirk módu nefungují žádné moderní vlastnosti, jejichž podpora přišla až s verzemi IE 7 a vyššími, tedy například rgba barvy, max-width, průhlednost, outline, border-spacing a podobně. To neplatí pro IE 10, ve kterém tyto vlastnosti mají fungovat i ve quirk módu.
Právě kvůli nepodpoře moderních vychytávek CSS 2 a CSS 3 v Internet Exploreru dnes skoro nemá smysl používat záměrně quirk mód.
Počítání rozměrů, např šířky
Říká se tomu také boxmodel. Specifikace říká (a standardní mód to respektuje), že do rozměrů prvků se nepočítá rámeček (border) a vnitřní okraj (padding):
Oproti tomu quirk mód v Internet Exploreru do šířky počítá border i padding:
Protože Internet Explorer byl prvním prohlížečem se slušnou podporou CSS, používání nestandardního boxmodelu mezi autory hodně rozšířilo. To je i důvod, proč je hodně starších webů hnusných ve Firefoxu a proč konzervativní kodéři mají rádi tabulky -- nepochopili rozdíly boxmodelů a nenaučili se je hackovat.
Velikost písma
V různých režimech jsou jinak chápána klíčová slova pro velikost písma middle, large, small apod. Zjednodušeně lze říci, že Internet Explorer v quirk módu kreslí všechno o jeden stupeň větší.
Řádkové prvky
Standardní mód nedovoluje (zcela logicky) zadávat řádkovým prvkům rozměry (např. odkazům, tagu span apod.), občas mi to chybí. Nestandardní mód to dovoluje a občas to vede k podivným efektům. Částečná řešení nabízím níže.
Příklady rozdílů módů v Exploreru
Rozdíly módů ve všech prohlížečích
Tohle ještě budu muset pořádně otestovat, ale od Chamurappiho mám následující informaci.
V quirk módu:
- Tabulky nedědí velikost písma.
- V selektorech u
idse nerozlišují malá a velká písmena. - Není nutné uvádět pixely u rozměrů.
Mozilla (Firefox) v quirku odmítá načíst externí stylopis s jinou příponou než .css.
Pokus o diagram
Meta přepínání v IE 8
<meta http-equiv="X-UA-Compatible" content="IE=8">
(Tohle ještě budu muset testovat.) Píše se, že tenhle meta tag umí přepnout IE 8 do ještě standardnějšího módu, než do jaký je v IE 7. Pravděpodobně by se tímhle meta tagem dalo simulovat chování v IE 7 a IE6 změnou hodnoty parametru (ale kdo by to chtěl?)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Tohle by mělo způsobit, že se stránka vždycky přizpůsobí nejnovějšímu dostupnému módu.
Hackování šířky a výšky
Postupem času některé níže popisované techniky vyšly z módy. Nemám sílu je teď všechny testovat a je mi líto je mazat, tak snad oceníte některé nápady a pojmete to kriticky. Nejspolehlivější je stále matrjoška.
Ve standardním vykreslovacím módu se do šířky a výšky nezapočítává border (rámeček) a padding (vnitřní okraj). V nestandardním módu se do šířky a výšky border i padding počítá. Aby bylo zaručeno stejné (nebo alespoň podobné) vykreslení stránky v Internet Exploreru 5 (vždy quirk mód) a v Mozille (standardní mód), musí se kód ohackovat. Stejné hacky se dají použít i pro velikost písma (font-size).
Hack s uvozovkami
Můj oblíbený (ale nevalidní) hack spočívá v použití uvozovek kolem quirk hodnot:
.prvek {padding-left: 20px; width: 300px; width: "320px";}
první hodnota 300px je pro standardní režim, druhá hodnota v uvozovkách je pro nestandardní quirk režim. Internet Explorer 6 ve standardním módu hodnotu v uvozovkách nevidí.
Hack se zpětným lomítkem
Používá se stejně jako uvozovkový hack na odlišení standardních a nestandardních módů určitých prohlížečů.
prvek {padding-left: 20px; width: 320px; w\idth: 300px;}
Zpětné lomítko před nějakým vnitřním písmenkem zápisu vlastnosti způsobí, že standardní módy (Mozilla, Explorer 6 se standardním doctype, Opera se standardním doctype) vlastnost vidí a některé nestandardní módy (starší Explorery, Explorer 6 bez standardního doctype) takto zapsanou vlastnost nevidí (podporou si nejsem zcela jist, nutno vyzkoušet).
Pozor, zpětné lomítko nesmí být před písmenky a b c d e f, potom to nefunguje.
Hack s podtržítkem
Pokud se před jménem css vlastnosti uvede podtržítko (např. _height), Internet Explorer ho nevidí a vlastnost interpretuje, jako by byla zapsána bez podtržítka. Jiné prohlížeče (správně) interpretují vlastnost jako neznámou (pozor, včetně Opery). Zápis hacku by pak vypadal takto:
.prvek {padding-left: 20px; width: 300px; _width: 320px;}
Narozdíl od hacku s uvozovkami jde pravděpodobně o validní zápis. Internet Explorer ve standardním módu vlastnost _width vidí, a proto je tento hack použitelný spíše jenom v tom případě, kdy stránka bude v nestandardním (quirk) módu.
Hack s important a poznámkou
Výška 18 pixelů pro standardní mód a 24px pro nestandardní mód se dá udělat takhle:
.prvek {height:18px !important; height /**/:24px;}
totéž funguje pro šířku a všechny ostatní vlastnosti. Je to validní zápis a z validních zápisů je asi nejjednodušší.
Mozilla v nestandardním módu
Pokud máte starý design odladěný pro quirk mód Internet Exploreru, je nerychlejší řešení optimalizace pro Mozillu nastavit
* {-moz-box-sizing: border-box; box-sizing: border-box;}
CSS vlastnost box-sizing (případně proprietální vlastnost -moz-box-sizing) způsobí, že prohlížeč začne do výšky i šířky počítat padding a border. Bude to tedy počítat tak, jako staré verze Exploreru a dnešní quirk mód exploreru. Více o -moz-box-sizing.
Matrjoška
Matroška hack vyžaduje trochu ukecanější html kód, ale přijde mi na hackování rozměrů nejspolehlivejší. Zakládá se na tom, že se vůbec nepoužívá padding. Pokud nějakému prvku chcete přidat padding, uděláte to tak, že celý obsah prvku obalíte ještě jedním divem a tomu nastavíte margin. Margin se v obou režimech interpretuje stejně, takže nevznikají žádné odlišnosti. Příklad když chci mít prvek široký 300 pixelů včetně paddingu (jako by to odpovídalo quirk módu),
tak namísto
<div style="padding: 5px; backgound-color:
yellow; width: 300px;">
obsah prvku
</div>
stačí napsat
<div style="backgound-color: yellow; width: 300px;">
<div style="margin:
5px;">
obsah prvku
</div>
</div>
A další
Hacků na boxmodel existují desítky, ale připadají mi většinou málo použitelné.
Jak nastavit řádkovým prvkům rozměry
Je potřeba je převést je na jiný typ prvku, s jinou hodnotou vlastnosti display. Možná je to divná odpověď, ale je to tak. Pokud chcete mít i v Mozille i Exploreru stejný vzhled stránek, nejde se tomu vyhnout.
Typickým případem, kdy je třeba nastavit rozměry řádkovým prvkům, jsou odkazy v menu, vykreslované pod sebou.
Nastavení display: inline-block
Jednoduché řešení, určené přímo na tenhle problém. Objevil jsem ho až v roce 2010. Funguje i v Internet Exploreru 6 (a samozřejmě ve všech novějších prohlížečích). Ostatní nabízená řešení jsou tím do značné míry pasé.
Následující řešení tady nechávám jenom pro inspiraci, aby bylo vidět, jak složitě jsme museli kolem roku 2003 uvažovat:
Obalení blokovým prvkem
Jedním řešením je obalit každý odkaz třeba do odstavce nebo do divu -- prostě do jiného blokového prvku. Potom ostylovat ten vnější blokový prvek a přidat mu rozměry, například přes class:
<div class="polozkamenu">
<a href="druha-stranka">odkaz</a>
</div>
Aby se třeba hover efekt (změna při přejetí myší) projevil hezky i v Internet Exploreru, je třeba od tohoto řešení upustit. Pokud hover efekt nevyžadujete nebo vám stačí v jiných prohlížečích, jde o dobré řešení.
Převedení na blokový prvek
Když potřebuji třeba mít odkazy s určitými rozměry, nastavím odkazům blokové zobrazování:
<style>
a {display: block;}
</style>
V tu chvíli půjdou odkazům nastavovat rozměry, ale objeví se nepříjemnnost -- před a za každým odkazem se zalomí řádek. To většinou nejde akceptovat. Proto se dělá to, že se odkazům, které mají mít rozměr, přiřadí nějaká třída, třeba "rozmerovane":
<a href="jina-stranka.html" class="rozmerovane">odkaz</a>
a potom se ve stylu vyznačí, že takové prvky opravdu mají být na samostatném řádku a že mají mít rozměry:
a.rozmerovane {display: block; width: 12em; height: 1em;}
Taková věc se hodí zejména v nějakém menu, kde nevadí, že jsou odkazy pod sebou, ale na druhou stranu je potřeba, aby měly opticky stejné rozměry.
Rozplavání
Jedná se o obměnu předchozího postupu používané u různých menu horizontálních (proužkových). Tam se používá stejný trik s class, pouze se nastaví float, takže prvky budou vedle sebe:
a.rozmerovane {float: left; width: 12em; height: 1em;}
v tom případě se samozřejmě musí použít víc podobných odkazů za sebou a nesmí se to kombinovat s textem (úplně by někam uletěl). Dříve se takováto horizontální menu dělala pomocí obrázků v tabulkách, což je i dnes v některých případech nejspolehlivější způsob.
Jak přepínat módy
Stačí na začátku html souboru napsat doctype s určitou syntaxí. Více se tím zabývám v článku o doctype.
Jenom pro pořádek tu uvádím způsob, který používám pro přepínání módů v Internet Exploreru. Když dám dokument bez doctype nebo s chybným doctype, tak je v quirk módu. Stejně tak je v quirk módu je dokument s následujícím doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Takže to je quirk. A teď doctype, při němž Internet Explorer 6 přepne do standardního módu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Určitě vidíte, že rozdíl je tam v tom "Transitional". Doctypů se standardním vykreslováním je víc. Výše zmíněné přepínání funguje i pro starší verze Opery.
Reklama
