Webtip: Aparte CSS stylesheet voor IE

Het is wederom zondag en dat betekent dat we weer een nieuwe webtip hebben voor jullie. Vandaag hebben we een simpele, maar erg handige webtip. We gaan namelijk kijken hoe we een andere CSS stylesheet kunnen gebruiken voor gebruikers die óf Internet Explorer gebruiken óf een bepaalde versie daarvan.

Nu vraag je je wellicht af waarom je dat nodig zou hebben. Veel mensen ontwikkelen en testen hun website maar op één enkele browser. Als je website dan helemaal afgerond is, ontdek je soms dat bepaalde zaken er heel anders uit zien in een andere browser. Dit komt omdat elke browser de webpagina's op een net iets andere manier rendert. Nu kun je natuurlijk proberen het probleem op te lossen zodat alles er in alle browsers hetzelfde uitziet. Dit is uiteraard de beste manier, maar mocht het nou niet lukken dan kun je altijd nog gebruik maken van verschillende CSS stylesheets voor verschillende (versies) browsers.

We gaan dit doen door gebruik te maken van zogenaamde 'conditional comments'. Deze zijn te gebruiken voor óf (verschillende versies van) Internet Explorer óf niet-Internet Explorer browsers.

Laten we maar eens kijken hoe deze conditional comments in zijn werk gaan.

Willen we een stylesheet gebruiken die alleen wordt gebruikt in bijvoorbeeld Internet Explorer 6, dan kunnen we de volgende regel tussen onze <head>-tags zetten:

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Willen we een stylesheet gebruiken die alleen wordt gebruikt in versies lager dan of gelijk aan Internet Explorer 8, dan kunnen we de volgende regel tussen onze <head>-tags zetten:

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-en-lager.css" />
<![endif]-->

Zoals je ziet hebben we 'lte' toegevoegd aan het if-statement. Dit betekent: 'less than or equal', oftewel 'lager dan of gelijk aan'.

Zo zijn er nog enkele van dit soort eenheden te gebruiken:

! (negeren)
Gebruik dit om bepaalde (versies van) browsers te negeren. Bijv. [If !IE 6] zal selecteren: IE 5, 5.5, 7 en 8.
lt (kleiner dan)
Bijv. [If lt IE 6] zal selecteren IE 5 en 5.5.
lte (kleiner dan of gelijk aan)
Bijv. [If lte IE 6] zal selecteren IE 5, 5.5 en 6.
gt (groter dan)
Bijv. [If gt IE 6] zal selecteren IE 7 en 8 (en eventuele latere versies die nog moeten verschijnen).
gte (groter dan of gelijk aan)
Bijv. [If gte IE 6] zal selecteren IE 6, 7 en 8 (en latere versies).

Tot slot vind je hieronder een lijstje van bruikbare conditional comments:

ALLE VERSIES VAN IE
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES BEHALVE IE
<!--[if if !IE]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLEEN IE 5
<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLEEN IE 5.5
<!--[if IE 5.5]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLEEN IE 6
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLEEN IE 7
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLEEN IE 8
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES LAGER DAN OF GELIJK AAN IE 6
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES LAGER DAN OF GELIJK AAN IE 7
<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES LAGER DAN OF GELIJK AAN IE 8
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES GROTER DAN OF GELIJK AAN IE 6
<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES GROTER DAN OF GELIJK AAN IE 7
<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

ALLE VERSIES GROTER DAN OF GELIJK AAN IE 8
<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

Deze techniek kun je overigens ook gebruiken voor andere zaken dan CSS stylesheets, denk hierbij bijvoorbeeld aan een bericht dat alleen te zien is voor gebruikers van Internet Explorer 6.

Meer..

Reacties (2)

Jaap (Gast)

30 september 2010 11:07

Helder verhaal, maar hoe selecteer ik andere browsers dan IE?

Davey

30 september 2010 12:29

Voor zover ik weet is deze mogelijkheid (op deze manier) er alleen voor Internet Explorer en niet voor andere browsers.

Mocht je het toch echt willen, dan kun je eventueel gebruik maken van PHP: http://php.net/manual/en/function.get-browser.php. Dan kun je controleren welke browser iemand gebruikt en aan de hand daarvan een andere stylesheet laden.