Modernizr, HTML5 en CSS 3 laten werken

Modernizr, HTML5 en CSS 3 laten werken

HTML5 oplossingen met ModernizrWe kunnen niet meer om HTML5 en CSS3 heen. Ook al zijn beiden nog niet af, ze worden meer en meer gebruikt op websites, op internet. Misschien ben jij je er ook wel in aan het verdiepen, en dat is natuurlijk geweldig. Het is echter wel zo dat je met steeds meer browsers rekening moet houden en natuurlijk weet je niet uit je hoofd welke functies in welke browsers wel en niet werken.

Modernizr

Daar zijn wel overzichten van en misschien moet je die maar eens uitprinten en naast je computer leggen, maar je kunt ook een javascript library gebruiken om dit voor je te doen. Modernizr is een script library, wat aan de hand van de browser die wordt gebruikt bepaalde classes aan de html-tag toevoegt en daarmee bepaald wat er aan code wel en niet gebruikt moet worden.

Wel of niet gebruiken in CSS

Als je bijvoorbeeld ronde hoeken wilt invoegen in een zijbalk van je website, dan moet je alternatieven bedenken voor browsers die border-radius niet ondersteunen. Doordat Modernizr een class aanmaakt hoef je niet meer na te denken waar dat wel en niet voor moet, je schrijft een CSS code voor een browser die de functie ondersteunt en je schrijft CSS code voor de browser die dat niet doet.

Met deze twee mogelijkheden ben je klaar.

Naast deze mogelijkheid ondersteunt Modernizr ook de oplossing voor HTML tags die nog niet door bijvoorbeeld Internet Explorer worden gebruikt. Er wordt een regel met code aangemaakt zodat bijvoorbeeld <header> wel netjes weergegeven worden en geen fouten veroorzaakt.

De browser wordt niet beter, je stijlblad wordt beter

Modernizr is geen functie waarmee je alle browsers ineens verlost van de problemen. Het is niet zo dat met Modernizr Internet Explorer 6 ook HTML 5 en CSS 3 kan intepreteren. Maar je kunt wel makkelijk alternatieven aanmaken voor browsers die iets niet ondersteunen.

Voorbeeld code die dan gebruikt wordt is

.multiplebgs div p {
  /* eigenschappen voor browsers die een bepaalde toepassing ondersteunt */
}
.no-multiplebgs div p {
  /* eigenschappen voor browsers die een bepaalde toepassing niet ondersteunt */
}

In feite zet deze javascript library dus ‘no-‘ voor toepassingen die niet ondersteunt worden. Je kunt dus zelf in je CSS document de bovenstaande optie aanmaken, een gewone stijl en een alternatieve stijl.

Kortom, Modernizr, om HTML5 en CSS effectief te laten werken.

          Leuk als je dit artikel deelt:
Share

2 gedachten over “Modernizr, HTML5 en CSS 3 laten werken

  1. Ik ben persoonlijk meer van fan HTML5SHIM maar dat is persoonlijk. Daarmee hoef je niet je CSS aan te passen, dat scriptje zorgt ervoor dat alles werkt met je huidige code (minder (aanpas)werk dus)

Geef een reactie

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