Navigace: Domů Dive Into HTML5


Detekujeme podporu HTML5

 

Jdeme na to

Mohli byste se ptát: „Jak můžu používat HTML5, když ho starší prohlížeče nepodporují?“ Ale byla by to zavádějící otázka. HTML5 se skládá z celé řady částí. Nemůžete proto detekovat, zda prohlížeč „podporuje HTML5“, protože by to nedávalo žádný smysl. Ovšem můžete detekovat podporu jednotlivých částí (vlastností) HTML5, např. zda prohlížeč podporuje canvas, video nebo geolokaci.

Techniky detekce

Když prohlížeč vykresluje webovou stránku, vytvoří Document Object Model (DOM), což je kolekce objektů, které představují jednotlivé HTML prvky stránky. Každý prvek — každý <p>, každý <div>, každý <span> — je v DOMu zvláštním objektem. (Existují také globální objekty, např. window a document, které se nevztahují k žádnému konkrétnímu prvku stránky.)

děvčátko, které se dívá z okna

Všechny objekty DOMu sdílí sadu společných vlastností, ovšem některé objekty mají některé vlastnosti navíc. V prohlížečích, které podporují vlastnosti HTML5, budou mít některé objekty unikátní vlastnosti. Rychlým pohledem na DOM tak zjistíme, které vlastnosti prohlížeč podporuje.

Existují čtyři základní techniky detekující konkrétní vlastnost v tom kterém prohlížeči. Ukážeme si je od nejjednodušší po tu nejsložitější:

  1. Ověřte, zda existuje jistá vlastnost globálního objektu (např. window nebo navigator).

    Příklad: test podpory geolokace

  2. Vytvořte HTML prvek a ověřte, zda u něj existuje jistá vlastnost.

    Příklad: text podpory canvasu

  3. Vytvořte HTML prvek, ověřte, zda u něj existuje jistá metoda, zavolejte ji a zkontrolujte návratovou hodnotu.

    Příklad: test podporovaných formátů videa

  4. Vytvořte HTML prvek, nastavte u něj vlastnost na jistou hodnotu a pak zkontrolujte, zda si vlastnost tuto hodnotu uchovala.

    Příklad: text podporovaných typů značky <input>

Modernizr, knihovna pro detekci HTML5

Modernizr je javascriptová open source knihovna (pod licencí MIT), která slouží k detekci řady vlastností HTML5 & CSS3. Měli byste vždy používat její nejnovější verzi. Pokud ji chcete použít, přidejte následující prvek <script> na začátek vaší webové stránky.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dive Into HTML5</title>
  <script src="modernizr.min.js"></script>
</head>
<body>
  ...
</body>
</html>

 ↜ Vložte do <head>

Modernizr se spouští automaticky. Nemusíte proto volat žádnou metodu typu modernizr_init(). Jakmile se spustí, vytvoří globální objekt jmenující se Modernizr, který obsahuje sadu logických (Boolean) vlastností pro každou detekovanou vlastnost. Například, pokud váš prohlížeč podporuje canvas API, tak vlastnost Modernizr.canvas bude rovna true. Pokud váš prohlížeč canvas API nepodporuje, tak bude vlastnost Modernizr.canvas mít hodnotu false.

if (Modernizr.canvas) {
  // něco honem nakreslíme!
} else {
  // žádná podpora canvasu 8-(
}

Canvas

muž rybařící na loďce

HTML5 definuje prvek <canvas> jako „na rozlišení závislé plátno, které lze použít pro kreslení grafů, herní grafiky nebo jiných obrázků za běhu.“ Prvek canvas vytvoří na vaší stránce obdélník, do kterého můžete JavaScriptem nakreslit cokoliv si budete přát. HTML5 definuje sadu funkcí („the canvas API“) pro kreslení tvarů, definování cest, tvorbu gradientů a používání transformací.

Test podpory canvas API používá detekční techniku #2. Pokud váš prohlížeč podporuje canvas API, pak objekt DOM reprezentující vytvořený prvek <canvas> bude obsahovat metodu getContext(). Pokud váš pohlížeč canvas API nepodporuje, tak objekt DOM reprezentující vytvořený prvek <canvas> bude mít pouze sadu běžných vlastností, ovšem žádnou z těch specifických pro canvas.

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

Tato funkce nejprve vytvoří prázdný prvek <canvas>, který ovšem není přidán do vaší stránky, takže jej nikdy nikdo neuvidí. Je vytvořený pouze v paměti počítače a plave si v ní odnikud nikam jako loďka po líné řece.

return !!document.createElement('canvas').getContext;

Na vytvořeném prázdném prvku <canvas> otestujeme přítomnost metody getContext(). Tuto metodu najdeme pouze v prohlížečích podporujících canvas API.

return !!document.createElement('canvas').getContext;

A konečně, použijeme fintu dvojí negace, abychom jako návratovou hodnotu funkce získali logickou hodnotu (true nebo false).

return !!document.createElement('canvas').getContext;

Tato funkce ověří podporu velké části canvas API, což zahrnuje tvary, cesty, gradienty & vzory. Nedokáže detekovat knihovny třetích stran jako je knihovna explorercanvas implementující canvas API do Microsoft Internet Exploreru.

Funkci nemusíte psát sami, místo toho můžete použít Modernizr, aby detekoval canvas API za vás.

otestuj podporu canvasu

if (Modernizr.canvas) {
  // něco honem nakreslíme!
} else {
  // žádná podpora canvasu 8-(
}

Nyní se podíváme na další test, který ověřuje podporu canvas text API.

Text v canvasu

baseballový hráč na pálce

I přestože váš prohlížeč podporuje canvas API, nemusí ještě nutně podporovat canvas text API. Canvas API se totiž postupně vyvíjelo a textové funkce byly přidány až později. Některé prohlížeče implementovaly canvas ještě před tím, než se objevilo text API.

Test na canvas text API používá detekční techniku #2. Pokud váš prohlížeč podporuje canvas API, pak objekt DOM reprezentující vytvořený prvek <canvas> bude obsahovat metodu getContext(). Pokud váš pohlížeč canvas API nepodporuje, tak objekt DOM reprezentující vytvořený prvek <canvas> bude mít pouze sadu běžných vlastností, ovšem žádnou z těch specifických pro canvas.

function supports_canvas_text() {
  if (!supports_canvas()) { return false; }
  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');
  return typeof context.fillText == 'function';
}

Tato funkce nejdřív otestuje základní podporu canvasu pomocí funkce supports_canvas(), kterou jste viděli v předchozí sekci. Pokud váš prohlížeč nepodporuje canvas API, pak zcela jistě nebude podporovat ani canvas text API.

if (!supports_canvas()) { return false; }

Dále vytvoříme prázdný prvek <canvas> a získáme jeho kreslicí kontext. To musí fungovat, protože funkce supports_canvas() už otestovala existenci metody getContext() na objektech canvasu.

  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');

Nakonec otestujeme, zda kreslicí kontext obsahuje funkci fillText(). Pokud ano, tak prohlížeč podporuje canvas text API. Hurá!

  return typeof context.fillText == 'function';

Funkci nemusíte psát sami, místo toho můžete použít Modernizr, aby detekoval canvas text API za vás.

zkusíme, zda canvas podporuje práci s textem

if (Modernizr.canvastext) {
  // honem něco napíšeme!
} else {
  // žádná podpora pro canvas text 8-(
}

Video

HTML5 definuje nový prvek <video> sloužící k vkládání videa do vašich webových stránek. Dříve bylo nemožné vložit na stránku video bez použití pluginů od třetích stran jako Apple QuickTime® nebo Adobe Flash®.

diváci v divadle

Prvek <video> byl navržen tak, aby byl použitelný bez jakéhokoliv detekčního skriptu. Můžete uvést několik video souborů a prohlížeče, které HTML5 video podporují, si z nich vyberou, podle toho, jaké formáty podporují. (Viz „A gentle introduction to video encoding“ part 1: container formats a part 2: lossy video codecs, kde se dozvíte víc o rozličných formátech videa.)

Prohlížeče, které nepodporují HTML5 video, budou prvek <video> zcela ignorovat. Toho ovšem můžete využít a nabídnout jim místo toho k přehrání video pomocí pluginu. Kroc Camen sestavil řešení nazvané Video for Everybody! (Video pro každého), které používá HTML5 video tam, kde je to možné, a ve starších prohlížečích využije QuickTime nebo Flash. Krocovo řešení navíc nepoužívá žádný JavaScript a funguje teoreticky ve všech prohlížečích včetně mobilních.

Pokud chcete s videem dělat víc, než ho jen umístit na stránku a přehrát, musíte už použít JavaScript. Test podpory videa využívá detekční techniku #2. Pokud váš prohlížeč podporuje HTML5 video, tak objekt DOM reprezentující vytvořený prvek <video> bude obsahovat metodu canPlayType(). Pokud váš prohlížeč nepodporuje HTML5 video, tak objekt DOM reprezentující vytvořený prvek <video> bude mít pouze sadu vlastností běžných pro všechny prvky HTML. Podporu videa můžete otestovat touto funkcí:

function supports_video() {
  return !!document.createElement('video').canPlayType;
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr, aby detekoval podporu HTML5 videa za vás.

ověř podporu HTML5 videa

if (Modernizr.video) {
  // pusťme si nějaké video!
} else {
  // nativní podpora videa není dostupná 8-(
  // mohli bychom zkusit otestovat podporu QuickTime nebo Flashe
}

V kapitole o videu popíšu další řešení, které používá tyto detekční techniky pro konverzi elementů <video> na kód pro videopřehrávače postavené na Flashi, což využijí prohlížeče, které HTML5 video nepodorují.

Nyní se podíváme na test pro detekci formátů videa, které dokáže prohlížeč přehrát.

Formáty videa

Formáty videa bychom mohli přirovnat k psaným jazykům. Noviny v češtině mohou sdělovat stejnou informaci jako španělské noviny, ovšem pokud umíte číst pouze česky, tak vám k něčemu budou pouze ty první. Aby prohlížeč mohl přehrát video, musí rozumět „jazyku“, kterým je video napsáno.

muž čtoucí noviny

Takový „jazyk“, ve kterém je video zapsáno, se nazývá „kodek“ — jedná se o algoritmus, podle kterého se video zakóduje do řady bitů. Existuje hromada kodeků, jenže který s nich máme použít? Skutečnost je smutná, prohlížeče se nedokázaly dohodnut na používání jednoho stejného kodeku. Ovšem, alespoň celou tu hromadu kodeků změnšily na pouhé dva. První kodek je placený (platí se licenční poplatky za patenty), ale funguje v Safari a na iPhone. (Funguje také ve Flashi, pokud použijete řešení typu Video for Everybody!.) Druhý kodek je zdarma a funguje v open source prohlížečích jako je Chromium a Mozilla Firefox.

Test podpory formátů videa používá detekční techniku #3. Pokud váš prohlížeč podporuje HTML5 video, tak objekt DOM reprezentující vytvořený prvek <video> bude obsahovat metodu canPlayType(). Tato metoda vám řekne, zda prohlížeč podporuje konkrétní formát videa.

Tato funkce otestuje patenty zatížený formát, který funguje na Macích a iPhonech.

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Funkce začíná otestováním podpory HTML5 videa pomocí funkce supports_video(), kterou jste poznali v předchozí sekci. Pokud váš prohlížeč nepodporuje HTML5 video, nebude také podporovat žádný formát videa.

  if (!supports_video()) { return false; }

Po té funkce vytvoří prázný prvek <video> (ovšem nevloží ho do stránky, takže nebude viditelný) a zavolá metodu canPlayType(). Ta musí existovat, protože to již ověřila funkce supports_video().

  var v = document.createElement("video");

„Formát videa“ je ve skutečnosti kombinací několika věcí. Technicky řečeno se prohlížeče ptáte, zda dokáže přehrát video v H.264 a zvuk v AAC LC, obojí vložené v kontejneru. (Co to všechno znamená si vysvětlíme v kapitole o videu. Může vás také zajímat článek A gentle introduction to video encoding.)

  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

Funkce canPlayType() nevrací prosté true nebo false. Podle toho, o jak komplexní formáty videa se jedná, vrací funkce řetezce:

Následující druhá funkce otestuje podporu otevřeného formátu videa, který podporuje Mozilla Firefox a další open source prohlížeče. Celý proces je stejný, s jediným rozdílem - v řetězci, který předáme funkci canPlayType(). Technicky řečeno se prohlížeče ptáte, zda dokáže přehrát video v Theora a zvuk ve Vorbis, to vše vložené do Ogg kontejneru.

function supports_ogg_theora_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

A konečně, WebM je nový open source (a patenty nezatížený) kodek videa, který bude obsažen v dalších verzích hlavních prohlížečů včetně Chrome, Firefoxu a Opery. Pro detekci podpory formátu videa WebM použijeme stejnou techniku.

function supports_webm_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

Funkce nemusíte psát sami, místo toho můžete použít Modernizr (1.5 nebo novější), aby detekoval jednotlivé formáty HTML5 videa.

otestuje podporované formáty HTML5 videa

if (Modernizr.video) {
  // pusťme si teď nějaké video! ale jaké?
  if (Modernizr.video.webm) {
    // zkusme WebM
  } else if (Modernizr.video.ogg) {
    // zkusme Ogg Theora + Vorbis v Ogg kontejneru
  } else if (Modernizr.video.h264){
    // zkusme H.264 video + AAC audio v MP4 kontejneru
  }
}

Local Storage

kabinet plný zásuvek rozličných rozměrů

HTML5 úložiště nabízí způsob, jakým mohou webové stránky uložit informace na váš počítač a později je znovu načíst. Jedná se podobný koncept jako byly cookies, ovšem je navržený pro větší množství informací. Cookies mají omezenou velikost a váš prohlížeč je zasílá zpět na server kdykoliv požádá o novou stránku (což zabírá čas i datové pásmo). HTML5 úložiště zůstává na vašem počítači, webové stránky k němu mohou přistoupit pomocí JavaScriptu.

Zeptejte se profesora Značky

OT: Je lokální úložiště skutečně součástí HTML5? Proč se nachází ve zvláštní specifikaci?
OD: Stručně řečeno ano, lokální úložitě je součástí HTML5. Trochu delší odpověd je, že lokální úložiště bylo součástí hlavní specifikace HTML5, ale bylo odděleno do zvláštní specifikace, protože některým členům pracovní skupiny pro HTML5 se nelíbilo, že je specifikace HTML5 příliš dlouhá. Pokud vám to zní jako rozkrájení koláče na menší kousky ve snaze snížit počet jeho kalorií, pak ano - vítejte v šíleném světě standardů.

Test podpory HTML5 úložiště využívá detekční techniku #1. Pokud váš prohlížeč podporuje HTML5 úložiště, pak bude na globálním objektu window existovat vlastnost localStorage. Pokud váš prohlížeč nepodporuje HTML5 úložiště, pak bude vlastnost localStorage nedefinovaná. Nepříjemná chyba ve starších verzích Firefoxu způsobuje, že tento test vyvolá výjimky, pokud je vypnutá podpora cookies, proto je nutné celý test vložit do bloku try..catch.

function supports_local_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch(e){
    return false;
  }
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr (1.1 nebo novější), aby detekoval podporu lokálního úložiště HTML5.

otestuj podporu lokálního úložiště HTML5

if (Modernizr.localstorage) {
  // window.localStorage je dostupné!
} else {
  // nativní podpora pro lokální úložiště neexistuje 8-(
  // mohli bychom ještě zkusit Gears nebo jiné řešení od třetích stran
}

Nezapomeňte, že JavaScript je case-sensitive. Vlastnost Modernizru se jmenuje localstorage (všechna písmena malá), ovšem vlastnost objektu DOM se jmenuje window.localStorage.

Zeptejte se profefora Značky

OT: Jak je moje HTML5 úložiště zabezpečené? Může ho kdokoliv přečíst?
OD: Kdokoliv, kdo má fyzický přístup k počítači by se mohl na data vašeho HTML5 úložiště podívat (nebo je dokonce změnit). V prohlížeči může každá webová stránka číst a upravovat svá vlastní data, ovšem nemůže přistupovat k datům uloženým z jiných webů. Říká se tomu same-origin restriction (omezení dle původu).

Web Workers

Web Workers nabízí standardizovanou cestu, jak mohou prohlížeče spouštět javascriptový kód na pozadí. S pomocí web workers můžete spustit několik „vláken“ a ty pak mohou běžet více méně ve stejném čase. (Stačí, když si představíte, že váš počítač dokáže současně spustit několik aplikací, je to skoro to samé.) Tato „vlákna na pozadí“ mohou provádět složité matematické výpočty a síťové požadavky nebo přistupovat k local storage zatímco hlavní webová stránka reaguje na akce uživatele, ať už se jedná o skrolování, klikání nebo psaní.

Test podpory web workers využívá detekční techniku #1. Pokud váš prohlížeč podporuje Web Worker API, bude u globálního objektu window existovat vlastnost Worker. Pokud váš prohlížeč nepodporuje Web Worker API, pak bude vlastnost Worker nedefinovaná.

function supports_web_workers() {
  return !!window.Worker;
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr (1.1 nebo novější), aby detekoval podporu web workers.

otestuj podporu web workers

if (Modernizr.webworkers) {
  // window.Worker je dostupné!
} else {
  // chybí nativní podpora pro web workers 8-(
  // můžeme vyzkoušet Gears nebo jiný plugin třetích stran
}

Nezapomeňte, že JavaScript je case-sensitive. Vlastnost Modernizru se jmenuje webworkers (všechna písmena malá), ovšem vlastnost objektu DOM se jmenuje window.Worker.

Offline webové aplikace

chata v lesích

Je snadné číst webové stránky, když jste offline: stačí se připojit k internetu, načíst webovou stránku, odpojit se od internetu, odjet na opuštěnou chatu a tam si vklidu stránku přečíst. (Abyste ušetřili čas, klidně přeskočte ten krok s chatou.) Ovšem, co webové aplikace jako jsou Gmail nebo Dokumenty Google? S HTML5 může kdokoliv (nejen Google!) vytvářet aplikace, které fungují offline.

Offline webové aplikace začínají jako online webové aplikace. Když prvně navštívíte aplikaci podporující režim offline, webový server řekne prohlížeči, které soubory bude potřebovat, aby mohla fungovat offline. Může se jednat o jakékoliv soubory — HTML, JavaScript, obrázky, dokonce videa. Jakmile váš prohlížeč stáhne všechny potřebné soubory, můžete stránku znovu navštívit, i když nejste připojeni k internetu. Váš prohlížeč si všimne, že jste právě offline a použije soubory, které si předtím stáhnul. Jakmile se opět připojíte online, všechny změny, které jste provedli, se nahrají na vzdálený webový server.

Test na podporu pro offline používá detekční techniku #1. Pokud váš prohlížeč podporuje offline webové aplikace, bude u globálního objektu window existovat vlastnost applicationCache. Pokud váš prohlížeč offline webové aplikace nepodporuje, pak bude vlastnost applicationCache nedefinovaná. Podporu pro offline webové aplikace můžete otestovat následující funkcí:

function supports_offline() {
  return !!window.applicationCache;
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr (1.1 nebo novější), aby podporu detekoval.

otestuj podporu pro offline webové aplikace

if (Modernizr.applicationcache) {
  // window.applicationCache je dostupné!
} else {
  // native podpora offline aplikací není dostupná 8-(
  // můžeme vyzkoušet Gears nebo jiný plugin třetích stran
}

Nezapomeňte, že JavaScript je case-sensitive. Vlastnost Modernizru se jmenuje applicationcache (všechna písmena malá), ovšem vlastnost objektu DOM se jmenuje window.applicationCache.

Geolokace

Pomocí geolokace lze jistit, kde na světě se právě teď nacházíte a (volitelně) oznámit tuto informaci lidem, kterým důvěřujete. Existuje několik způsobů, jak je možné zjistit, kde se právě nacházíte — vaše IP adresa, vaše bezdrátové připojení k síti, přes které buňky telefonní sítě jste připojeni nebo vyhrazený GPS hardware, který spočítá vaši zeměpisnou šířku a délku na základě informací zaslaných satelity z oblohy.

muž s globusem místo hlavy

Zeptejte se profesora Značky

OT: Je geolokace součástí HTML5? Proč o ní hovoříte?
OD: Podpora pro geolokaci je do prohlížečů přidávána právě teď, ve stejnou dobu, kdy se do prohlížečů přidávají nové vlastnosti HTML5. Přesně řečeno, geolokace je standardizována pracovní skupinou pro geolokaci, která je nezávislá na pracovní skupině pro HTML5. Ovšem já do této knížky geolokaci stejně zahrnu, protože se jedná o součást evoluce webu, ke které dochází právě teď.

Test podpory geolokace používá detekční techniku #1. Pokud váš prohlížeč podporuje geolocation API, bude u globálního objektu navigator existovat vlastnost geolocation. Pokud váš prohlížeč geolocation API nepodporuje, tak vlastnost geolocation bude nedefinovaná. Podívejme se, jak otestovat podporu geolokace:

function supports_geolocation() {
  return !!navigator.geolocation;
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr, který podporu geolocation API otestuje.

otestuj podporu geolokace

if (Modernizr.geolocation) {
  // tak a teď se podíváme, kde právě jsi!
} else {
  // nativní podpora pro geolokace není dostupná 8-(
  // můžeme vyzkoušet Gears nebo jiný plugin třetích stran
}

Pokud váš prohlížeč geolocation API nativně nepodporuje, stále ještě zbývá naděje. Gears je open source plugin od Googlu, který funguje na Windows, Macu, Linuxu, Windows Mobile a Androidu. Nabízí některé vlastnosti starším prohlížečům, které nepodporují novinky zmiňované v této kapitole. Jednou z vlastností, kterou Gears nabízí, je geolocation API. Není zcela stejné jako navigator.geolocation API, ale slouží ke stejnému účelu.

Existují také geolocation API specifická pro jednotlivá zařízení, ta najdeme na starších mobilních platformách včetně BlackBerry, Nokia, Palm, a OMTP BONDI.

Kapitola o geolokaci vás zasvětí do detailů toho, jak můžete tato odlišná API používat.

Typy značky input

psací stroj

O webových formulářích jste již určitě slyšeli, že? Vytvoříte <form>, přidáte několik prvků <input type="text">, možná i <input type="password"> a všechno ukončíte tlačítkem <input type="submit">.

Jenže to toho víte stěží polovinu. HTML5 přidává přes tucet nových typů značky input, které můžete použít ve vašich formulářích.

  1. <input type="search"> pro vyhledávací boxy
  2. <input type="number"> pro zadávání čísel
  3. <input type="range"> pro posuvníky
  4. <input type="color"> pro výběr barev
  5. <input type="tel"> pro telefonní čísla
  6. <input type="url"> pro webové adresy
  7. <input type="email"> pro e-mailové adresy
  8. <input type="date"> pro výběr data v kalendáři
  9. <input type="month"> pro výběr měsíce
  10. <input type="week"> pro výběr týdne
  11. <input type="time"> pro výběr času
  12. <input type="datetime"> pro výběr přesného absolutního údaje datum + čas
  13. <input type="datetime-local"> pro lokální datum a čas

Test podpory nových HTML5 typů značky input používá detekční techniku #4. Napřed vytvoříme prázdný prvek <input> v paměti. Výchozím typem pro všechny prvky <input> je "text". To se hned ukáže jako velmi důležité.

  var i = document.createElement("input");

Po té nastavíme atribut type námi vytvořeného prvku <input> na typ, který chceme detekovat.

  i.setAttribute("type", "color");

Pokud prohlížeč daný typ podporuje, pak bude vlastnost type mít hodnotu, kterou jsme jí zadali. Pokud prohlížeč daný typ nepodporuje, bude námi zadanou hodnotu ignorovat a vlastnost type bude stále "text".

  return i.type !== "text";

Než abyste psali všech 13 funkcí sami, můžete použít Modernizr, který detekci všech nových typů definovaných v HTML5 provede za vás. Modernizr používá jeden jediný prvek <input>, aby efektivně otestoval podporu všech 13 typů. Následně vytvoří asociativní pole nazvané Modernizr.inputtypes, které obsahuje 13 klíčů (názvy jednotlivých typů) a 13 logických hodnot (true pokud typ prohlížeč podporuje, false když ne).

otestování podpory pro výběr data

if (!Modernizr.inputtypes.date) {
  // chybí nativní podpora pro <input type="date"> 8-(
  // můžete sami vytvořit pomocí Dojo nebo jQueryUI
}

Placeholder (textová nápověda)

Vedle nových typů značky input přidává HTML5 do formulářů několik menších vylepšení. Jedním z nich je možnost nastavit vlastnost placeholder pro pole input. Tzv. placeholder slouží jako nápověda, jedná se o text, který se zobrazí uvnitř pole input v případě, že je pole prázdné a nemá fokus. Jakmile na pole kliknete (nebo se na ně přemístíte tabulátorem) placeholder zmizí. Kapitola o webových formulářích obsahuje screenshoty, pokud si to nedokážete sami představit.

Test podpory placeholderu využívá detekční techniku #2. Pokud váš prohlížeč podporuje placeholder v polích input, pak bude mít objekt DOM reprezentující vytvořený prvek <input> vlastnost placeholder (a to i v případě, že jste v HTML žádný atribut placeholder neuvedli). Pokud váš prohlížeč placeholder nepodporuje, tak objekt DOM reprezentující prvek <input> nebude mít vlastnost placeholder.

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr (1.1 nebo novější), aby detekoval podoru placeholderu.

otestuj podporu placeholderu

if (Modernizr.input.placeholder) {
  // váš placeholder by měl být už viditelný!
} else {
  // žádná podpora pro placeholder 8-(
  // spusťme fall back pomocí JavaScriptu
}

Autofocus formulářů

rozčilený chlap se zvednutýma rukama

Webové stránky mohou používat JavaScript, aby automaticky předaly fokus formulářovému poli. Např. titulní stránka Google.cz automaticky předá fokus textovému poli, takže můžete rovnou začít psát váš dotaz, aniž byste museli přemisťovat kurzor do vyhledávacího pole. Ačkoliv to většině uživatelů vyhovuje, může to rušit pokročilé uživatele nebo uživatele se specifickými potřebami. Pokud stisknete mezerník a očekáváte odstránkování webové stránky, stránka se neposune, protože fokus je již v textovém poli. (Místo toho prostě napíšete mezeru.) Pokud během načítání stránky vyberete odlišné formulářové pole, skript stránky stejně ve „snaze pomoci“ přesune fokus na výchozí formulářové pole a vy tak můžete psát na místo, kam jste psát nechtěli.

Jelikož se autofocus řeší JavaScriptem, není jednoduché vyřešit všechny zmíněné případy, a kdo by se také zdržoval s uživateli, kteří nechtějí, aby jim webová stránka kradla fokus?

Jako řešení představilo HTML5 atribut autofocus pro formulářová pole. Atribut autofocus dělá přesně to, co říká: přemístí fokus na zvolené vstupní pole. Jelikož je vše řešeno na úrovni značkovacího jazyka a nikoliv JavaScriptu, bude toto chování jednotné pro všechny webové stránky. Výrobci prohlížečů (nebo autoři rozšíření) mohou uživatelům nabídnout možnost autofocus vypnout.

Test podpory autofokusu používá detekční techniku #2. Pokud váš prohlížeč podporuje autofokus webových formulářů, bude mít objekt DOM reprezentující vytvořený prvek <input> vlastnost autofocus (a to i v případě, pokud jste do HTML atribut autofocus nezapsali). Pokud váš prohlížeč nepodporuje autofokus webových formulářů, objekt DOM reprezentující vytvořený prvek <input> nebude mít vlastnost autofocus. K detekci můžete použít tuto funkci:

function supports_input_autofocus() {
  var i = document.createElement('input');
  return 'autofocus' in i;
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr (1.1 nebo novější).

test podpory autofokusu

if (Modernizr.input.autofocus) {
  // autofokus funguje!
} else {
  // chybí podpora pro autofocus 8-(
  // zkusme javascriptové řešení
}

Mikrodata

kartotéka podle abecedy

Mikrodata je standardizovaný způsob pro vkládání další sémantiky do vašich webových stránek. Můžete např. použít mikrodata pro zdůraznění, že daná fotografie je dostupná pod danou Creative Commons licencí. Jak uvidíte v kapitole o distributed extensibility, můžete použít mikrodata k označkování stránky „O mně“. Prohlížeče, rozšíření prohlížečů a vyhledávače mohou zkonvertovat HTML5 mikrodata na vCard, což je standardizovaný formát pro sdílení kontaktů. Můžete také definovat své vlastní slovníky pro mikrodata.

Standard pro HTML5 mikrodata zahrnuje jak HTML značkování (zejména pro vyhledávače) tak sadu funkcí DOM (primárně pro prohlížeče). Použitím mikrodat na vašich webových stránkách nemůžete nic zkazit. Nejedná se o nic víc, než několik správně umístěných atributů; vyhledávače, které mikrodatům nerozumí, je budou prostě ignorovat. Ovšem, pokud potřebujete přistupovat a pracovat s mikrodaty skrze DOM, musíte napřed otestovat, zda prohlížeč podporuje microdata DOM API.

Test podpory HTML5 microdata API používá detekční techniku #1. Pokud váš prohlížeč podporuje HTML5 microdata API, pak na globálním objektu document bude existovat funkce getItems(). Pokud váš prohlížeč microdata nepodporuje, pak bude funkce getItems() nedefinovaná.

function supports_microdata_api() {
  return !!document.getItems;
}

Modernizr zatím ještě neobsahuje detekci podpory pro microdata API, musíte proto použít funkci napsanou výše.

History API

démon čtoučí knížku

HTML5 history API je standardizovaný způsob práce s historií prohlížeče pomocí skriptu. Část tohoto API — navigování historií — byla dostupná v předchozích verzích HTML. V HTML5 přibyla možnost přidávat nové položky do historie prohlížeče a reagovat, pokud se tlačítkem „Zpět“ prohlížeče změní hladina zásobníku těchto položek. To znamená, že URL může i nadále sloužit jako jedinečný identifikátor daného zdroje, dokonce i pro komplikovanou javascriptovou aplikaci, která příliš často neprovádí načtení celé nové stránky.

Test podpory HTML5 history API využívá detekční techniku #1. Pokud váš prohlížeč podporuje HTML5 history API, bude u globálního objektu history existovat funkce pushState(). Pokud váš prohlížeč nepodporuje history API, nebude funkce pushState() definovaná.

function supports_history_api() {
  return !!(window.history && history.pushState);
}

Funkci nemusíte psát sami, místo toho můžete použít Modernizr (1.6 nebo novější).

test podpory history API

if (Modernizr.history) {
  // správa historie funguje!
} else {
  // chybí podpora pro history API 8-(
  // zkusme javascriptové řešení, např. History.js
}

Další čtení

Specifikace a standardy:

Javascriptové knihovny:

Dalšá články a návody:

Dočetli jste kapitolu „Detekujeme podporu HTML5.“ Pokud chcete pokračovat, přejděte na celý obsah knihy.

Víte že?

O’Reilly spolu s Google Press nabízí anglickou verzi této knihy v řadě formátů včetně tištěné pdoby, ePub, Mobi, and DRM-free PDF. Placená verze se nazývá „HTML5: Up & Running,“ a můžete ji mít ihned.

Pokud se vám tahle kapitola líbila a chcete autora anglického originálu podpořit, kupte si „HTML5: Up & Running“ skrze tento affiliate odkaz nebo elektronickou verzi přímo od O’Reilly. Vy dostanete knihu, já peníze. V současnosti nepřijímám přímé dary.

Copyright MMIX–MMXI Mark Pilgrim, Czech translation Martin Hassman