Modernizr als browser sniffer

Als je een technisch hoogstandje op je site wilt maken (bijvoorbeeld een animatie of tekst-effect) kun je gebruik maken van een JavaScript-platform zoals jQuery. Je hoeft je dan niet druk te maken over de vraag of elke browser het effect wel correct zal tonen. In een browser die het effect niet kan weergeven zal het platform er voor zorgen dat de gebruiker toch iets 'nets' te zien krijgt, of het effect wordt helemaal weggelaten.

Als je het beoogde effect helemaal zelf wilt programmeren, zul je tegen problemen aanlopen. Nog niet elke browser ondersteunt de HTML- CSS- en JavaScript-specificaties volledig. Daarbij geldt: hoe ouder de browser, hoe slechter de ondersteuning.

Het ligt voor de hand om te detecteren welke browser de bezoeker van je site gebruikt. Dat heet "browser sniffing". In het verleden waren daar (omvangrijke) JavaScripts voor beschikbaar.

Met de resultaten van een sniffer zou je kunnen bepalen of een eigenschap wél, of juist níet beschikbaar is. Aan de hand daarvan zou je dan de code kunnen inzetten die het beste resultaat geeft op het scherm.

Hier zitten echter een paar addertjes onder het gras:

• Browsers kunnen zich vermommen, ofwel zich als een andere browser voordoen. Als je denkt met Edge te maken te hebben, kan het zomaar Opera of Safari zijn! Je JavaScript-programma wordt dan op het verkeerde been gezet, met een verkeerde opmaak van het document, of zelfs vastlopen van de browser, als gevolg.
• Het is heel moeilijk om bij te houden welke eigenschappen door welke versie van welke browser worden ondersteund, nog afgezien van het programmeerwerk.

Tegenwoordig pakt men het anders aan:

Het is niet van belang met welke browser je site wordt bekeken. Het gaat er om of die browser een bepaalde eigenschap wel of niet ondersteunt.

De oplossing hiervoor is in 2009 bedacht door de Nederlander Faruk Ateş. Op het moment dat dit wordt geschreven staat het versienummer op 3.5.0.
Hiermee kan bijna elke eigenschap worden gedetecteerd. Op internet staat een (redelijk complete) lijst van zaken die Modernizr niet kan vinden.

Modernizr werkt als volgt:

• Er wordt een object gemaakt met de naam Modernizr. Dat heeft eigenschappen (properties) en methodes (methods).
• In de properties zijn alle mogelijkheden van de browser vastgelegd, voor zover die voor Modernizr te vinden zijn. Je kunt daarmee onderzoeken of iets wordt ondersteund of niet (bijvoorbeeld ronde hoeken aan een kader).
• Met de methods kun je direct reageren op de uitkomst van een test.

Het voert te ver om alle mogelijkheden van Modernizr uitgebreid te beschrijven. Daarvoor verwijs ik naar de documentatie op de Modernizer-website. Ik beperk mij tot een paar betrekkelijk eenvoudige voorbeelden:

1. Een test met een property.
2. De method load().

1. Een test met een property
   Stel: je wilt kijken of je een box met afgeronde hoeken en een schaduw kunt maken. De JavaScript code zou kunnen zijn:
    
   if (Modernizr.borderradius) {
  if(Modernizr.boxshadow) {
    /* code voor een box met afgeronde hoeken en met schaduw */
  } else {
    /* code voor een box met afgeronde hoeken, zonder schaduw */
  }
} else {
  if(Modernizr.boxshadow) {
    /* code voor een box met scherpe hoeken maar mét schaduw */
} else {
   /* code voor een box met scherpe hoeken en zonder schaduw */
}
2. De method load()
   Met deze methode kun je bestanden laten laden (of juist niet!), afhankelijk van of een eigenschap beschikbaar is of niet. Je geeft aan load() een string mee van de zaken die je wilt testen en hoe er op moet worden gereageerd. De string staat tussen vierkante haken, zonder aanhalingstekens!
    
   Stel: Je wilt kijken of de eigenschap boxshadow beschikbaar is. Als dat zo is wordt make-shadow-box.js geladen. Als boxshadow niet beschikbaar is, wordt make-plain-box.js geladen. De code zou kunnen zijn:
    
   Modernizr.load({
  test: Modernizr.boxshadow,
  yep : 'make-shadow-box.js',
  nope: 'make-plain-box.js',
  complete: /* code om de box te daadwerkelijk te maken */
});
    
   Stel: Je laadt jQuery vanaf Google. Als dat niet is gelukt moet jQuery van de website zelf worden gehaald. De code zou kunnen zijn:
    
   Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
        Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
]);
    
   Zoals je ziet bestuur je load() met keywords. Een overzicht van de keywords staat hier onder:

   Keyword		Betekenis
   test		Iets wat je wilt testen, bijv. beschikbaarheid van een CSS-eigenschap.
   yep		Bestand dat wordt geladen als de test true is.
   nope		Bestand dat wordt geladen als de test false is.
   both		Bestand dat altijd wordt geladen, onafhankelijk van de uitkomst van de test.
   load		Bestand dat altijd wordt geladen. Dit gebruik je buiten de test om.
   complete		Code (definitie van een function) die wordt uitgevoerd als test + yep / nope / both of load is uitgevoerd.
   callback		Code (definitie van een function of object) die een melding naar het scherm geeft over het resultaat van een actie met test (+ yep / nope / both) load of complete.

Werken met Modernizr:
Voor de productieversie van je eigen website is de complete versie van Modernizr te uitgebreid. Veel van de mogelijkheden zullen ongebruikt blijven, maar ze moeten wel vanaf de server naar de gebruikers-PC worden gedownload. Dat gaat ten koste van de snelheid van je site. Daarom kunt je voor jouw website een "eigen" versie maken, waarin alleen die dingen in zitten die je nodig hebt.

Ga daarvoor als volgt te werk:

1. Ga naar modernizr.com en maak daar je eigen Modernizr-versie aan, waarin alleen de dingen staan die je nodig hebt. Dat kan zowel HTML, Jav22-4-2020 16:19:20aScript en/of CSS zijn.
2. Download de file en noem hem bijvoorbeeld modernizr.js.
3. Neem de link naar modernizr.js op in je webpagina; zet de link in de HEAD, na alle style-tags en style-sheets.
4. Publiceer je webpagina samen met je "eigen" Modernizr-versie op internet.

Opmerking:
 
Het ligt voor de hand te denken dat Modernizr in staat is om oudere browsers te "upgraden" naar de "huidige" versie van de browser. Dat is niet juist, hoewel de naam dat wel doet vermoeden. Modernizr doet juist het tegenovergestelde: Het laat een moderne website beter werken in een oudere browser.