Conditional Comments - Wat, hoe en waarom?

Trefwoorden: HTML, XHTML, browser, Internet, webpagina, opmaak, browser targetting, downlevel-released, downlevel-hidden, CSS

Inhoudsopgave


1. Inleiding
2. Waarvoor kan ik conditional comments gebruiken?
3. Hoe zien conditional comments er uit?
  3.1. Algemeen
  3.2. Eenvoudige condities
  3.3. Complexere condities
4. Concreet gebruik
  4.1. Stylesheets
  4.2. Niet-standaard elementen
  4.3. Niet of slecht ondersteunde CSS properties
5. Extraatje!
6. Slotwoord

1. Inleiding


Conditional Comments, vrijelijk te vertalen door voorwaardelijke opmerkingen, laten een ontwikkelaar van een webpagina toe om bepaalde informatie enkel te laten doorstomen naar vooraf gekozen browsers (of versies van browsers). Wanneer niet voldaan wordt aan de voorwaarden om de informatie te laten doorstromen, wordt die informatie behandeld als commentaar. In dat laatste geval heeft deze dus geen impact op de weergave van de pagina.

2. Waarvoor kan ik conditional comments gebruiken?


Nu lijkt deze aanpak op het eerste zicht misschien vrij obscuur (je wil in de eerste plaats namelijk dat informatie in elke browser zichtbaar is), toch heeft de techniek zo zijn doeltreffende toepassingen. Zo kan je via conditional comments bijvoorbeeld een melding tonen aan een bezoeker wanneer deze een oude browser gebruikt. Een andere, veelgebruikte, toepassing is deze waarbij je via conditional comments een extra stylesheet naar een bepaalde versie van een browser stuurt. Hierdoor kan je CSS hacks ontwikkelen en deze enkel actief maken in de browsers waar dit ook effectief nodig is.

3. Hoe zien conditional comments er uit?


3.1. Algemeen

Genoeg theorie nu, een praktijkvoorbeeld zal een en ander duidelijk maken. Zoals gezegd, interpreteren niet-geviseerde browsers conditional comments als commentaar. Om dit te bekomen, moet de conditional comment er dus ook uitzien als commentaar. Elke conditional comment heeft daarom volgende structuur:
CODE
  1. <!--[if conditie]> Lorem ipsum dolor sit amet.<![endif]-->

Merk op dat de eerste vier karakters exact deze zijn van een regel commentaar in HTML. Vlak daarna, kan je een conditie opmerken, welke tussen vierkante haakjes wordt geplaatst. Helemaal op het einde, merk je een afsluitende tag, waarbij de drie laatste karakters dezelfde zijn als de afsluitende karakters van een normale regel commentaar.

3.2. Eenvoudige condities

Deze structuur komt altijd terug, bij elke conditional comment. Het enige wat kan verschillen, is wat tussen de begin en eind-tag staat en natuurlijk de conditie waarop gecontroleerd wordt. De opbouw van de conditie is vrij straightforward; wil je bijvoorbeeld controleren of de gebruikte browser Microsoft Internet Explorer 6 is, zou je volgende code kunnen overnemen:

CODE
  1. <!--[if IE 6]>U gebruikt momenteel Microsoft Internet Explorer versie 6.<![endif]-->

Controleren of de bezoeker Microsoft Internet Explorer 7 gebruikt, gaat dan weer zo:

CODE
  1. <!--[if IE 7]>U gebruikt momenteel Microsoft Internet Explorer versie 7.<![endif]-->

Je kan deze twee codes ook combineren door ze onder elkaar te plaatsen:

CODE
  1. <!--[if IE 6]>U gebruikt momenteel Microsoft Internet Explorer versie 6.<![endif]-->
  2. <!--[if IE 7]>U gebruikt momenteel Microsoft Internet Explorer versie 7.<![endif]-->


3.3. Complexere condities

In sommige situaties kan het handig zijn om te controleren of de versie van een browser groter of net kleiner is dan een bepaalde versie. Denk ook aan situaties waarbij je wil nagaan of de gebruikte versie precies niet gelijk is aan een bepaald versienummer (bijvoorbeeld: alle versies van Microsoft Internet Explorer behalve versie 6). Ook dit is mogelijk, hiervoor moet je echter wel je conditie iets uitbreiden met een operator. We onderscheiden een vijftal operators:

  • lt: less than (kleiner dan)
  • lte: less than or equal (kleiner dan of gelijk aan)
  • gt: greater than (groter dan)
  • gte: greater than or equal (groter dan of gelijk aan)
  • !: not equal to (niet gelijk aan)

Deze operators worden concreet gebruikt als volgt:

CODE
  1. <!--[if lt IE 6]> U gebruikt momenteel een browser die ouder is dan Microsoft Internet Explorer 6.<![endif]-->
  2.  
  3. <!--[if gte IE 6]>U gebruikt momenteel Microsoft Internet Explorer versie 6 of later.<![endif]-->
  4.  
  5. <!--[if !IE 7]> U gebruikt momenteel niet Microsoft Internet Explorer versie 7.<![endif]-->

Tevens is het mogelijk de conditie uit te breiden via de AND en de OR operator:

CODE
  1. <!--[if (lt IE 6) | (gt IE 7)]> U gebruikt momenteel een browser die ouder is dan Microsoft Internet Explorer versie 6 of recenter dan versie 7.<![endif]-->

Merk ook op dat je haakjes kan gebruiken om de logica te scheiden en/of meer complexe condities te schrijven.

4. Concreet gebruik


4.1. Stylesheets

Zoals eerder in dit artikel reeds vermeld, worden conditional comments de dag van vandaag vaak gebruikt om bepaalde stylesheets naar vooraf gekozen versies van browsers te sturen. In de praktijk komt dit er op neer dat je één stylesheet ontwikkelt met je algemene opmaak, welke geacht wordt globaal gezien te werken. Je komt echter tot de constatatie dat de opgestelde stylesheet ertoe leidt dat bepaalde elementen anders worden weergeven in Microsoft Internet Explorer 6. Vervolgens beslis je een specifieke stylesheet te ontwikkelen (die de opmaak uit het initiële bestand overschrijft) en deze enkel te laten uitvoeren in deze laatste browser. De referenties naar deze stylesheets kunnen op onderstaande manier worden gelegd.

CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Multidesk.be - D&eacute; gratis pc- en multimedia helpdesk</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection, tv" />
  7. <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen, projection, tv" /><![endif]-->
  8. </head>
  9. <body>
  10. <h1>Conditional Comments</h1>
  11. <p>Hello world!</p>
  12. </body>
  13. </html>

4.2. Niet-standaard elementen

Een andere situatie waarin conditional comments gebruikt werden, is bij het weergeven van niet-standaard HTML elementen. Een voorbeeld van zulk element, is marquee. De marquee-tag laat je toe, zonder al te hard in detail te treden, een tekst te laten schuiven over je pagina. Omdat dit element niet tot de HTML-standaard behoort, is dit dus ook niet beschikbaar in sommige browsers. Via conditional comments kan je deze tag dus enkel tonen in bijvoorbeeld Microsoft Internet Explorer:
CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Multidesk.be - D&eacute; gratis pc- en multimedia helpdesk</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection, tv" />
  7. </head>
  8. <body>
  9. <h1>Conditional Comments</h1>
  10. <p>Hello world!</p>
  11. <!--[if IE]><marquee>Deze tekst schuift over de pagina....<![endif]-->
  12. </body>
  13. </html>

4.3. Niet of slecht ondersteunde CSS properties

Versies van Microsoft Internet Explorer lager dan versie 7 hebben serieuze problemen om een aantal zaken correct op het scherm van de gebruiker te tonen. Soms kan je dit corrigeren met conditional comments via een techniek als deze in het eerste voorbeeld, soms is het echter beter dat je de informatie gewoon verbergt.

Zo heeft Microsoft Internet Explorer versie 6 bijvoorbeeld moeilijkheden met het renderen van elementen die via css position:fixed krijgen aangemeten. De bedoeling is dat deze elementen in hun oorspronkelijke positie blijven staan, ook al wordt er door de bezoeker op de pagina gescrolled. Via onderstaand voorbeeld kan je zien hoe je zulke elementen gewoon verbergt indien ze niet correct weergeven kunnen worden.
CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Multidesk.be - D&eacute; gratis pc- en multimedia helpdesk</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style style="text/css">
  7. #banner{
  8.         position:fixed;
  9.         left:0;
  10.         top:0;
  11.         width:500px;
  12.         padding:5px;
  13.         background:#ffc;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <!--[if gte IE 7]>
  19. <div id="banner">Dit element krijgt via CSS de regel <em>position: fixed</em> toegepast. Versies van Microsoft Internet Explorer ouder dan versie 7 weergeven dit echter niet correct. Deze tekst is enkel zichtbaar voor Microsoft Internet Explorer versie 7 en later.</div>
  20. <![endif]-->
  21. <p>Hello world!</p>
  22. <p>Hello world!</p>
  23. <p>Hello world!</p>
  24. <p>Hello world!</p>
  25. <p>Hello world!</p>
  26. <p>Hello world!</p>
  27. <p>Hello world!</p>
  28. <p>Hello world!</p>
  29. <p>Hello world!</p>
  30. <p>Hello world!</p>
  31. <p>Hello world!</p>
  32. <p>Hello world!</p>
  33. <p>Hello world!</p>
  34. <p>Hello world!</p>
  35. </body>
  36. </html>

Opmerking: In principe plaats je de CSS best in een extern bestand. Om de complexiteit te verminderen, hebben we in bovenstaand voorbeeld de opmaak echter in hetzelfde document geplaatst.

Wanneer je overigens
CODE
  1. <!--[if gte IE 7]>
  2. <div id="banner">Dit element krijgt via CSS de regel <em>position: fixed</em> toegepast. Versies van Microsoft Internet Explorer ouder dan versie 7 weergeven dit echter niet correct. Deze tekst is enkel zichtbaar voor Microsoft Internet Explorer versie 7 en later.</div>
  3. <![endif]-->

Vervangt door

CODE
  1. <![if gte IE 7]>
  2. <div id="banner">Dit element krijgt via CSS de regel <em>position: fixed</em> toegepast. Versies van Microsoft Internet Explorer ouder dan versie 7 weergeven dit echter niet correct. Deze tekst is enkel zichtbaar voor Microsoft Internet Explorer versie 7 en later.</div>
  3. <![endif]>

wordt deze tekst ook in niet-Microsoft Internet Explorer browsers weergeven. Hou er echter rekening mee dat de inhoud van de conditional comment op dit ogenblik niet echt meer een comment te noemen is (ze wordt namelijk toch weergeven). Bij Microsoft staat dit soort comment bekend als de downlevel-revealed conditional comment.

5. Extraatje!


Bij het schrijven van de conditie van je conditional comment, hoef je je overigens niet te beperken dat de zogenaamde major version (versie 5, 6, 7 et cetera) van de browser. Het is tevens mogelijk om een dieper niveau te targetten:

CODE
  1. <!--[if IE 5.5000]>U gebruikt momenteel Microsoft Internet Explorer versie 5.5.<![endif]-->

Let vooral op de vier cijfers na het decimaal scheidingsteken; dit is verplicht wanneer je verificaties doet op niet-gehele getallen.

Hou er tevens rekening mee dat conditional comments beschikbaar zijn voor Microsoft Internet Explorer 5 en hoger. Voor versies lager dan deze laatste zijn conditional comments.... gewoon commentaar ;-).

Daarnaast: checken op versie 5.0000 in je conditie zal doorgaans FALSE teruggeven aangezien versie 5.0002 standaard bij Microsoft Windows 2000 werd geleverd en niet versie 5.0000.

6. Slotwoord


Conditional comments laten je toe om informatie aan je pagina toe te voegen welke enkel geïnterpreteerd zal worden door de browser die jij aangeeft. Voor veel ontwikkelaars is dit een geschenk uit de hemel om de alternatieve rendermethoden van Microsoft's Internet Explorer recht te trekken waar nodig. Voor veel (onervaren) lijkt deze aanpak op het eerste zicht vreemd; hou echter steeds in je achterhoofd dat je via conditional comments zaken kan toevoegen. In het geval dat je (net zoals in het eerder vermelde voorbeeld) opmaak wil corrigeren, doe je er dus goed aan geen tweede compleet nieuwe stylesheet op te stellen welke al je styles nogmaals bevat. Beter is om, zoals vermeld, enkel de regels die foutief worden geïnterpreteerd te overschrijven. Het voordeel is dat je code in principe (X)HTML-valid blijft. Het nadeel is dat je in feite je structuur en je presentatie dwingt samen te zitten, terwijl je in feite beter de omgekeerde weg zou bewandelen.

Moest je nog met vragen zitten na dit artikel, kan je steeds een onderwerp openen in de forums.Dit artikel werd geschreven door Martijn op vrijdag 19 september 2008 om 12:31 en werd sindsdien 2275 keer gelezen.
  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.