Jednou z nejlepších informačních aplikací, které se v posledních letech objevily, je známá a super praktická aplikace Can I Use od Alexis Deveria.
Ačkoli Mohu použít je skvělý pro mnoho špičkových funkcí, stále existuje spousta věcí JavaScript a DOM, které tam nejsou zahrnuty. Jaké další možnosti tedy existují pro vyhledání podpory prohlížeče pro mnoho různých funkcí JavaScriptu a DOM?
Neustále zkoumám různé front-endové technologie, ale jediná věc, kterou jsem ještě nenašel, je opravdu dobrý zdroj na jednom místě, který uvádí podporu prohlížeče pro všechny aspekty JavaScriptu a DOM, včetně různých API HTML5.
Ačkoli jediný zdroj ve skutečnosti neexistuje (alespoň žádný, o kterém vím), existuje několik zdrojů, na které jsem narazil a které dohromady tvoří docela dobrý přehled o tom, které funkce jsou podporovány ve kterých prohlížečích, a zejména jakékoli starší verze IE, které možná budete muset stále podporovat.
Samozřejmě, skutečné testování převyšuje všechny
Než se pustím do zdrojů, myslím, že je samozřejmé, že provádění skutečného testování na různých zařízeních a prohlížečích, které musíte podporovat, by mělo být vždy primární metodou pro určení podpory.
Je hezké mít přehled o podpoře z druhé ruky. Tabulky „podpory“ však vždy neobsahují žádné relevantní chyby, které by mohly způsobit, že daná funkce nebude použitelná. A to je kromě toho, že některé zdroje mohou být prostě špatné.
Ujistěte se tedy, že provedete testování a použijete odkazy popsané v tomto článku jako průvodce, nikoli jako konečné slovo o tom, zda něco funguje v konkrétním prohlížeči na konkrétní platformě na konkrétním zařízení.
Odkaz MDN
Pokud něco nemůžete najít na Can I Use , první místo, kam byste se měli podívat, je Mozilla’s Developer Network. A jsem si jistý, že většina z vás to dělá. Ve většině případů je to vše, co potřebujete, abyste získali dobrý předběžný přehled o podpoře konkrétní funkce JavaScriptu, kterou nemůžete najít na stránce Can I Use
Řekněme například, že chcete vyhledat addEventListener() a removeEventListener() . Na stránce Can I Use je nenajdete . Obojí ale najdete s informacemi o prohlížeči na MDN.
Jak můžete vidět na snímku obrazovky výše, kromě podrobností ukazujících, které prohlížeče mají „základní podporu“, jsou v této tabulce často další informace o funkcích, které mohly být přidány v pozdějších verzích ECMAScript.
Pamatujte také, že reference MDN může upravovat kdokoli, takže pokud zjistíte, že je něco nesprávné, neváhejte to aktualizovat.
QuirksMode DOM Reference od Peter-Paul Koch
Jaká diskuse o tabulkách kompatibility prohlížečů by nebyla úplná, aniž by se zmínil Peter-Paul Koch a jeho vynikající referenční tabulky, které jsou všechny založeny na jeho vlastních testech.
Kochovy tabulky obsahují informace o podpoře pro stolní a mobilní prohlížeče a zdá se mi, že věci DOM jsou docela aktuální, což naznačuje podporu pro IE11 a iOS7.
Tabulky kompatibility webových prohlížečů od Cody Lindley
Zde je jeden, který se nezdá být příliš známý a vytvořil ho Cody Lindley, který napsal několik skvělých knih o JavaScriptu a DOM. Jmenuje se Web Browser Compatibility Tables (WBCT) a je to obrovský zdroj.
Web společnosti Cody obsahuje tabulky podpory sahající až k IE6 a obsahuje následující:
- Podpora DOM pro prohlížeče pro stolní počítače a tablety/telefony
- Podpora událostí DOM pro prohlížeče stolních počítačů a tabletů/telefonů
- Podpora ES6 pro prohlížeče pro stolní počítače a tablety/telefony
Toto jsou primární oblasti pro vývojáře, kteří zkoumají informace o podpoře JavaScriptu, ale WBCT také obsahuje tabulky podpory pro CSS, BOM, SVG a mnoho dalších. Tak si to určitě uložte do záložek. Slouží jako pěkný důkladný doplněk k MDN.
Big JS-Compatibility-Table od Tobiase Buschora
Tento rozhodně není příliš známý, ale může mít něco, co není zahrnuto v tabulkách Cody Lindley nebo něco, co není dobře zdokumentováno na MDN.
Je to Big JS-Compatibility-Table, kterou vytvořil Tobias Buschor.
I toto je obrovský zdroj a opravdu se mi líbí, jak vám umožňuje proniknout do konkrétní funkce JavaScriptu nebo DOM. Pokud například procházíte úvodním seznamem (který začíná window object) můžete kliknout na něco jako StorageEvent a zobrazí vám seznam metod a vlastností pro tento konkrétní objekt.
Ačkoli se jedná o skutečně komplexní zdroj, všiml jsem si, že může být někdy pomalý a zdá se, že na primárním webu dochází k nějaké chybě, takže si nejsem jistý, zda Tobias udržoval zdroj tak dobrý, jak je.
Tuto možnost obecně používám jako třetí nebo čtvrtou možnost, pokud se dívám na konkrétní funkci, která není jinde příliš dobře zdokumentována.
Webová reference Dottoro JavaScript
Reference JavaScript Dottoro, kterou spravuje Dottoro, společnost poskytující IT služby, je docela slušným zdrojem pro mnoho různých funkcí JavaScriptu a DOM.
V případech, kdy je podpora prohlížeče plná, ve všech verzích uvidíte ikonu prohlížeče, která to indikuje, nebo vybledlou ikonu označující nedostatek podpory. Pokud podpora začíná u konkrétní verze, bude to také uvedeno. Můžete to vidět na níže uvedeném snímku obrazovky:
Kromě podpory prohlížeče tento také poskytuje stručný popis funkce, kterou hledáte, takže je to trochu bonus.
To, co se mi na tomto zdroji opravdu líbí, je pěkná funkce vyhledávání, která není při první návštěvě webu příliš zřejmá. Spouští se v okně lightbox kliknutím na jedno ze dvou tlačítek „Procházet podle názvu“. Boční tlačítko je uvedeno na níže uvedeném snímku obrazovky:
Můžete také vyhledávat přímo na hlavní stránce, ale líbí se mi vyhledávání v lightboxu, protože okamžitě filtruje výsledky podle toho, co zadáváte, místo abyste nejprve museli vidět stránku s výsledky.
Celkově je reference Dottoro pěkným, atraktivním zdrojem, který také obsahuje informace o podpoře prohlížeče pro funkce HTML a CSS.
IE Dev Center JavaScript a reference DOM
Obvykle, když nás zajímá podpora prohlížečů, je to proto, že chceme informace o starších verzích IE (nyní včetně IE9 a IE10, které jsou podle dnešních standardů obě považovány za „staré“).
Internet Explorer Dev Center společnosti Microsoft nabízí spoustu dobrých stránek s podrobnými informacemi o podpoře JavaScriptu a funkcích DOM.
Můžete například navštívit stránku Informace o verzi JavaScriptu, která uvádí řadu funkcí v tabulce s informacemi o podpoře pro IE6-11. Můžete také procházet jednotlivými funkcemi a nakonec přejít na stránku věnovanou jedné funkci.
Pokud tedy přejdete na stránku metody forEach pro objekt Map, získáte popis této funkce spolu s částí nazvanou „Požadavky“, která popisuje, které verze IE tuto funkci podporují.
To je jen malá ukázka toho, co je k dispozici k vyhledání. Je zde také reference DOM, reference Web Applications (která pokrývá mnoho rozhraní API HTML5) a reference Graphics and Media, která zahrnuje Canvas, Audio/Video API, SVG a WebGL.
Jedinou skutečnou chybou na těchto referenčních stránkách IE Dev Center je skutečnost, že pokrývají pouze podporu pro prohlížeče IE. Ale to není velký problém, protože IE je obvykle hlavním důvodem, proč hledáme informace o podpoře prohlížečů.
Tabulky kompatibility ECMAScript od kangax/Arnott
Pokud hledáte funkce ECMAScript, které byly přidány od ES5, jedním z nejlepších zdrojů jsou tabulky kompatibility od Juriy „kangaxe“ Zaytseva a Leona Arnotta.
Odkaz obsahuje tabulky obsahující informace o kompatibilitě pro ES5, ES6, ES7 a nestandardní funkce.
Bonus:Kontrola kompatibility JavaScriptu od Thijse Bussera
Toto je nový nástroj vytvořený Thijsem Busserem s názvem JavaScript Compatibility Checker (JSCC), který vám umožní vložit nebo nahrát nějaký JavaScript a poté získat analýzu kódu.
Nástroj využívá informace z tabulek Kangax a Mohu použít , takže se zdá, že se zde zaměřujeme na novější API a věci přidané v ES5 a novějších.
Abych vám ukázal, jak to funguje, přidal jsem nějaký kód z tohoto článku MDN o Web Workers. Všimněte si zobrazených výsledků:
Zde získáte rozpis funkcí používaných v kódu, které měly problémy s kompatibilitou (to znamená, že mají méně než 100% podporu), a které prohlížeče způsobují problémy.
Upozorňuji vás, že tento nástroj je nový a pravděpodobně by se dal vylepšit. Když například vložím nějaký kód, který používá vlastnost datové sady, JSCC mi řekne, že kód nemá žádné problémy s kompatibilitou. Ale MDN říká, že to není podporováno v IE10 nebo nižším. K tomu dochází, i když dataset je uveden na Can I Use, takže výsledky by měly být přesné.
Takže i když se nejedná o úplný a neomylný nástroj, určitě je třeba na něj dávat pozor, když se zdokonaluje.
Na závěr
Jak již bylo zmíněno, skutečné testování by mělo být vždy primárním prostředkem informací o kompatibilitě. A nemyslím si, že nikde existuje jediný zdroj, který by měl úplné informace o kompatibilitě prohlížeče pro všechny funkce JavaScriptu a DOM. Ale myslím si, že zdroje, které jsem uvedl v tomto příspěvku, mohou sloužit jako kolektivní entita, na kterou se můžete spolehnout při získání poměrně přesných informací.
Samozřejmě, mohlo tam být něco, co jsem přehlédl. Pokud tedy víte o jiném zdroji, klidně ho přidejte do komentářů.