Přejít k navigační liště

Zdroják » Webdesign » Změřte si reálnou podporu HTML5

Změřte si reálnou podporu HTML5

Články Webdesign

V minulém článku o HTML5 mnozí komentující psali: „Dokud nebude podpora HTML5 větší, nemá smysl se jím zabývat“. Ale jaká je ta podpora HTML5? Kolik procent návštěvníků vašich stránek má canvas, kolik geolokaci, WebWorkers, stínování atd.? Víte to, nebo jen odhadujete ze statistiky prohlížečů?

Usuzovat ze statistiky prohlížečů na podporu či nepodporu technologií z rodiny HTML5 je poměrně krátkozraké. Nelze totiž jednoduše říct: „XX procent má IE6–8, takže podporu HTML5 nemají!“ HTML5 není, jak jsme si už několikrát na těchto stránkách připomínali, jedna jediná technologie a její podpora není „ano / ne“. Je to celá řada technologií, které jsou v různém stádiu implementace v různých prohlížečích.

Ostatně největší problém „usuzování na schopnosti podle UA“ se ukázal právě po příchodu IE9 – mnohé weby, které používaly jednoduché přiřazení „IE? → Zastaralé!“, jsou v IE9 „rozbité“ a je nutné je přepnout do „kompatibilní­ho módu“.

Mnohem lepší je použít nějaký nástroj pro zjištění podporovaných technologií, typicky např. Modernizr.

Měření

Autor článku nasadil měřicí kód, založený právě na Modernizru, na svůj osobní web. Měření probíhalo pouze u návštěvníků, kteří nemají zablokované cookies a kteří mají povolený JavaScript. Kvůli relativně velké časové náročnosti testů, které Modernizr dělá, probíhalo vlastní měření dvojfázově – nejprve byla nastavená hodnota cookie na „měřit“. Při druhé návštěvě (načtení další stránky z webu) byla hodnota kontrolována, a buď se provedlo měření a výsledky uložily, nebo již bylo změřeno a neukládalo se nic.

Měření tedy nepodchytilo návštěvníky, co měli zakázané cookies, zakázaný JavaScript nebo kteří načetli ve sledovaném období pouze jednu jedinou stránku. Rovněž nasazením na osobních stránkách byla ovlivněna skladba návštěvníků; relevantnější výsledky by byly např. při měření na obecném portálu. Berme proto výsledky „cum grano salis“ a spíš než absolutní čísla je vnímejme jako inspiraci pro obdobný pokus, např. na vlastních stránkách, e-shopu, portálu… Možná zjistíte, že podpora některých technologií z rodiny HTML5 je mezi uživateli mnohem vyšší, než se domníváte.

Výsledky

Ve sledovaném období (minulý týden) přišlo na stránky 1538 měřitelných návštěvníků (=prohlížečů, každý prohlížeč se započítal během celého období pouze jednou, díky cookies, viz metodika). Analýzou accesslogů bylo zjištěno 94 návštěvníků, kteří změřeni nebyli – především indexovací roboti (18) a pak návštěvníci s blokovaným JS/cookies (76). Necelých 5 % tedy nebylo možné změřit a lze je započítat do škatulky „nepodporuje“ (resp. „tyto technologie jsou stěží využitelné“).

Na úvod si zopakujeme tabulku z předchozího článku, která udává podporu mezi webdesignéry:

Používané technologické novinky z rodiny HTML5 (v procentech)
Technologie Často Zřídka Nikdy
Video 7 23 70
Audio 5 20 75
Canvas 9 25 67
SVG 8 29 64
WebForms 19 30 51
Fonty 24 29 48
CSS stínování 43 26 31
CSS kulaté rohy 51 25 24
AppCache, WebStorage 6 22 72
Web Workers 2 8 90
Web Sockets 3 8 90

A nyní stejnou tabulku s reálnou podporou daných technologií ve změřeném vzorku návštěvníků:

Podporované technologické novinky z rodiny HTML5
Technologie Podpora v prohlížečích (%)
Video 82
Audio 90
Canvas 93
SVG 91
WebForms 72
Fonty 98
CSS stínování 93
CSS kulaté rohy 93
AppCache, WebStorage 89, 95
Web Workers 85
Web Sockets 38

Podívejme se na tato čísla podrobněji:

Technologie Podpora (%) Technologie Podpora (%)
Flexbox 77 Canvas 93
Canvastext 87 WebGL 52
Geolokace 92 Postmessage 98
Web SQL database 53 IndexedDB 24
Hashchange 95 Draganddrop 85
Websockets 38 rgba() 93
hsla() 93 multiplebgs 91
backgroundsize 91 borderimage 91
borderradius 93 boxshadow 93
textshadow 91 opacity 93
cssanimations 40 csscolumns 83
cssgradients 81 cssreflections 40
csstransforms 91 csstransforms3d 8
csstransitions 72 fontface 98
Video celkem 82,5 Video ogv 82,4
Video h264 32 Video webm 64
Audio celkem 90 Audio ogg 82
Audio mp3 32 Audio wav 86
Audio m4a 40 Local storage 95
Session storage 96 WebWorkers 85
Applicationcache 89 SVG 91
inline SVG 52 SMIL 73
SVG clip paths 91 autofocus 72
placeholder 71 max 53
min 53 multiple 87
pattern 72 required 72
step 53 input type=search 71
input type=tel 71 input type=url 70
input type=email 70 input type=number 44
input type=range 48 crosswindowmes­saging 98
historymanagement 58

Před cca osmi lety byl zcela běžný argument „Mozilla má 15 %, pro ni nemá smysl ladit weby“. Kdybychom použili stejné měřítko na výše uvedená čísla, tedy že nám funkčnost v 85 procentech prohlížečů stačí, tak víceméně není co řešit. Buďme ale přísnější. Pokud za „bezproblémově použitelné“ označíme technologie s 95+, za „použitelné“ 90+, ty s podporou vyšší než 75% za „použitelné s opatrností“ a ty, co mají podporu menší než 75 (tedy tři čtvrtiny návštěvníků), jako „zatím nepoužitelné“, dostaneme následující sestavu:

Bezproblémově použitelné technologie HTML5

Postmessage, Cross-windows messaging, font-face, hashchange, WebStorages

Použitelné technologie HTML5

SVG, audio, CSS transformace, rgba(), hsla(), opacity, canvas, geolokace, border-radius, multiplebgs, background-size, border-image, box-shadow, text-shadow

Zatím nepoužitelné technologie

WebGL, Web SQL database, IndexedDB, WebSockets, CSS animace, CSS zrcadlení, CSS 3D transformace, CSS přechody, inline SVG, SMIL, správa historie a většina novinek z WebForms a Input Types.

Zbývající technologie z rodiny HTML5 jsou „použitelné s opatrností“.

Audio a video

Podpora audia a videa je relativně použitelná (82, resp. 90 procent). Ze statistiky vyplývá, že nejsilnější je podpora OGG videa, u audia to je WAV a OGG. Zde nemá smysl dohadovat se nad tím, že „s jinými prohlížeči by výsledky dopadly jinak…“ – je jedno, s jakými prohlížeči lidé chodili, důležité je, že 82 procent z nich dokázalo přehrát OGG video.

Důsledky

Opět je nutné připomenout, že měření je zatížené chybami:

  • Vzorek návštěvníků není zcela reprezentativní
  • Do výsledků nejsou započítáni „neměřitelní“ uživatelé (viz metodika)

Přesto je několik aspektů minimálně hodných pozornosti. Do očí bijící je např. diskrepance mezi přijetím určité technologie a jejím skutečným rozšířením. Velmi výrazné to je u WebForms – tuto technologii přijímá polovina vývojářů, ale její podpora v prohlížečích kolísá mezi 50 a 70 procenty, tedy s největší pravděpodobností čtvrtině až polovině uživatelů nebude fungovat. Naopak javascriptový multithreading WebWorkers nepoužívá 90 procent vývojářů, jeho podpora v prohlížečích přitom je ale 85 %. WebStorage je technologie bez problémů použitelná (95 %), přitom jej využívá jen 28 procent vývojářů.

Závěr

Co doporučit závěrem? Je možná příliš brzy na to, postavit na těchto technologiích celý web, ale naučit se je používat rozhodně dává smysl.

Každopádně je vhodné nespoléhat se při rozhodování o tom, jakou technologii na svém webu nasadit, na odhady podle user agents („IE je pod 15 %, dáme tam CSS3!“), ale udělat si podobnou statistiku. Možná vás výsledky překvapí, protože je „intuitivně“ budete čekat jiné.

Pokusíme se podobný test udělat na reprezentativnějším vzorku; pokud se podaří, s výsledkem se tu pochlubíme a budeme moci srovnat podporu technologií na různých typech webů.

Komentáře

Subscribe
Upozornit na
guest
10 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
m

Nemluve o tom, ze dalsich 80% se da nejak nahradit pomoci js… Mozna by mohlo byt zajimavy zmerit naopak ty co to nepodporujou a maji vypnuty i js (treba kulaty rohy v css). Taky by nebyl spatnej clanek primo o tech js nahradach obecne… ty kualty rohy/stiny… JS audio/video/flash jquery pluginy… placeholdery, multiple file uploadery, … Ale to uz bych chtel mozna moc :)

blizz

je mi záhadou prečo autorovi článku tak veľmi ide o naše dobro a prečo sa nás (v rámci osvety) za každú cenu snaží presvedčiť aby sme využívali novinky z HTML5. Trošku mi svojim jednaním pripomína Jehovistov.

Čelo

Na serveru, které má být „denním zpravodajstvím pro webové vývojáře, kodery a webdesignery“ to pro mne záhadou rozhodně není :)

Michal

At si kdo chce co chce rika, Martin Maly mi s clankem ve kterem zminoval napriklad backbone otevrel cestu do netusenych javascriptovych vysin :-). Konecne me ten js neodpuzuje.

juraj

Naozaj by sa zišlo zohnať relevantnejšiu vzorku návštevníkov. Toto nie je „není zcela reprezentativní“, toto sú štatistiky absolútne mimo realitu.

Čelo

mimo realitu čeho? Mám obavy, že vaše realita bude zase odlišná od té mé. Nikde nebylo řečeno o jakou cílovku se jedná. Kdo posoudí, co je ta správná realita? eshop? webová aplikace? blog? fansite pokémonů?

Srigi

Mozeme dufat, ze nove testovanie prebehne v sieti webov IInfo? Vzorka ziskana na Vitalia, Podnikatel, Lupa alebo Mesec bude predsa len reprezativnejsia.

vvoody

Mna len mrzi ta podpora websockets, prehliadace maju tuto technologiu implementovanu ale je zakazana (FF a opera), skoda ze sa neda povolit na doverihodnych strankach (alebo ide? Niesom si isty) tak ako ked si stranka/browser pyta od uzivatela povolenie na zistenie polohy.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.