Jak víte, je mnohem více, než budovat citlivé webové stránky než šířku. Potřebujete snímače, které vám poskytnou zpětnou vazbu, abyste upravili stránky na základě jiných faktorů.
Nejlepší způsob, jak zlepšit naši zpětnou vazbu ze senzoru uživatele nebo prohlížeče, je pomocí knihovny JavaScriptu nazvaného Modernizr. V tomto článku vám vysvětlím, proč, když překročíte šířku, je Modernizr takovým neocenitelným nástrojem.
Ve vývoji front-end vývojáři upravili stránky tak, aby vyhovovaly omezením rozvržení motoru používaného určitým prohlížečem. V roce 2003 existovaly pouze tři prohlížeče: Netscape, Internet Explorer a Opera. Firefox, Safari a první mobilní prohlížeč Opera Mini byly vydány do roku 2005. Chrome nebyl vydán až v roce 2008.
V současné době existuje pět hlavních prohlížečů, z nichž každá má vlastní mobilní verzi. Přes toto pole prohlížečů existují i starší verze, které uživatelé neupravili. Stejným způsobem se vytváření více rozvržení pro vícenásobné velikosti obrazovky nakonec stává hru s nulovým součtem, a tak vytváří více front-endů pro více prohlížečů.
Používáme přizpůsobivý webový design, aby vyhovoval novým špičkovým mobilním prohlížečům. Ale při ukládání nových prohlížečů je důležité, aby to nebylo na úkor starších prohlížečů.
Historicky, optimalizace přišla jako produkt budování webu pro nejpopulárnější prohlížeče a pak ladění, aby se zajistilo, že web vypadá stejně na souboru populárních prohlížečů. Návrh by musel přizpůsobit schopnosti všech prohlížečů.
Progresivní vylepšení je jednou z strategií, jak vyřešit selhání prohlížečů při podpoře moderních funkcí. Existuje pokušení stavět pro nejaktuálnější funkce, avšak v reaktivním webu je návrh stránky kontextový pro rámec, který je zobrazován. Odpovědný webový design se stal populárním, protože řeší nejvíce zřejmé měnící se kontext - velikost rámce - ale kontext prohlížeče je mnohem hlouběji než jeho velikost.
SVG představuje skvělé řešení pro displeje s vysokým rozlišením, ale co je s jeho podporou ve starších prohlížečích? V IE 8 nebo starší není podporována, takže pokud budete podporovat tento prohlížeč, musíte vytvořit záložní zdroj. Můžete identifikovat prohlížeč a zobrazovat alternativní styly s tímto prohlížečem, ale pak byste museli sloužit stejným alternativním stylům pro každý prohlížeč, který nepodporuje SVG.
Nebylo by snadnější, kdybyste mohli napsat styl, který by byl použit proti každému prohlížeči, který nepodporoval SVG? Tímto způsobem byste nemuseli držet krok s chybovými hlášeními od uživatelů starších verzí. Mohli byste jednu záchranu nastavit a zapomenout.
Tradiční detekce prvků byla provedena detekcí uživatelského prohlížeče prohlížeče. To se provádí pomocí jazyka JavaScript pomocí objektu navigátoru. Objekt navigátoru se datuje od dnů Netscape a stal se nejlepším nástrojem pro vývojáře v kompatibilitě mezi prohlížeči.
Pokud máte Chrome a máte zapnuté rozhraní DevTools, otevřete inspektora webu kliknutím pravým tlačítkem myši na stránku a výběrem položky Inspect Element. Poté klikněte na konzolu a poté klikněte na "navigator.userAgent" a stiskněte klávesu Enter. Tím se vrátí uživatelský agent aktuálního prohlížeče, což je řetězec textu používaný k identifikaci používaného prohlížeče. Chrome vrátí následující:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35V mnoha ohledech je navigační objekt jedním z nejlepších senzorů, které máme k dispozici, abychom informovali náš systém o tom, co je náš uživatel schopen; nicméně, to není příliš přátelské budoucnosti. Založí ovladače vašeho webu na základě mnoha předpokladů o tom, co prohlížeč dělá a nepodporuje. Je také nespolehlivé, protože uživatelé ji mohou nakonfigurovat pro přístup k webům, které prohlížeč pravděpodobně nebude schopen podporovat.
Modernizr je knihovna jazyka JavaScript, která slouží k detekci funkcí v prohlížeči. Je načten v horní části stránky a běží při načítání stránky. Přidání na vaše stránky je stejně snadné jako přidání jiné knihovny jazyka JavaScript, například jQuery, ale jakmile jste přidali, Modernizer vám poskytne neuvěřitelné množství kontroly při vykreslování vaší stránky a zajistí, že každý uživatel bude mít kvalitní zážitek.
Po načtení aplikace Modernizr spouští řadu kontrol uživatelů prohlížeče, aby zjistil, jaké funkce prohlížeč podporuje a vytvoří objekt JavaScript, který můžete použít k testování. Modernizr tyto funkce nevytváří; jednoduše vám nabízí způsob, jak poskytnout náhradní podporu moderním funkcím. Například v případě SVG nám Modernizr umožňuje poskytnout záložní obraz pro prohlížeče, které nemají podporu SVG.
Modernizr také uplatňuje sadu tříd na tagu HTML, což vám umožňuje upravit CSS stránky pomocí odpovídajících tříd CSS. Tyto třídy CSS umožňují používat systémy CSS k sestavení ovladačů, které upraví vaše stránky tak, aby umožnily postupné vylepšení dostupné pro stránku.
Na rozdíl od použití agentu uživatele Modernizr detekuje funkce přímo spuštěním řady testů jazyka JavaScript, které vrátí hodnoty boolean (true nebo false). To určuje třídy, které jsou nastaveny na značku html a umožňuje vám používat JavaScript k zjištění, zda je funkce k dispozici.
Instalace aplikace Modernizr je stejně jednoduchá jako propojení s knihovnou JavaScript v horní části stránky, ale kde je proces instalace komplikovaný, vytváří verzi, kterou potřebujete. Modernizr je k dispozici ke stažení ve dvou verzích, vývojové verze a výrobní verzi.
Vývojová verze je úplný 42 kB nekomprimovaný soubor. Tato verze je skvělá, pokud máte dostatek znalostí v jazyce JavaScript a chcete provést nějaké vylepšení testů, které provádí. Protože je nekomprimovaný, je snadné číst a rozšiřovat, ale je to nejlepší pro vývojáře s pečlivým pochopením jazyka JavaScript.
Pro ty z vás, kteří by nemuseli být úplně zběhlí v Javě, nebo by chtěli rychle vytvořit vlastní verzi Modernizra, to je místo, kde hraje produkční verze knihovny. Produktový nástroj pro tvorbu verzí na webu vám dává možnost vytvořit verzi s pouze testy, které požadujete.
To vám pomůže, když víte, že potřebujete pouze určitý soubor testů. Například vaše stránky nebudou moci využít CSS box-stíny, ale možná bude muset podporovat přechody CSS. Pomocí nástroje pro sestavení můžete zahrnout testy, které potřebujete, a vyloučit ty, které nepotřebujete, udržovat obrys zdrojového kódu a celkový čas načítání uživatele.
Pro náš příklad budu pracovat na vývojové verzi. Zjistil jsem, že když budu vytvářet stránky, je nejlepší pracovat s plnou verzí a poté, jakmile zjistíte, jaké funkce budete používat na svých stránkách, upravte verzi dolů.
Projděte si s Modernizrem nějakou jednoduchou detekci funkcí. Začneme se surovým vzorkovacím místem.
Použijte tento malý test k zjištění, zda je náš prohlížeč schopen podporovat SVG. Z důvodu jednoduchosti přidáme na stránku dvě značky pro rozpoznávání podpory.
Huzzah! You have SVG support.BOO! You don't have SVG support.Pokud otestujete to v prohlížeči, který podporuje SVG, uvidíte zprávu "Huzzah! Máte podporu SVG. "Pokud máte prohlížeč, který nepodporuje SVG, najdete" BOO! Nemáte podporu SVG. "
Tento příklad je docela rudimentární, ale zobrazuje základní myšlenku použití Modernizru k opravě problémů s cross-prohlížečem. Pokud bychom používali stejnou opravu metodou starého uživatelského agenta, museli bychom mít štítek každého prohlížeče, který nepodporuje SVG, a pro každou změnu našeho CSS. (Pro zainteresované osoby jsou jediné hlavní prohlížeče, které nemají podporu SVG, aplikace Internet Explorer 7 a pod.)
Přidáním třídy svg / no-svg do html na stránce, vaše CSS má nyní volič, který lze použít k překonání stávajících pravidel CSS. Protože je to na nadřazené značce, může se použít k překrývání jiných tříd na stránce.
Takže v tomto případě jsou obě značky tagu zobrazeny: none ;. Není-li podpora SVG, zobrazení: inline prohlášení o značce rozpětí s třídou .no nahradí displej: skrytá díky pravidlu no-svg na tagu html.
Vyzkoušejte si užitečnější příklad téhož myšlenek. Možná bychom chtěli mít na stránce SVG obrázek na pozadí, který spadne zpět do PNG, pokud prohlížeč nepodporuje SVG. Ve výchozím nastavení použijeme obrázek PNG. Tímto způsobem se služba SVG neposkytuje, pokud není potřeba, a stává se progresivním vylepšením.
Nyní máme úžasnou SVG lebku, která vypadá skvěle a ostře pro uživatele s displeji s vysokým rozlišením a stále vypadá dobře pro uživatele se staršími prohlížeči.
Existuje velké množství informací o modernizéru. Ukázali jsme vám, jak to dělá práce s cross-browser schopností bez nutnosti zapamatovat si nebo udržovat běžící seznam, který prohlížeče podporují SVG.
Mimořádně funguje jako systém, pomocí něhož je možné obsluhovat uživatelské pohony pro vytváření rychlých a vysoce funkčních webových stránek.
Používáte Modernizr ve svých projektech? Jaké další metody jste použili pro poskytování citlivého obsahu? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obraz odkloněných linií přes Shutterstock.