Digital Customer Experience Blog

Digital Customer Experience Blog

Meningen op deze blog weerspiegelen de opvattingen van de schrijver en niet per definitie die van de Capgemini Group

Verschillen in browsers aanpakken: Modernizr vs conditionele html class

Hoe moderner browsers worden, hoe meer mooie dingen er in die browsers kunnen. Omdat niet iedereen in de gelegenheid is om de allerhipste browser te gebruiken, zijn er veel technieken om in alle browservariaties een goed resultaat te bereiken voor je front end functionaliteit en layout.

Omdat zowel klant en designteam graag iets moois willen neerzetten, en het ontwikkelteam staat te popelen om de nieuwste CSS3 en HTML5 technieken toe te passen, kunnen er problemen ontstaan in oudere browsers. Sommigen pleiten zelfs voor het bewust uitsluiten van ernstig verouderde modellen. In de praktijk zal er vaak onderscheid moeten worden gemaakt tussen de verschillende browsers. Hieronder twee voorbeelden die dit bereiken door het toevoegen van informatie aan de <html> tag.

Met Modernizr wordt aan de <html> tag een aantal css-klasses gegeven op basis van door de browser ondersteunde functionaliteiten. Bijvoorbeeld wel of geen HTML5 functionaliteiten of ondersteuning voor CSS3 styling. Zie voor meer informatie de uitstekende documentatie (engelstalig). Het elegante aan dit script is dat browsers niet onderscheiden worden op hun naam of versienummer, maar daadwerkelijke mogelijkheden. Voor zeer geavanceerde webapplicaties kan dit erg handig zijn, omdat je aan elke gebruiker precies de optimale functionaliteit kunt bieden die zijn of haar browser ondersteunt. Het is echter af te raden dit soort technieken standaard in je project te zetten. Elk extra bestand dat geladen moet worden heeft namelijk impact op de laadtijd. Een hogere laadtijd heeft weer impact op de conversie.

Veel van de verschillen waar een webproject mee te maken krijgt liggen tussen Internet Explorer (versies) en de overige browsers (Firefox, Chrome, Safari, Opera). Om slechts aanpassingen voor deze verschillen te maken kun je conditional comments gebruiken, die alleen ondersteund worden door de browser van Microsoft. Met een simpele reeks statements kun je zo aan de <html> tag aangeven of, en welke versie van Internet Explorer er gebruikt wordt. Net als met Modernizr kun je vervolgens specifieke css regels schrijven om de afwijkingen zoveel mogelijk glad te strijken.

Met conditional comments worden géén extra bestanden geladen, wat in theorie een snellere website oplevert, maar alleen de eigenaardigheden van Internet Explorer aanpakt. Modernizr biedt juist een zeer  fijnmazige controle, waarmee specifieke verschillen aangepakt kunnen worden, ten koste van iets meer laadtijd. Kijk dus goed naar je project wanneer je tegen browserverschillen aanloopt, en kies de meest eenvoudige oplossing. Dat is de enige manier om de ontwerper, ontwikkelaar, klant èn eindgebruiker de beste service te verlenen.

Over de auteur

Sjoerd Kranendonk
Sjoerd Kranendonk
+Sjoerd Kranendonk maakt projecten en mensen succesvol bij Capgemini. Door zijn focus op team-prestatie en samenwerking met klanten, onderbouwd door een solide online-technologiekennis, worden Online projecten met goed gevolg opgeleverd. Buiten Capgemini deelt Sjoerd graag als DJ zijn liefde voor muziek.
1 Reactie Plaats een reactie
Inmiddels lijkt het erop dat een combinatie van beide technieken tot best practice is verheven. Zie o.a. http://html5boilerplate.com

Plaats een reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.