Som ni vet finns det mycket mer att bygga upp mottagliga webbplatser än bredd. Du behöver sensorer som ger dig feedback för att justera webbplatser baserat på andra faktorer.
Det bästa sättet att förbättra feedbacken från användarens sensor eller webbläsare är att använda ett JavaScript-bibliotek som heter Modernizr. I denna artikel ska jag förklara varför, när du går utöver bredden, är Modernizr ett sådant ovärderligt verktyg.
Vid utveckling av framsidan användes utvecklare för att justera en webbplats för att passa de begränsningar som layouten har för en viss webbläsare. År 2003 fanns det bara tre webbläsare: Netscape, Internet Explorer och Opera. Firefox, Safari och den första mobila webbläsaren, Opera Mini, släpptes senast 2005. Chrome släpptes inte förrän 2008.
För närvarande finns fem stora webbläsare, alla med egen mobilversion. Tvärs över det spektrum av webbläsare finns det även äldre versioner som användarna inte har uppgraderat. På samma sätt som att skapa flera layouter för flera skärmstorlekar blir så småningom ett nollsumspel, så byggs flera frontändar för flera webbläsare.
Vi använder lyhörd webbdesign för att rymma nya mobila webbläsare. Men samtidigt som du tar emot nya webbläsare är det viktigt att du inte gör det på bekostnad av äldre webbläsare.
Historiskt har optimering kommit som en produkt för att bygga en webbplats för de mest populära webbläsarna och sedan tweaking för att säkerställa att webbplatsen ser ut på samma sätt på en uppsättning populära webbläsare. Designen måste tillgodose alla webbläsares möjligheter.
Progressiv förbättring är en strategi för att klara av webbläsarens misslyckande att stödja moderna funktioner. Det finns en frestelse att bygga för de mest aktuella funktionerna, men i en lyhörd webb är konstruktionen av en webbplats kontextuell till ramen som den ses igenom. Responsiv webbdesign har blivit populär eftersom den löser det mest uppenbara förändringssammanhanget - ramens storlek - men en webbläsars sammanhang går mycket djupare än den är visningsstorlek.
SVG ger en bra lösning för högupplösta bildskärmar, men hur är det med stöd i äldre webbläsare? Det stöds inte i IE 8 eller äldre, så du måste bygga in en återgång om du stöder den webbläsaren. Du kan identifiera webbläsaren och servera alternativa stilar mot den här webbläsaren, men då skulle du behöva betjäna samma alternativa stilar för varje webbläsare som inte stöder SVG.
Skulle det inte bli lättare om du bara kunde skriva en stil som skulle användas mot varje webbläsare som inte stötte SVG? På det sättet behövde du inte följa felrapporter från användarna av äldre versioner. Du kan bara ställa in fallbacken en gång och glömma den.
Traditionellt har funktionsdetektering uppnåtts genom att detektera webbläsarens användaragent. Detta görs via JavaScript, med navigatorobjektet. Navigatorobjektet går tillbaka till Netscape-dagarna och brukade vara ett utvecklingsverktyg som är kompatibelt med webbläsare.
Om du har Chrome och har aktiverat DevTools, öppna webbläsarens webbinspektör genom att högerklicka på en sida och välj Inspekteringselement. Klicka sedan på Console och, efter caret, skriv "navigator.userAgent" och tryck Enter. Detta kommer att returnera din nuvarande webbläsares användaragent, vilket är en sträng text som används för att identifiera webbläsaren som används. Chrome returnerar följande:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35På många sätt är navigatorns objekt en av de bästa sensorerna vi har tillgång till för att informera vårt system om vad vår användare kan klara av; Det är dock inte mycket framtida vänligt. Det baserar din webbplats aktörer på många antaganden om vad webbläsaren gör och inte stöder. Det är också opålitligt eftersom användare kan konfigurera det för att komma åt webbplatser som webbläsaren kanske inte kan stödja.
Modernizr är ett JavaScript-bibliotek som används för att upptäcka funktioner i webbläsaren. Den är laddad i huvudet på din sida och körs under en sidladdning. Lägga till den på din webbplats är lika enkelt som att lägga till något annat JavaScript-bibliotek, till exempel jQuery, men när du har lagt till, ger Modernizer dig en otrolig mängd kontroll när du gör din sida och ser till att varje användare får en kvalitetsupplevelse.
Efter att ha laddats, kör Modernizr en serie kontroller mot användarens webbläsare för att bestämma vilka funktioner webbläsaren stöder och skapar ett JavaScript-objekt som du kan använda för att testa mot. Modernizr skapar inte stöd för dessa funktioner; det ger dig helt enkelt ett sätt att tillhandahålla nedgångsstöd för moderna funktioner. Till exempel, när det gäller SVG, möjliggör Modernizr oss att tillhandahålla en återgångsbild för webbläsare som saknar SVG-support.
Modernizr tillämpar också en uppsättning klasser till HTML-taggen, vilket ger dig möjlighet att ändra sidans CSS med motsvarande CSS-klasser. Dessa CSS-klasser låter dig använda CSS-system för att bygga ställdon som anpassar dina sidor för att möjliggöra de progressiva förbättringar som är tillgängliga för en sida.
I motsats till att använda User Agent upptäcker Modernizr funktioner direkt genom att köra en serie JavaScript-test som returnerar booleska (sanna eller falska) värden. Detta dikterar klasserna som är inställda på HTML-taggen och ger dig möjlighet att använda JavaScript för att upptäcka om en funktion är tillgänglig.
Installera Modernizr är lika enkelt som att länka till JavaScript-biblioteket i huvudet på din sida, men där installationsprocessen blir komplicerad skapar du den version du behöver. Modernizr är tillgänglig för nedladdning i två versioner, utvecklingsversionen och produktionsversionen.
Utvecklingsversionen är en komplett 42 KB, okomprimerad fil. Denna version är bra om du är väl känd i JavaScript och vill göra några tweaks till de tester som den utför. Eftersom det är okomprimerat är det lätt att läsa och förstora, men det är bäst att lämna utvecklare med en klar förståelse av JavaScript.
För er som kanske inte är helt skickliga på JavaScript, eller vill snabbt bygga en anpassad version av Modernizr, så är det här produktionsversionen av biblioteket spelar in. Produktionsversionsbyggnadsverktyget på webbplatsen ger dig möjlighet att skapa en version med endast de test du behöver.
Det här är till nytta när du vet att du bara behöver en viss uppsättning test. Till exempel kan din webbplats inte utnyttja CSS-boxskuggor, men det kan behöva stödja CSS-gradienter. Med hjälp av byggverktyget kan du inkludera de tester du behöver och utesluta de du inte behöver, behåll koden för koden och användarens totala laddningstid.
För vårt exempel arbetar jag med utvecklingsversionen. Jag tycker att när jag bygger en webbplats är det bäst att arbeta med den fullständiga versionen och sedan när du vet vilka funktioner du ska använda på din webbplats, trimma versionen neråt.
Låt oss göra några enkla funktionsdetektering med Modernizr. Vi börjar med en rå provplats.
Låt oss använda det här lilla testet för att upptäcka om vår webbläsare kan stödja SVG. För enkelhets skull lägger vi bara till två spårstaggar på sidan för att upptäcka support.
Huzzah! You have SVG support.BOO! You don't have SVG support.Om du testar detta i en webbläsare som stöder SVG, ser du meddelandet "Huzzah! Du har SVG-stöd. "Om du har en webbläsare som inte stöder SVG hittar du" BOO! Du har inte SVG support. "Meddelande.
Detta exempel är ganska rudimentärt, men det visar kärnan att använda Modernizr för att åtgärda problem med webbläsare. Om vi gjorde samma åtgärd med den gamla användaragentmetoden, skulle vi behöva ha ett stilark för varje webbläsare som inte stöder SVG och ändrar vår CSS för var och en. (För alla intresserade är de enda större webbläsarna som saknar SVG-stöd Internet Explorer 7 och under.)
Genom att lägga till svg / no-svg-klassen till html på sidan har din CSS nu en väljare som kan användas för att åsidosätta befintliga CSS-regler. Eftersom den ligger på den överordnade taggen kan den användas för att åsidosätta andra klasser på sidan.
Så, i det här fallet ges båda spårstaggarna display: none ;. Om det inte finns något SVG-stöd, överskrider displayen: inline-deklarationen på spänningsetiketten med .no-klassen displayen: dold tack vare no-svg-regeln på html-taggen.
Låt oss försöka ett mer användbart exempel på samma idé. Vi kanske vill ha en SVG-bakgrundsbild på sidan, som faller tillbaka till en PNG om webbläsaren inte stöder SVG. Som standard använder vi PNG-bilden. På så sätt serveras SVG inte om det inte behövs och blir en progressiv förbättring.
Nu har vi en fantastisk SVG-skalle som kommer att se fantastisk och skarp ut för användare med högupplösta skärmar, och ser fortfarande bra ut för användare med äldre webbläsare.
Det finns en stor mängd information att lära om Modernizr. Vi visade dig hur det gör arbetet med cross-browser-kapacitet utan att behöva komma ihåg eller behålla en körlista med vilka webbläsare stöder SVG.
Det fungerar exceptionellt som ett system för att betjäna dina användaraktörer för att skapa snabba och mycket funktionella webbplatser.
Använder du Modernizr i dina projekt? Vilka andra metoder har du använt för att betjäna responsivt innehåll? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, divergerande linjer bild via Shutterstock.