Zoals je weet, is er veel meer om responsieve websites te bouwen dan in de breedte. U hebt sensoren nodig die u feedback geven om sites aan te passen op basis van andere factoren.
De beste manier om onze feedback van de sensor of browser van uw gebruiker te verbeteren, is door een JavaScript-bibliotheek te gebruiken Modernizr. In dit artikel zal ik uitleggen waarom, wanneer u verder dan de breedte gaat, Modernizr zo'n waardevol hulpmiddel is.
In de front-end ontwikkeling pasten ontwikkelaars een site aan om te voldoen aan de beperkingen van de layout-engine die door een bepaalde browser wordt gebruikt. In 2003 waren er slechts drie browsers: Netscape, Internet Explorer en Opera. Firefox, Safari en de eerste mobiele browser, Opera Mini, zijn in 2005 uitgekomen. Chrome is pas in 2008 uitgebracht.
Momenteel zijn er vijf grote browsers, elk met zijn eigen mobiele versie. In die reeks browsers zijn er ook oudere versies die gebruikers niet hebben bijgewerkt. Op dezelfde manier dat het maken van meerdere lay-outs voor meerdere schermafmetingen uiteindelijk een zero sum-game wordt, en dat geldt ook voor het bouwen van meerdere front-ends voor meerdere browsers.
We gebruiken responsief webontwerp om plaats te bieden aan nieuwe, geavanceerde mobiele browsers. Maar hoewel het nieuwe browsers betreft, is het belangrijk dat dit niet ten koste gaat van oudere browsers.
Historisch gezien is optimalisatie een product geworden van het bouwen van een site voor de meest populaire browsers en vervolgens tweaken om ervoor te zorgen dat de site er hetzelfde uitziet in een reeks populaire browsers. Ontwerpen zouden moeten voldoen aan de mogelijkheden van alle browsers.
Progressive Enhancement is een strategie om het hoofd te bieden aan het falen van browsers om moderne functies te ondersteunen. Er is een verleiding om te bouwen voor de meest actuele functies, maar in een responsief web is het ontwerp van een site contextueel voor het frame waarin het wordt bekeken. Responsief webdesign is populair geworden omdat het de meest voor de hand liggende veranderende context - de grootte van het frame - oplost, maar de context van een browser loopt veel dieper dan de viewport-grootte.
SVG is een geweldige oplossing voor schermen met een hoge resolutie, maar hoe zit het met de ondersteuning in oudere browsers? Het wordt niet ondersteund in IE 8 of ouder, dus je moet een fallback inbouwen als je die browser ondersteunt. U zou de browser kunnen identificeren en alternatieve stijlen kunnen aanbieden voor die browser, maar dan zou u dezelfde alternatieve stijlen moeten gebruiken voor elke browser die geen SVG ondersteunt.
Zou het niet eenvoudiger zijn als u gewoon een stijl zou schrijven die zou worden gebruikt tegen elke browser die SVG niet ondersteunde? Op die manier hoef je geen bugrapporten bij te houden van de gebruikers van oudere versies. Je zou de fallback een keer kunnen instellen en het vergeten.
Traditioneel is kenmerkdetectie uitgevoerd door het detecteren van de user-agent van de browser. Dit gebeurt via JavaScript, met behulp van het navigatorobject. Het navigatorobject dateert uit de Netscape-dagen en was vroeger het beste hulpmiddel van een ontwikkelaar in compatibiliteit tussen browsers.
Als u Chrome hebt en DevTools hebt ingeschakeld, opent u de webinspectie van uw browser door met de rechtermuisknop op een pagina te klikken en Inspect Element te selecteren. Klik vervolgens op Console en typ na het invoegteken "navigator.userAgent" en drukt op Enter. Hiermee wordt de user-agent van uw huidige browser weergegeven, een reeks tekst die wordt gebruikt om de gebruikte browser te identificeren. Chrome retourneert het volgende:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35In veel opzichten is het navigatorobject een van de beste sensoren die we tot onze beschikking hebben om ons systeem te informeren over wat onze gebruiker kan; het is echter niet erg toekomstvriendelijk. Het baseert de actuators van uw site op veel aannames over wat de browser wel en niet ondersteunt. Het is ook onbetrouwbaar omdat gebruikers het kunnen configureren voor toegang tot sites die de browser mogelijk niet ondersteunt.
Modernizr is een JavaScript-bibliotheek die wordt gebruikt om functies in de browser te detecteren. Het is geladen in de kop van uw pagina en wordt uitgevoerd tijdens het laden van een pagina. Het toevoegen aan uw site is net zo eenvoudig als het toevoegen van een andere JavaScript-bibliotheek, zoals jQuery, maar eenmaal toegevoegd, biedt Modernizer u een ongelofelijke hoeveelheid controle bij het weergeven van uw pagina en zorgt u ervoor dat elke gebruiker een kwaliteitsbeleving krijgt.
Modernizr is geladen en voert een reeks controles uit tegen de browser van de gebruiker om te bepalen welke functies de browser ondersteunt en creëert een JavaScript-object waarmee u kunt testen. Modernizr maakt geen ondersteuning voor deze functies; het geeft je gewoon een manier om fallback-ondersteuning te bieden voor moderne functies. In het geval van SVG stelt Modernizr ons bijvoorbeeld in staat om een fallback-afbeelding te bieden voor browsers zonder SVG-ondersteuning.
Modernizr past ook een reeks klassen toe op de HTML-tag, waardoor u de CSS van de pagina kunt aanpassen met behulp van de bijbehorende CSS-klassen. Met deze CSS-klassen kunt u CSS-systemen gebruiken om actuators te bouwen die uw pagina's aanpassen om de progressieve verbeteringen die beschikbaar zijn voor een pagina mogelijk te maken.
In tegenstelling tot het gebruik van de User Agent detecteert Modernizr functies direct door een reeks JavaScript-tests uit te voeren die boolean-waarden (true of false) retourneren. Dit dicteert de klassen die zijn ingesteld op de html-tag en geeft u de mogelijkheid om JavaScript te gebruiken om te detecteren of een functie beschikbaar is.
Het installeren van Modernizr is net zo eenvoudig als linken naar de JavaScript-bibliotheek in de kop van uw pagina, maar waar het installatieproces gecompliceerd wordt, is het maken van de versie die u nodig hebt. Modernizr is beschikbaar om te downloaden in twee versies, de ontwikkelingsversie en de productieversie.
De ontwikkelingsversie is een volledig ongecomprimeerd bestand van 42 kB. Deze versie is geweldig als je goed thuis bent in JavaScript en een paar aanpassingen wilt doen aan de tests die het uitvoert. Omdat het niet gecomprimeerd is, is het gemakkelijk te lezen en te vergroten, maar het is het best overgelaten aan ontwikkelaars met een goed begrip van JavaScript.
Voor degenen onder u die misschien niet helemaal bedreven zijn in JavaScript, of snel een aangepaste versie van Modernizr willen maken, komt hier de productieversie van de bibliotheek om de hoek kijken. Met de tool voor het bouwen van de productversie op de site kunt u een versie maken met alleen de tests die u nodig hebt.
Dit is handig als u weet dat u slechts een bepaald aantal tests nodig heeft. Uw site maakt bijvoorbeeld geen gebruik van CSS-kaderschaduwen, maar moet mogelijk CSS-gradiënten ondersteunen. Met de build-tool kunt u de tests opnemen die u nodig hebt en de tests uitsluiten die u niet nodig hebt, waardoor de trim van de broncode en de totale laadtijd van uw gebruiker worden beperkt.
Voor ons voorbeeld zal ik werken aan de ontwikkelingsversie. Ik merk dat het bij het bouwen van een site het beste is om met de volledige versie te werken en als u eenmaal weet welke functies u op uw site zult gebruiken, trimt u de versie naar beneden.
Laten we enkele eenvoudige functieherkenning uitvoeren met Modernizr. We beginnen met een ruwe voorbeeldsite.
Laten we deze kleine test gebruiken om te detecteren of onze browser SVG kan ondersteunen. Voor de eenvoud voegen we gewoon twee span-tags toe aan de pagina om ondersteuning te detecteren.
Huzzah! You have SVG support.BOO! You don't have SVG support.Als u dit test in een browser die SVG ondersteunt, ziet u de melding 'Huzzah! Je hebt SVG-ondersteuning. "Als je een browser hebt die SVG niet ondersteunt, vind je de" BOO! U hebt geen SVG-ondersteuning. "Bericht.
Dit voorbeeld is vrij rudimentair, maar het geeft het kernidee weer om Modernizr te gebruiken om problemen met verschillende browsers op te lossen. Als we dezelfde oplossing zouden gebruiken met de oude user-agentmethode, zouden we een stylesheet moeten hebben voor elke browser die SVG niet ondersteunt en onze CSS voor elke browser moet wijzigen. (Voor iedereen die geïnteresseerd is, zijn de enige grote browsers zonder SVG-ondersteuning Internet Explorer 7 en lager.)
Door de svg / no-svg-klasse toe te voegen aan de html op de pagina, heeft uw CSS nu een selector die kan worden gebruikt om bestaande CSS-regels te overschrijven. Omdat de tag voorkomt op de tag parent-most, kan deze worden gebruikt om andere klassen op de pagina te overschrijven.
In dit geval worden beide span-tags weergegeven: none ;. Als er geen SVG-ondersteuning is, wordt de weergave: inline-melding op de span-tag met de .no-klasse overschreven door het display: verborgen dankzij de regel no-svg op de html-tag.
Laten we een bruikbaarder voorbeeld van hetzelfde idee proberen. We willen misschien een SVG-achtergrondafbeelding op de pagina, die terugvalt naar een PNG als de browser SVG niet ondersteunt. Standaard gebruiken we de PNG-afbeelding. Op deze manier wordt de SVG niet weergegeven tenzij deze nodig is en wordt deze een progressieve verbetering.
Nu hebben we een geweldige SVG-schedel die er geweldig en helder uitziet voor gebruikers met schermen met een hoge resolutie en die er nog steeds goed uitzien voor gebruikers met oudere browsers.
Er is een grote schat aan informatie over Modernizr te vinden. We hebben laten zien hoe het het werk van cross-browserfunctionaliteit doet zonder een lijst te hoeven onthouden of onderhouden waarvan browsers SVG ondersteunen.
Het functioneert uitzonderlijk als een systeem waarmee uw gebruikersactuators kunnen worden bediend om snelle en zeer functionele websites te maken.
Gebruikt u Modernizr in uw projecten? Welke andere methoden hebt u gebruikt voor het weergeven van responsieve inhoud? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, afwijkende lijnen afbeelding via Shutterstock.