Conditional Comments

Quirksmode geeft als altijd weer een uitstekende uitleg.

Een welbekend gebruik van de conditional comments zien we bij de eerste regels van de zogenaamde 'Html5 Boilerplate'. De Internet Explorer browsers beschouwen alles tussen <!--[if conditie ]> en <![endif]--> als geldige Html als de conditie van toepassing is. Alle andere browsers komen na het passeren van '<!--' in een toestand waarin ze nog maar één ding kunnen waarnemen namelijk: '-->'. Pas als ze dat weer zijn tegengekomen, keren ze terug in, zeg maar, de HTML-parsermodus. Die conditional comments worden dus door niet-IE-browsers totaal niet opgemerkt. Dit is een buitengewoon welkom middel om de problemen die het gevolg zijn van Internet Explorer's afwijkende gedrag, op te lossen. Dit wetende kunnen we vrij makkelijk nagaan wat er met de volgende regels gebeurt. De eerste 5 regels worden door alle niet-IE-browsers gewoon als commentaar beschouwd. Wat betreft IE-browsers, die zullen al naar gelang hun versie één van deze regels als html uitvoeren. De laatste regel is echt een pareltje van vernuft. Hier zullen alle IE-browsers in de commentaar-modus schieten en er tot het einde in blijven terwijl alle anderen er nog vóór de html weer uit komen en de ingesloten tag dus als html zullen parsen.

Hier onder is op de bovenste regel in blauw aangegeven welke delen door niet_IE-browsers als commentaar worden beschouwd. Op de regel daaronder hetzelfde voor de IE-browsers.

<!--[if !IE]><!--> <html class="no-js"> <!--<![endif]-->

<!--[if !IE]><!--> <html class="no-js"> <!--<![endif]-->

Merk op hoe de twee streepjes in '<!-->' zowel deel uitmaken van het 'commentaar-begin'-teken als van het 'commentaar-einde'-teken daardoor zal een browser in Html-modus na het lezen van '<!--' in de commentaarmodus springen waardoor de resterende '>' betekenisloos is. Een browser die al in de commentaarmodus verkeert, zal '-->' signaleren en weer in de Html-modus springen. Merk op dat '<!-- -->' niet zou werken want dan wordt de commentaarmodus direct weer verlaten. De grap is dat die twee streepjes òf bij de ene, òf bij de andere tekenreeks horen.

Blijkbaar bestond er behoefte aan een tweede soort conditional comment, namelijk één die de inhoud juist verborgen houdt voor IE-browsers. De makers van IE knutselde daarom in hun browsers de eigenschap dat ook <![if !IE]> werd herkend. Let op, deze opent dus met <! en niet met <!-- IE herkent dus, ondanks dat, ook deze conditie. Dit kwam echter nooit door de validatie heen want het is geen valide Html. De truc was dat niet-IE-browsers er geen commentaar in zagen, en de inhoud dus gewoon weergaven maar daardoor kwamen er wel tekens in de Html te staan die daar niet in thuishoren. Om die reden is dit niet populair geworden. Al gauw kwam er iemand met de volgende oplossing: <!--[if !IE]>--> <html class="no-js"> <!--<![endif]-->. Nu heb je wel valide html... behalve.. als dit door een IE-browser gelezen wordt. In dat geval staat er een betekenisloos '-->' tussen je Html, wat ook weer niet door de validatie heen komt. Om dat op te lossen wordt daarvoor in de plaats '<!-->' gebruikt. Als er nu betekenisloze tekens overblijven dan maken ze deel uit van het commentaar en dan is het niet erg. Een mooie elegante oplossing. De makers van IE hadden zich de moeite kunnen besparen om de lelijke uitzondering dat <![if !IE]> als commentaar wordt beschouwd, in te bouwen; er bleek met de bestaande middelen al een mooie oplossing mogelijk. Goede uitleg hierover op Wikipedia.

Nog even iets over de gebruikte afkortingen in de conditions: 'IE' staat voor 'Internet Explorer' en '!IE' voor 'geen Internet Explorer'. 'lt' staat voor 'less-than' en 'lte'voor 'less-than or equal', 'gt' natuurlijk voor 'greater-than'. Vanaf IE 10 worden de conditional comments ook door IE genegeerd. Het verschijnsel van de conditional comments zal in de toekomst steeds minder belangrijk worden.

Het is grappig dat de conditie <--![if !IE]> die alleen door IE gelezen kan worden en dus altijd false is, toch nut heeft. Het gaat er namelijk alleen om dat de browser daardoor uit de comment-modus komt zodat hij er direct daarna, op de plaats waar andere browsers er juist uitkomen, weer in kan schieten. De prachtige vondst <!--> zorgt dat overbodige tekens voor iedere browser in het comment valt.