Přestože HTML5 je dnes již standardem, můžeme se stále setkat s tím, že ne každý webový prohlížeč jej plně podporuje. Proto při tvorbě webových stránek musíme mít tento fakt na mysli. Pojďme si ukázat jak podporu HTML5 detekovat.
Detekce HTML5
Samotný HTML5 nemá pro detekci podpory HTML5 element podobný tagu NOSCRIPT, jehož obsah by se zobrazil jako u vypnutého JacaScriptu. Z toho důvodu musíme detekci provést pomocí JavasScriptu, kterým budeme vytvářet různé elementy, a budeme zjišťovat jakým způsobem se vytvořily. Pokud vás v tuto chvíli berou mdloby, tak věřte, že celá detekce dá jednoduše automatizovat díky knihovně modernizr.js velmi snadno.
Než se pustíme do knihovny modernizr.js, pojďme si ukázat detekci pomocí JS. Nejjednodušší způsob je třeba následujcí:
[js]
function supports_canvas() {
return !!document.createElement(‚canvas‘).getContext;
}
[/js]
JS funkce vytváří element canvas s metodou getContent(). Pokud prohlížeč podporuje HTML5, vrátí funkce TRUE, pokud ne FALSE. Pokud vás zajímá, proč jsou na řádku dva !! (dvojitá negace), pak je to proto, abychom donutili vrátit výsledek jen jako TRUE nebo FALSE.
Protože ne každý prohlížeč s podporou HTML5 podporuje všechny elementy nebo jejich atributy, vznikla potřeba detekovat podporu každého zvlášť. Na to se specializuje knihovna modernizr.js, kterou najdete na webu http://modernizr.com. Zde si můžete on-line vygenerovat a stáhnout extra knihovnu pro detekci jednoho nebo i více HTML elementů.
Vygenerovanou knihovnu jednoduše přidáte do hlavičky
[html]<script src="modernizr.min.js"></script>[/html]
Knihovna se po načtení stránky sama spustí a vytvoří globální objekt Modernizr s vámi vybranými vlastnostmi (boolen), které stačí testovat na TRUE, FALSE viz. příklad.
[js]
if (Modernizr.canvas) {
// Pojďme si kreslit
} else {
// Bohužel, vyndejte si papír a pero
}
//nebo třeba
if (<mark>Modernizr.video</mark>) {
// Jdeme se koukat na video
} else {
// dnes se budeme koukat na plápolající oheň krbu
}
[/js]
Tímto uvedeným způsobem můžete testovat podporu různých vlastností prohlížečů.