Conditional Comments

Internet Explorer heeft af en toe wel eens een verkeerde interpretatie van bepaalde HTML en/of CSS toepassingen. Het komt dus wel eens voor dat onderstaande CSS goed en gewenst is voor webbrowsers als Mozilla Firefox, Apple's Safari en Opera.

Compliant webbrowser CSS waarde

#mainContent {
	width: 230px;
}
				

Internet Explorer

In IE6 bijvoorbeeld past bovenstaande HTML element net niet tussen andere HTML blokken, die bijvoorbeeld floaten. Het liefst zou IE6 een andere waarde moeten krijgen als onderstaande. Maarja, hoe vertellen we IE6 dat hij de onderstaande waardes moet gebruiken?

IE6/7 CSS waarde

#mainContent {
	width: 225px;
}
				

Conditional comment, een voorbeeld

In de HTML-head van de pagina plaatsen we onderstaande regels. Let op! Dit moet na alle andere css-stylesheets geplaats worden.

<!--[if ie 6]>

<link href="css/ie6.css" type="text/css" rel="stylesheet" media="screen" /> 

<![endif]-->

Goed, wat gebeurt hier? Na alle stylesheets wordt hier bekenen, alleen door Internet Explorer versies op het Windows platform, of de huidige Internet Explorer versie aan de IF statement voldoet.

Gebruikt men in dit voorbeeld de IE6 webbrowser, dan wordt bij alle andere stylesheets ook nog het ie6.css stylesheet bij geladen. In dit aparte stylesheet zijn de afwijkende waardes geschreven (zie voorbeeld aan het begin van deze pagina) die ervoor zorgen dat IE6 de CSS layout van een website ook goed op het scherm laat weergeven.

In bovenstaand IF statement voorbeeld kunnen veel meer dingen getest worden. Zoals IE7, IE versies lager dan IE7 (of IE6). In plaats van een stylesheet kan ook een ander stuk HTML geplaats worden, zoals een javascript.

W3C HTML-validatie

Het grote voordeel hiervan is dat alleen Internet Explorer dit leest. Omdat dit stukje code tussen valide HTML comment staat zal de HTML pagina die hiervan gebruik maakt gewoon valideren.

Nog een voorbeeld

Bekijk de HTML-source code van de pagina eens voor en goed voorbeeld.

Waarom webbrowser 'sniffers' vies zijn

Er is een tijdperk geweest dat er veel Javascripting gebruikt werd om te detecteren welke webbrowser de gebruiker van een website gebruikt. Hierdoor is het mogelijk voor de webdesigner om een zo goed mogelijk werkende website te serveren aan de gebruiker. Ondersteunt een bepaalde browser sommige features niet dan werden er andere oplossingen bedacht. Dit was ook in de tijd van de browser wars.

Bij elke release van een nieuwe versie webbrowsers moet deze buggy javascripting weer getest worden. Het komt maar al te vaak voor dat deze scripting toch niet helemaal goed geschreven is en vaak resulteerd in onbruikbare HTML pagina's. Alleen maar ellende voor de eindgebruiker die met zijn nieuwste versie webbrowser graag informatie wil.

Welke webbrowser gebruikt men?

Webdesigners willen graag weten welke webbrowser men gebruikt zodat er geen rare dingen zich voordoen in de zorgvuldig gemaakt website. IE6 en IE7 spannen de kroon wat betreft het niet zo volledig mogelijk volgen van webstandaarden. Deze browsers moeten we een handje helpen zodat de gemaakte website er ook goed uitziet in de webbrowsers die jammer genoeg het meeste marktaandeel hebben.

Als de website eenmaal klaar is kunnen we deze gaan testen in de befaamde IE6 en IE7 webbrowsers. Komen er dan dingen aan het licht die niet helemaal kloppen kunnen we ons uren druk gaan maken en allerlei manier proberen om toch dezelfde CSS te gebruiken maar net zo lang pielen totdat het ook goed werkt in IE6 en IE7.

Conditional comments zorgen ervoor dat je verschillende versies van Internet Explorer ook verschillende 'extra' stylesheets, javascripting etc. mee kan geven. Hierdoor kan de website gemaakt worden voor compliant webbrowsers als Mozilla Firefox, Apple's Safari en Opera EN Internet Explorer 6 en 7.

Meer informatie over gebruik van conditional comments

Op de website van Peter-Paul Koch, QuirksMode, worden ook wat zaken hierover uitgelegd. Conditional comments is notabene een uitvinding van Microsoft zelf.