IE8 en 9 debuggen in Mac OSX met Virtualbox van Oracle

Internet Explorer is net een zombie uit een hele slechte horror film. Hij trotseert alle kogelregens en neergaan doet ie niet. Gelukkig zijn we nu bij de slotscene. Alleen IE8 hoeft nog aangepakt te worden, want IE8 is de hoogste versie van IE die je nog kan installeren op Windows XP. En tegen de tijd dat XP kassiewijle is (medio 2014) is IE10 (en hoger) allang ingeburgerd.

Zonder research te plegen was dit mijn setup op mijn Mac: naast een iMac had ik twee Windows laptops staan, 1 met windows 7 (IE 9) en 1 met Windows XP (IE 8) en dan via versiebeheer of FTP op mijn Mac bestanden debuggen en kijken hoe dat uitpakte op beide laptops. Ik hoef je niet te vertellen wat voor een pain-in-the-ass deze opzet was.

Bootcamp misschien?

Op mijn iMac heb ik twee besturingssystemen geïnstalleerd: Mac OSX en Win 7. Macs ondersteunen namelijk via Bootcamp out of the box meerdere besturingssystemen naast elkaar. Bij het aanzetten van de iMac kan ik kiezen in welke van de twee ik opstart. Het voordeel is dat je een volledige en razendsnelle versie van Windows hebt om in te debuggen. Maar het nadeel: alleen één Windows versie (bij mij Win 7) en alleen één IE versie: IE8 of 9 of 10 of 11.

Nu ben ik bij die scene beland waar die crew-member in
Event Horizon zijn oogballen uit zijn schedel rukt en schreeuwt: “Liberate Me!”

Emulatie software gebruiken

Dit moet anders. Er was nog een optie die ik nog niet overwogen had: een emulator gebruiken. Een emulator is een “virtuele zandbak” die je kan installeren op je computer: de emulator applicatie opent dan een venster op je bureaublad, en in dat venster kun je een compleet ander besturingssysteem openen en draaien, bovenop je huidige besturingssysteem!

Ik zag dit wel zitten, en Microsoft klaarblijkelijk ook. Ze hebben sinds IE 10 een website en portal opgezet (modern.ie ) waar je complete ingepakte versies van Windows kan downloaden die je als pakket kan opstarten in een emulator (op die site vind je trouwens ook een hoop geblaat en gepreek over web standaards, wat belachelijk is, aangezien zij die regels de afgelopen tien jaar zelf aan hun laars gelapt hebben)

VirtualBox

Een hele bekende en Open Source simulator voor de Mac is VirtualBox van Oracle. Je moet eerst deze applicatie besturingssysteem van keuze (met systeemgebonden browser) downloaden van modern.ie (IE versies voor Virtualbox hier ) en off you go! Want in VirtualBox kun je gewoon de gedownloade besturingssystemen openen en opstarten in een venster op je bureaublad!

Hieronder zie je mijn workflow met VirtualBox. Rechtsonder zie je mijn text-editor openstaan (Sublime Text) en in het midden van het beeldscherm in een venster draait als voorbeeld Windows 7, met IE9. Het paneel rechtsonder is het instellingspaneel van VirtualBox, als het goed is kun je precies zien welke versie van Windows draait in het venster, en wat de resources zijn die deze gebruikt (ik heb bij de instellingen 2Gig RAM toegewezen aan Win 7) En als je Mac een SSD drive heeft is het sowieso helemaal feest, want VirtualBox draait dan als een trein.

Je kunt heel makkelijk in het preferences paneel van VirtualBox instellingen wijzigen voor het besturingssysteem dat je draait in het pop-up venster van je bureaublad. Rechts zie je de besturingssytemen die je gedownload hebt, en als je die aanklikt, zie je de settings die bij die emulatie horen.

Ik gebruikte vroeger CSS hacks rechtstreeks in de standaard CSS bestanden om het gedrag van IE in het gareel te houden, maar het is tegenwoordig beter om IE conditionals te gebruiken, want die zijn forwards compatible: je kan ze weer uit je code kieperen als oude versies van IE ten grave worden gedragen. Eentje die ik veel gebruik (als dit het geval is doe dat) is de volgende:

    <!--[if lt IE 9]>
    <script src="js/rem.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/ie-fixes.css" type="text/css"/>
    <script src="js/jquery-1.js"></script>
    <![endif]-->
    <!--[if gte IE 8]><!-->
    <script src="foundation/js/jquery.js"></script>
    <!--<![endif]-->
    

Hierboven geef ik aan IE door dat er enkele bestanden moeten worden geladen, afhankelijk van welke versie van IE wordt bezocht: kleiner dan IE9 [if lt IE 9], en groter dan IE8
[if gte IE 8]. Je kan ook in de Developer Tools van IE9 checken of die conditionals worden geladen of genegeerd, zoals je hieronder kan zien. De lege comment tag in de “ empty text node ” boven de jQuery JS link is de plek waar de link naar de oude versie van JQuery stond tussen conditionals. IE9 ziet hem niet!

Hee, klant heeft IE11! Mooi toch?

Dat dacht ik ook. Hier een scenario: ik ontdekte dat de sliders van deandereschilder.nl niet werkten in IE11 (wel in IE9, IE10, Google Chrome en FireFox) De afbeeldingen zijn lege DIVs (met CSS backgrounds) die je kan swipen. De width en height van die DIVs staan beide op 100%. IE11 lijkt nu lege HTML tags niet te renderen, al staan de width en height op 100%, want IE11 gaat ervan uit dat als een element geen content heeft, die waarschijnlijk ook niet gerenderd hoeft te worden. Dus let op lege DIVs en SPANs. Er moet content in zitten, als is het maar een non-breaking space . Anders komt het empty node syndroom van IE weer boven water drijven.

Plaatjes pre-loaden op de achtergrond met puur CSS

Over de slider gesproken, ik ontdekte een truckje waarmee je afbeeldingen kan pre-loaden op de achtergrond met CSS. Dat werkt dan zonder javascript. Typ het onderstaande in je CSS code. Het grappige is dat je alsmaar door kan gaan met
urls toevoegen. Door body:before; worden ze geïnterpreteerd als “ pre-content ”, en door display:none; worden ze verborgen, na het pre-loaden 🙂

    body:before {
    content: url(img/slide-10.jpg) url(img/slide-11.jpg) ..enz ;
    display:none; }
    

Yepper!

Dit is de eerste keer dat ik een artikel via mijn Android heb getypt (of beter gezegd geswiped). De automatische aanvulfunctie werkt best wel goed, al veranderde deze wel steevast “VirtualBox” in “Viriele boycot”.

@davidvandenbor