Een van de zaken die ik me herinner uit de begintijd van webdevelopment, we spreken de tijd van Netscape 4 en IE4, was het rekening houden met de grote lijst van verschillen tussen die browsers.
Als Netscape 4 dan dit, als IE4 dan zus, als IE5 dan zo.
De laatste jaren waren in dat opzicht iets eenvoudiger: er kwamen wel meer browsers bij waar je rekening mee moest houden, maar met de komst van JQuery was werden veel verschillen netjes gladgestreken.
Maar nu: HTML5.
Eigenlijk een specificatie van de nieuwe HTML standaard en nog volop in ontwikkeling, maar langzaam verworden tot een losstaand begrip net als ‘web 2.0‘.
Omdat HTML5 een buzzword aan het worden is en de meeste browsers al een deel van de (lopende) specificaties aan het implementeren zijn, willen veel developers toch al iets leuks doen met de nieuwe mogelijkheden.
Maar hoe weet je nu of de browser waarin jouw site wordt getoond wel jouw mooie Canvas ondersteunt? Of het nieuwe Video element, of de Rounded Corner?
Dat kun je natuurlijk zelf gaan afvragen maar je kunt ook gebruik maken van modernizr.
Als je gebruik maakt van modernizr dan vult modernizr de html tag met classnames die weergeven welke functionaliteiten de browser ondersteunt. Je kunt deze classes vervolgens gebruiken om styling in je CSS toe te passen afhankelijk van de ondersteuning van Canvas, Rounded Corners of niet.
Bijvoorbeeld:
.canvas #myCanvas{
background-color:green;
}
.no-canvas #myCanvas{
background-color:blue;
}
Als de browser geen HTML5 Canvas ondersteunt dan zal het in de html tag de classname ‘no-canvas‘ toevoegen; als de browser de Canvas wel ondersteunt dan zal het de classname ‘canvas‘ toevoegen.
Dit kun je dan gebruiken in je CSS om een element te stylen.
Ook voor deze kennis in je Javascript is gezorgd: modernizr geeft ook een Javascript object met properties welke functionaliteiten door de browser worden ondersteund:
if (Modernizr.canvas) {
//create nice canvas
}
else{
//hide the canvas element
}
Een goede (korte) getting started staat hier: http://webdesignernotebook.com/css/how-to-use-modernizr/
‘k moet zeggen dat ik in eerste instantie niet stond te springen om weer een nieuw soort framework: Jquery.
Mijn top 5 ervaringstips:
) applicatie voor het uitvoeren van functioneel testen. En ik moet zeggen: dat werkt heel plezierig. Niet alleen dat er wordt getest, maar als je code hebt aangepast en je eigen unit tests hebt uitgevoerd, dan is het fijn om even de functionele tests te runnen om te zien of niet alleen jouw service nog goed werkt, maar of ook de applicatie, de front-end, nog doet wat je verwacht.
Elke developer krijgt de vraag als je hebt aangegeven dat je weet wat er gebouwd gaat worden (of als je nog geen flauw idee hebt, als iemand je in 1 minuut een systeem heeft uitgelegd dat minimaal 5 manjaar kost om te bouwen, maar dat terzijde): wanneer is het af?
