Hoe doe je dat?

Conditional comments, het klinkt raar maar het is iets superhandig als je websites maakt. Hoe vaak gebeurt het niet dat Internet Explorer je website ietsje anders rendert? Wat is dan de oplossing? Heel je website herschrijven? Nee hoor, je kan het jezelf makkelijk maken en er gewoon voor zorgen dat Internet Explorer een extra stylesheet moet inlezen om kleine foutjes te fixen. Maar hoe zorg je ervoor dat Internet Explorer (of een andere browser) die stylesheet inleest en niet een andere browser? Hier komen conditional comments op de propppen.

Conditional comments zien er altijd ongeveer hetzelfde uit:
<!--[if conditie]>Een hoop html, css, javascript, ...<![endif]-->
Diegenen die ooit al een klein beetje geprogrammeerd of gescript hebben, zullen direct begrijpen wat er bedoeld wordt met “if conditie”. Toch ga ik het nog eens uitleggen. Zoals je wel al doorhad, staat if voor “als”. Achter een if komt er altijd een voorwaarde, ook wel conditie genoemd. Als aan deze voorwaarde of conditie voldaan is (in programma’s heeft het dus een “true” opgeleverd), dan voert hij alle code uit tussen de “if” en de “endif”. Tussen de “if” en “endif” staat namelijk een brok code die hij enkel uitvoert als aan de conditie voldaan is. Is er niet aan voldoen, dan wordt deze brok code volledig genegeerd.

Maar wat hebben condities nu te maken met websites? Wel, in je conditie kan je controleren of de gebruiker een bepaalde browser gebruikt. De conditie vraagt, “ben jij deze browser”? Zoja, dan voert hij de brok code tussen de “if” en “endif” uit. Zonee, dan negeert hij die gewoon aangezien deze code niet voor de browser bedoeld is. Een voorbeeld van zo’n conditie kan zijn:
IE 6
Deze opbouw noemen we straightforward. Hij controleert gewoon of jouw browser IE 6 is (dit staat voor Internet Explorer 6). Er wordt nog niets uitgevoerd, dit is enkel een controle of de browser wel IE 6 is of niet. Onze conditional comment kan er dus zo uitzien:
<!--[if IE 6]>Ik ben Internet Explorer 6<![endif]-->
Als je je html-pagina dan gaat bekijken in Internet Explorer 6, zal hij heel braafjes zeggen “Ik ben Internet Explorer 6″. Als je die pagina dan bekijkt in Firefox, Opera, Safari, een andere browser of zelfs Internet Explorer 7, dan zal hij niets zeggen. Merk op dat Internet Explorer 7 niets zal zeggen. We controleren namelijk of je Internet Explorer 6 gebruikt en niet Internet Explorer 7.

Als we nu onze conditional comment lichtjes herschrijven (we halen de 6 weg):
<!--[if IE]>Ik ben Internet Explorer, of het nu versie 6, 7 of iets anders is!<![endif]-->
dan zal hij in elke Internet Explorer de tekst “Ik ben Internet Explorer, of het nu versie 6, 7 of iets anders is!” weergeven. Je krijgt dus dit resultaat in zowel Internet Explorer 6 als 7.

Je kan nu dus al controleren of de gebruiker een bepaalde browser gebruikt. Maar stel dat we meer willen. Wat als ik wil controleren of de gebruiker Internet Explorer 6, 7, … gebruikt maar geen oudere versie? We hebben daarvoor operatoren nodig. Bij de programmeurs en scripters gaat er al snel een belletje rinkelen maar toch leg ik het eventjes kort uit. Het Latijnse woord operator betekent (be)werker. Een operator is dus een manier om onze conditie te bewerken, aan te passen. Bij conditional comments kan je 5 operators hebben:

• lt: staat voor “Less Than” (kleiner dan)
• lte: staat voor “Less Than or Equal” (kleiner dan of gelijk aan)
• gt: staat voor “Greater Than” (groter dan)
• gte: staat voor “Greater Than or Equal” (groter dan of gelijk aan)
• !: staat voor “not equal to” (niet gelijk aan)

In conditional comments zet je de operator voor de conditie. Als we dus willen controleren of de gebruiker 1 van de versies na Internet Explorer 6 gebruikt (bijvoorbeeld Internet Explorer 7, 8, …). Dan gebruiken we “gt” zodat we deze conditional comment krijgen:
<!--[if gt IE 6]>Ik ben Internet Explorer, maar wel een latere versie dan Internet Explorer 6.<![endif]-->
Redelijk eenvoudig en superhandig. Stel nu dat we willen controleren of onze bezoeker geen Internet Explorer gebruikt (en dus bijvoorbeeld Firefox, Opera, Safari of iets anders gebruikt), kunnen we simpelweg dit doen:
<!--[if !IE]>Ik ben geen Internet Explorer.<![endif]-->

Maar wat als we nu willen controleren of de gebruiker geen Internet Explorer 6 en geen Internet Explorer 7 gebruikt? (Internet Explorer 8 is dan behoort dan bijvoorbeeld wel tot de mogelijkheden). Daarvoor gaan we gebruikmaken van de “and” en “or”-operators. Respectievelijk vertaald zijn dit dus de “en” en de “of”-operator. Deze operators zorgen ervoor dat we meerdere condities kunnen geven waaraan voldoen moet worden. Om nu ons voorbeeld om te zetten in code:
<!--[if (!IE 6) & (!IE 7)]>Ik ben geen Internet Explorer 6 en geen Internet Explorer 7 maar wel iets anders.<![endif]-->
Zoals je ziet maak ik nu gebruik van haakjes. Dit is om onze condities duidelijk af te schermen van elkaar, zo vermijd je mogelijk conflicten waardoor je conditie mogelijk fout zou valideren.

Nu is het allemaal wel leuk dat je kan allerlei verschillende tekst kan laten weergeven die afhangt van welke browser onze bezoeker gebruikt. Maar wat zijn we daar nu mee? Wel, vaak valt het voor dat Internet Explorer je elementen een verkeerde breedte (width) of marge (margin) geeft. Je kan dan simpelweg ervoor zorgen dat enkel en alleen Internet Explorer een extra stylesheet inleest waar de wijzigingen instaan die ervoor zorgen dat je layout wel goed weergegeven wordt.

Als je gaat kijken in de broncode van deze site, dan kom je deze code tegen:
<link rel="stylesheet" type="text/css" href="wp-content/themes/hoedoejedat4/css.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="wp-content/themes/hoedoejedat4/css_ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="wp-content/themes/hoedoejedat4/css_ie6.css" />
<![endif]-->
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="wp-content/themes/hoedoejedat4/css_ie5.5.css" />
<![endif]-->
De eerste regel is redelijk makkelijk, deze laad een stylesheet in die voor alle browsers bedoeld is. Ongeacht welke browser onze bezoeker gebruikt, deze stylesheet wordt ingeladen. Op de derde regel vind je dan een stylesheet die enkel ingeladen wordt door Internet Explorer, ongeacht of het nu Internet Explorer 6, 7, 8 of wat dan ook is. Daarna volgen dan nog 2 regels die zorgen dat er een apart stylesheet voor Internet Explorer 6 en Internet Explorer 5 ingeladen worden.

Waarom waren er 4 stylesheets nodig? Wel, zowel Internet Explorer 5, 6 als 7 en 8 gaven een andere layout weer. In deze stylesheets die enkel voor die versies bedoeld zijn, wijzig ik de breedtes (width) en de marges (margin) van een paar elementen zodanig dat de layout er exact hetzelfde uitziet zoals het hoort, zoals in Opera, Safari en Firefox. Dit is dus een zeer nuttige toepassing om conditional comments te gebruiken.

Let wel: conditional comments worden genegeerd door alle versies ouder dan Internet Explorer 5. Voor bijvoorbeeld Internet Explorer 3 is een conditional comment simpelweg een regel commentaar. Hij zal deze dus compleet negeren en dus ook de brok code na de conditie compleet negeren (zelfs als de conditie klopt!). Echter moet je je daar niet teveel zorgen over maken, het komt extreem zelden voor dat iemand een versie van Internet Explorer gebruikt die ouder is dan Internet Explorer 5.