Změřte si reálnou podporu HTML5

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čů?
Nálepky:
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:
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ů:
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 | crosswindowmessaging | 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ů.
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 :)
Ani ne… na strance http://ukazky.zdrojak.cz/html5 jsou tyhle nahrady popsane, takze tomu muzu jeden clanek venovat. To je docela dobry napad!
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.
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í :)
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.
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.
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ů?
Jistě že „by sa zišlo“, a pracuju na tom. Do té doby jsem nabídnul alespoň vzorek ze svých osobních stránek, který mě poměrně překvapil. Chcete-li pomoct, udělejte podobnou statistiku a svěřte se s ní, můžeme porovnat, pokud tu možnost nemáte, tak musíte počkat cca do příštího týdne, jestli se mi podaří sehnat další „vzorky“… Můj soukromý tip je, že výsledky nebudou výrazně odlišné, ovšem – necháme se překvapit.
PS: I proto je v závěru článku napsáno nikoli „Tak to je a basta!“, ale „Zkuste si to sami na svém webu“.
Mozeme dufat, ze nove testovanie prebehne v sieti webov IInfo? Vzorka ziskana na Vitalia, Podnikatel, Lupa alebo Mesec bude predsa len reprezativnejsia.
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.