CSS - Alleen voor Internet Explorer of Firefox


Het is helaas zo dat een website er soms in verschillende browsers anders uitziet al zijn tegenwoordig de verschillen doorgaans minder groot dan vroeger het geval is. Maar deze verschillen kunnen zeker optreden en zodoende zijn er een aantal manieren om opmaak in te stellen voor Internet Explorer (dit zul je dan het meest gebruiken) en ook voor Firefox.

Als alternatief is er een script beschikbaar, meer hierover is hier te vinden.

Internet Explorer

Met behulp van HTML code is het eenvoudig om een apart stylesheet alleen in te stellen voor Internet Explorer. Deze code geldt in dat geval voor Internet Explorer 6, 7, 8 en 9. De code die je hiervoor gebruikt wordt dan niet door andere browsers toegepast zoals Firefox of Google Chrome. Hiervoor komt er een "if" comment om de code van de CSS te staan.

Dit ziet er als volgt uit.

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


Deze HTML code kun je overigens ook gebruiken voor een specifieke versie van Internet Explorer. Door achter de "if" vermelding een versienummer toe te voegen kun je specifiek een browser aanroepen anders geldt het voor alle versies van Internet Explorer.

<!--[if IE 6]>
        // Alleen Internet Explorer 6
        <link href="/stylesheets/iestyle6.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 7]>
        // Alleen Internet Explorer 7
        <link href="/stylesheets/iestyle7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 8]>
        // Alleen Internet Explorer 8
        <link href="/stylesheets/iestyle8.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if gte IE 8]>
        // Internet Explorer 8 en hoger
        <link href="/stylesheets/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 8]>
        // Internet Explorer 7 en lager
        <link href="/stylesheets/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if (IE 7)|(IE 9)]>
        // Internet Explorer 7 en 9
        <link href="/stylesheets/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->


Een andere manier om opmaak specifiek voor IE in te stellen is door code binnen de stylesheet om een bepaalde manier te plaatsen. Hieronder een aantal voorbeelden.

Alleen Internet Explorer 6

P {
        _color:#FF6600;
}


Alleen Internet Explorer 6 en 7

P {
        //margin-bottom:10px;
}


Alleen Internet Explorer 6 en 7

P {
        margin-bottom:10px !IE7;
}


Alleen Internet Explorer 6 en 7

P {
        *margin-bottom:10px;
}


Alleen Internet Explorer 8 en 9

P {
        margin-bottom:10px\0/;
}


Alleen Internet Explorer 9

P {
        margin-bottom:10px \0/;
}


Internet Explorer 6, 7, 8 en 9

P {
        margin-bottom:10px \9;
}

Firefox

Het is iets wat je minder vaak nodig zult hebben maar het is ook mogelijk om specifiek opmaak in te stellen voor browser Firefox, bijvoorbeeld om bepaalde elementen net even iets bij te schaven. Dit kan door de onderstaande code op te nemen in je stylesheet.

@-moz-document url-prefix() {
        P { color:#000; }
}


Een alternatieve manier is als volgt.

body:not(:-moz-handler-blocked) div#mainmenu {
        width:165px;
}