Conditional Comments

Bron: http://www.sceneone.nl/tips_tricks/conditional_comments.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Sommige zaken in het leven zijn nou eenmaal niet zo mooi als ze zouden kunnen zijn.

Zo zouden ze bij Microsoft bijvoorbeeld kunnen besluiten om zichzelf te gaan concentreren op hun besturingssysteem (laten we eerlijk zijn, daar hebben ze al problemen genoeg mee) en het ontwikkelen van browsers over laten aan anderen. Ze zouden kunnen zeggen, we laten Internet Explorer 6 langzaam uitsterven en that's it. We kappen met die browser business. Laat die gasten van Mozilla en Opera maar browsers bouwen.

Internet Explorer 7

Dat zou het leven een stuk aangenamer maken. Maar zoals we allemaal weten, weten ze bij Microsoft van geen ophouden en zijn ze nu met Internet Explorer 7 voor de dag gekomen.
Naar goed gebruik hebben ze een aantal zaken goed gejat van anderen en eerlijk is eerlijk. IE 7 is zo slecht nog niet. Ze hebben een heleboel van de IE 6 bugs gefixed.

Wat ze ook gefixed hebben zijn de bugs waar wij gebruik van maakten. De css hacks die ik hier beschrijf doen immers niets anders dan gebruik maken van de onvolkomenheden in Internet Explorer.

No more

Omdat die onvolkomenheden weggewerkt zijn in IE 7 kunnen we van die hacks geen gebruik meer maken.

Wat nu!

Het antwoord is: conditional comments.
Eigenlijk een hele mooie manier om de verschillende versies van Internet Explorer, ieder apart te kunnen benaderen.

Korte uitleg

Het is niet zo moeilijk, dat verhaal met die conditional comments. Eerst maar even over gewone html comments.
Als je tussen je html code een stukje commentaar wilt schrijven. Om iets te verduidelijken of als geheugensteuntje voor jezelf dan kan dat door het tussen comment tekens te zetten:

HTML: <!-- dit zal door iedere browser worden gezien als een comment -->

Een html comment opent dus altijd met <!-- en wordt afgesloten met -->.
Alles wat daartussen staat wordt door een browser niet getoond. Het is alleen te lezen in de code. Verrekte handig!

De conditional comments zijn hiervan afgeleid. Ze zijn bedacht door Microsoft en werken alleen voor Internet Explorer.
Door een kleine toevoeging aan de html comment maken we er een conditional comment van en kunnen we hetgeen tussen de comment tekens staat alleen laten gelden voor één (of meerdere) versie(s) van IE.

Een voorbeeld

Stel dat we een om de een of andere reden een stukje tekst alleen in IE 6 willen laten zien. We willen dus aan dat stukje tekst een voorwaarde toevoegen, een conditie, in het engels een condition. Dan kan dat met een conditional comment:

HTML: <!--[if IE 6]> Deze tekst zal alleen getoond worden door <strong>Internet Explorer 6</strong>. <![endif]-->

bekijk het resultaat

Als je de resultaat pagina van het bovenstaande voorbeeld bekijkt zul je zien dat in de resultaat box alleen de tekst getoond wordt als je de pagina bekijkt met IE 6. Iedere andere browser toont in de resultaat box alleen 'RESULTAAT:' en meer niet.
Ditzelfde kunnen we doen voor IE 7:

HTML: <!--[if IE 7]> Deze tekst zal alleen getoond worden door <strong>Internet Explorer 7</strong>. <![endif]-->

bekijk het resultaat

De resultaat box op de resultaat pagina van dit voorbeeld zal alleen zichtbaar zijn in IE 7. Niet in Firefox, niet in IE 6 of in Safari of Opera.

Klein extraatje

Ze hadden bij Microsoft echt een hele goede dag toen ze dit allemaal bedachten want ze hebben er nog een extraatje aan toegevoegd, namelijk de toevoegingen:

Dit werkt dan als volgt:

HTML: <!--[if lt IE 7]> Deze tekst wordt alleen getoond door alle versies van Internet Explorer lager dan 7. <![endif]-->

<!--[if gte IE 6]> Deze tekst wordt alleen getoond door Internet Explorer 6 en hoger. <![endif]-->

<!--[if !IE 7]> Deze tekst wordt getoond door alle versies van Internet Explorer behalve 7. <![endif]-->

Nu in combinatie met stylesheets

Bovenstaande voorbeelden zijn allemaal met een stukje tekst, maar je begrijpt dat we deze conditional comments ook kunnen gebruiken om een specifiek stylesheet te reserveren voor een specifieke browser.
Je zou nu in de head van je pagina 3 stylesheets kunnen declareren. Bijvoorbeeld:

En dat ziet er dan zo uit:

In de head van je pagina: <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->

<!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->

Op die manier kun je de specifieke declaraties voor een specifieke browser kwijt in de bijhorende stylesheet.
In styles.css (wat gelezen wordt door alle browsers) zet je al je stijlen. Alles wat fout gaat in IE6 overschrijf je in ie6.css (wordt alleen gelezen door IE6) en mocht je nog dingetjes tegenkomen die je moet corrigeren voor IE7 dan kan dat in ie7.css.

Als je zo vriendelijk wilt zijn om bijvoorbeeld IE 5.5 nog te ondersteunen dan kan dat met bovengenoemde methode ook nog.

En andere browsers dan?

De hierboven beschreven methode werkt alleen voor Internet Explorer. De stylesheet styles.css moet dus goed genoeg zijn voor alle andere browsers, ook voor de Mac.

Het is mijn ervaring dat alle andere (standard compliant) browsers zoals Firefox (voor Mac en PC), Safari, Opera, etc, zoveel op elkaar lijken dat het over het algemeen wel goed gaat.
Als het werkt voor Firefox op PC werkt het voor die andere browsers (inclusief de moderne Mac browsers) over het algemeen ook wel. Zelfs IE7 loopt heel redelijk in de pas mee.

We zijn voorlopig natuurlijk nog wel royaal genaaid met IE6. Daar zijn we nog niet vanaf.

Sommige zaken in het leven zijn nou eenmaal niet zo mooi als ze zouden kunnen zijn.

naar het begin van de pagina