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]-->
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]-->
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:
- lt, less-than (minder dan)
- lte, less-than or equal (minder dan of gelijk aan)
- gt, greater-than (meer dan of groter dan)
- gte, greater-than or equal (meer dan of gelijk aan)
- !, not (ongelijk aan)
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:
- styles.css (voor alle browsers)
- ie6.css (alleen voor IE 6)
- ie7.css (alleen voor IE 7)
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.