Testen in Internet Explorer

Tijdens de ontwikkeling van een website of webapplicatie wil en moet je deze testen op diverse platforms en browsers. Voor een deel van de platforms (denk aan mobiele telefoons, verschillende IOS versies etc) ben je aangewezen op individuele apparaten als je het echt goed wilt testen. Er zijn wel emulators maar dit is vaak geen realistische test. zeker als het gaat om specifieke implementaties van de HTML/CSS specificaties die met versies van software en devices kunnen veranderen.

Testen in Internet Explorer

Altijd een beetje een vervelende geweest om te testen maar wel vereist. Internet Explorer heeft namelijk nogal wat verschillende gezichten die ook nog wisselen per Windows versie-Browser versie combinatie. Er zijn prima online rendering oplossingen maar deze zijn prijzig of van onbruikbare kwaliteit. Microsoft biedt zelf echter de helpende hand aan developers en designers middels Modern.ie.

Modern.ie

Hier tref je diverse configuraties aan van het Windows platform met zijn verschillende browser versies. Allemaal te downloaden als images van virtualisatie platforms zoals Virtualbox of VMware. Wij gebruiken zelf meestal Virtualbox (zowel op Windows als Mac omgevingen).

Na het downloaden van een image beschik je over een prachtige (vanilla) Windows installatie met de juiste browser voor de meest natuurgetrouwe test. Dit is trouwens niet alleen handig voor het testen op oudere platform/combinaties zoals Windows XP met Internet Explorer 6 maar ook iets nieuws als Windows 8.1 met Internet Explorer 11.

Ga naar de dowload sectie van Modern.IE

CSS3 box shadow en Internet explorer <9

Nu CSS3 steeds meer onderdeel wordt van het dagelijks leven blijf je altijd weer met Internet explorer zitten. Alle meestgebruikte versies ondersteunen een hoop leuke CSS3 zaken niet. Vandaag was mijn irritatiepuntje de box shadow. Ik wilde deze met zo min mogelijk moeite werkend krijgen in IE zonder allerlei ingrepen. Nu zijn op zich de meeste zaken wel mogelijk zoals positieve, of negatieve offsets door middel van Microsoft filters. Alleen ik wilde een drop shadow langs alle kanten. Dit leek me zo voor de hand liggend maar het heeft me toch even gekost voor ik enige zinnige implementaties en voorbeelden hiervan had gevonden.

Ik heb voor het gemak even 3 heldere voorbeelden van drop shadows uiteen gezet met CSS code erbij (-webkit, -moz, CSS3 tag zelf en IE alternatief).

Resultaat in Internet explorer 8

Het resultaat in Firefox

Klik hier om de demo te bekijken

Een stap verder

Er zijn nog leukere mogelijkheden maar die vergen iets meer verdieping. Zo kun je bijvoorbeeld met een extra div voor de shadow om je primaire div heen ook nog gekkere dingen doen. Op css-tricks.com staat dit heel helder uitgelegd.