Conditional comments

Iedereen heeft dit wel al eens meegemaakt, Internet Explorer ondersteund iets niet. Meestal kan je dit wel oplossen door je code wat aan te passen. Als je echt geen oplossing vind of je hebt geen zin om één te zoeken, dan kan je het nog altijd oplossen met conditional comments. Met conditional comments kan je bepaalde stukken code alleen maar laten weergeven in de browser Internet Explorer.

Zo kan je bijvoorbeeld een extra stylesheet maken voor IE, of een ‘uw browser wordt niet ondersteund’ berichtje laten weergeven.

De code

De code zit eigenlijk heel eenvoudig in elkaar. Ik zal een voorbeeld geven en dan alle stukjes code uitleggen. Je zult ook zien dat het stuk if IE telkens terug komt.

<!--[if IE 6]>
Dit wordt alleen weergegeven in Internet Explorer 6
<![endif]-->

Het begint met <!– en eindigd met –>, dat is de structuur van stuk commentaar in je html code. Een normale browser zal dit dus negeren, wat ook de bedoeling is natuurlijk. In het voorbeeld zie je ook een voorwaarde: if IE 6 = als Internet Explorer 6. Die voorwaarde kan je aanpassen. In het voorbeeld hieronder wordt het stukje tekst alleen maar weergegeven in Internet Explorer 7.

<!--[if IE 7]>
Wordt alleen weergegeven door IE 7
<![endif]-->

Maar er zijn nog mogelijkheden. Je kan bijvoorbeeld een stukje tekst laten weergeven in browsers die ouder zijn dan IE6, of browsers vanaf IE5. In de volgende voorbeelden zal je zien dat je de voorwaarde nog uitgebreid kan worden.

<!--[if lt IE 7]>
Wordt alleen weergegeven door versies lager dan IE7
<![endif]-->

<!--[if gt IE 6]>
Wordt alleen weergegeven door versies hoger dan IE6
<![endif]-->

<!--[if lte IE 6]>
Wordt alleen weergegeven door versies lager dan IE6 en IE6
<![endif]-->

<!--[if gte IE 5]>
Wordt alleen weergegeven door versies hoger dan IE5 en IE5
<![endif]-->

Even alles op een rijtje:
lt = lager dan
gt = hoger dan
lte = lager dan of gelijk aan
gte = hoger dan of gelijk aan

Wat als je nu wil dat er iets wordt weergegeven in alle browsers uitgezonderd IE. Heel simpel, dan gebruik je gewoon het volgende stukje code.

<!--[if !IE]><!-->
U bent verstandig, u surft niet met Internet Explorer.
<!--<![endif]-->

Nu is er nog één mogelijkheid. Je kan iets laten weergeven door een specifieke IE-browser en door alle niet-IE browsers. Zo dus.

<!--[if IE 7]><!-->
U gebruikt een niet-IE browser of IE7
<!--<![endif]-->

Een laatste tip

Als je de conditional comments gebruikt om een aparte stylesheet in te laden is er één regel. Eerst je gebruikelijke stylesheet inladen (niet met @-import), en dan pas je aparte stylesheet voor IE.

Gebruik dit alleen maar als het echt nodig is! Het is nog altijd beter als je een stylesheet hebt die in alle browsers zijn werk doet.