HTML 5 – Různé prohlížeče

Začínající programátoři webů si často neuvědomují jeden problém – v různých prohlížečích se stejná stránka zobrazí různě. A o tom je tato kapitola.

Jak již víme, po prvním HTML se začalo vyvíjet HTML 2. Ale než se vyvinulo, různé prohlížeče si začaly vymýšlet různé nové funkce. Proto při psaní HTML kódu musíme brát ohled na všechny prohlížeče, pokud chceme docílit, aby si stránky prohlíželi všichni.

Protože stránku nemůžeme zkoušet ve všech prohlížečích, je potřeba ji v praxi zkusit alespoň ve čtyřech nejrozšířenějších (ty ostatní se jim podobají) – Internet Explorer, Mozilla Firefox, Opera a Google Chrome.

Nejvíce odlišný prohlížeč je Internet Explorer od Microsoftu, proto se mu budeme věnovat. Dnes jsou nejčastější verze 8, která se trochu přiblížila standardu HTML a nejnovější verze 10, jedno nebo druhé používá asi čtvrtina uživatelů IE. Nalezneme ho jen ve Windowsech, ale protože tu je už od výroby, tak ho používalo hodně uživatelů (leden 2007 58,6% uživatelů, leden 2010 36,2%) ale používanost klesá (září 2013 již jen 12,1%).

Dříve byl normální, pak špatný, a od verze 6 se zlepšuje. IE 10 nabízí již poměrně slušnější podporu CSS3 a HTML 5, a hardwarovou akceleraci, přesto se však příliš nevyrovná ostatním posledním verzím prohlížečů, IE 8 má mód kompatibility, který stránku zobrazí jako ve starších verzích. Dnes nepoužívá IE 7 a nižší téměř nikdo, IE 8 4,6%, IE 9 2,8% lidí a IE 10 asi 4% lidí.

Mozilla je veliké odvětví prohlížečů, z něhož nejznámější a dodnes nejlepším je Firefox (ohnivá liška). Je založen na jádru Gecko. Je pro všechny možné platformy (operační systémy) a podporuje CSS 3, DOM2 i javascript mnohem lépe než Explorer. Dnes má také nejvíce doplňků, je a vždy byla velice rozšířená. V prosinci 2008 byla stejně rozšířená jako Explorer (45%), špičky dosáhla v červenci následujícího roku (48%) a pak se používanost začala pomalu snižovat, dnes ji používá 28% uživatelů, a to verzi 23 (kvůli rychlému vývoji verzí se však počet uživatelů pořád posouvá výše směrem k novější verzi).

Opera byla dříve placený prohlížeč, nebo prohlížeč s reklamními bannery, ale od verze 8.5 je zdarma bez bannerů jako každý známý prohlížeč. Přestože je dobrý, používá ho jen 1,7% uživatelů. Stránky umí vykreslovat jako Explorer i standardně a rychle. Jejím hlavním přínosem je možnost blokovat obrázky a tím šetřit čas při načítání stránek pouze textově. Pro některé uživatele je však zbytečně složitá a proto se jí vyhýbají.

Na podzim 2008 se náhle objevil nový prohlížeč Google Chrome od Googlu, což je dnes jedna z nejvíce prosperujících společností na světě, i když dává vše zdarma. Vydáním nového prohlížeče chce docílit více možností internetu. Chrome je založen na jádru Webkit, je velice rychlý, šikovný, ‚malý‘ (zabírá jen dva řádky nahoře, ostatní je stránka) a stránku vykresluje dokonale. Každou stránku řadí do nového procesu, takže když spadne tak ostatní stránky fungují dále. Jeho hlavním přínosem je vývoj tzv. omniboxu – adresní řádek, který funguje jako vyhledávač, zároveň prohledává internet i webovou historii a mnoho dalšího. Verze označuje po celých číslech, dnes je verze 29. Je pro něj mnoho motivů a rozšíření. Už ve verzi 1 jej používalo 3% uživatelů, dnes 53,2% a je tedy nejpoužívanějším prohlížečem, jemuž konkuruje pouze Mozilla Firefox.

Další prohlížeč, který stojí za zmínění, je Netscape 4. Je to úplná katastrofa, dnes už se naštěstí nepoužívá. Nesmíme si ho však plést s Netscapem 6, 7 nebo 8. Netscape 5 se nechal vyvíjet jako open-source, tak vznikla Mozilla s jádrem Gecko. Z té se pak zase začal vyvíjet Netscape 6, který se nepoužívá ale není tak špatný. Když se dnes mluví o Netscapu, myslí se tím Netscape 4. Netscape 6 a dál se označuje jako Mozilla, Mozilla Firefox nebo Firefox.

Mezi další používané prohlížeče patří Safari a Konqueror. Oba jsou podobné. Safari je používán hlavně v OS X nebo iOS (vyvinul ho Apple) ale funguje i na Windows, Konqueror je na Linuxu.

Když vyvíjíte web, máte několik možností, jak ho udělat funkčním ve všech prohlížečích. Pomineme možnost, že napíšete, ať návštěvníci používají tenhle prohlížeč, že v ostatních prohlížečích to nefunguje, což silně nedoporučuji.

První možností je optimalizace. Stránku naprogramujete v jednom prohlížeči a doufáte, že v ostatních se to zobrazí dobře. Ačkoli to není profesionální způsob, pro začátečníky je dobrý, protože je rychlý a jednoduchý. Výsledek také nebude zas tak špatný – je pravděpodobné, že v ostatních prohlížečích se stránka zobrazí stejně, nebo jen nebude tak „dokonalá“.

Nejjednodušší způsob, i když nehezký, je jednoduchost. Udělejte stránku jednoduše, pak ji přečte každý prohlížeč stejně.

Pokus a oprava – udělejte stránky optimalizované pro jeden prohlížeč a pak laďte chyby. Je to pracná metoda, ale vykazuje dobrý výsledek a používají ji i profesionálové. Dříve se nejprve psalo pro Explorer, dnes je dobré psát nejprve pro Chrome, případně Firefox. Když dlouho používáte tuto metodu, získáte znalosti rozdílů. Je to těžká metoda na naučení, ale pak je rychlá a účinná.

Možností, jak odlišit interpretaci kódu v různých prohlížečích (tzv. hacků) je mnoho, avšak se s každou novou verzí prohlížeče mění, takže nemá cenu je tady vypisovat. Jediný zajímavý a jednoduchý hack jsou tzv. podmíněné komentáře.

Podmíněné komentáře jsou metodou, jak zobrazit nějaký obsah jen v některé verzi Exploreru (nebo vůbec v Exploreru) nebo ho jen v té verzi ignorovat. Jiné prohlížeče podmíněné komentáře nemají, ale v praxi je Explorer nejrozdílnější, takže to moc nevadí.

<!–[if IE]>

tento text ignorují všechny prohlížeče kromě Exploreru

<![endif]–>

Explorer za začátkem poznámky vyhodnocuje podmínky v hranatých závorkách, jsou-li platné, interpretuje i to co je v komentáři. Ostatní prohlížeče žádné podmínky neznají a berou to jako komentář.

<![if !IE]>

toto Explorer ignoruje a ostatní to berou jako normální kód

<![endif]>

Explorer dále interpretuje sekvenci <![podmínka]>. Pokud je tato podmínka platná, sekvenci ignoruje. Pokud je neplatná, nahradí to začátkem poznámky (následující text ignoruje). Mimochodem – <![if !IE]> je nevalidní.

Podmínky: [if IE] znamená jen pro Explorer. [if IE 6] znamená jen pro IE 6.

[if lt IE 7] – nižší než IE 7

[if lte IE 7] – nižžší nebo rovno IE 7

[if gt IE 7] – vyšší než IE 7

[if (IE 6)|(IE 8)] – IE 6 nebo IE 8; existuje také operátor & – a zároveň, ale nevím k čemu je

[if !(IE 8)] – IE 8 ne, ostatní ano

Podmíněné komentáře mají malé využití, proto je pro začátečníky nemá smysl používat, ale i tak mi přišlo dobré něco o nich napsat.