Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Inhoud onderdeel: Ondersteuning door browsers | Stijlen verbergen | Browser-specifieke stijlbladen | Voorbeeld browser-specifieke stijlbladen

Browser-specifieke stijlbladen

Wil je in Microsoft Internet Explorer 3/4 en/of Netscape Navigator 4 toch met stijlen werken, of wil je specifieke problemen in andere browsers omzeilen, dan kun je het beste gebruik maken van browser-specifieke stijlbladen. Dat zijn stijlbladen die alleen gelden voor één of meer browsers die aan bepaalde kenmerken voldoen.

Om met browser-specifieke stijlbladen te kunnen werken, moet je gebruik maken van JavaScript. Bij het openen van het document laat je met behulp van een JavaScript testen in welke browser dat gebeurt. Dat kan met behulp van enkele JavaScript eigenschappen voor browsers: "appName", "appVersion" en "userAgent". In het volgende overzicht staan de waarden van deze eigenschappen voor de browser, waarin je de Handleiding HTML nu geopend hebt:

Een overzicht met vergelijkbare gegevens voor andere browsers en een uitgebreide toelichting op het gebruik van browser-specifieke informatie, vind je in het onderdeel Javascript en Informatie over de browser.

Als op basis van de genoemde testen bepaald is welke browser, in welke versie en eventueel op welk platform (Windows 95, Linux, Macintosh) gebruikt wordt, kan ook weer via JavaScript het bijbehorende stijlblad aan het document gekoppeld worden.

In het volgende voorbeeld is het script dat het hele proces van testen en koppelen uitvoert, weergegeven voor Netscape Navigator 4. In het voorbeeld wordt onderscheid gemaakt wordt tussen Netscape Navigator voor de Macintosh en voor andere platforms (dat kan bijvoorbeeld nodig zijn als je in het stijlblad vaste puntgroottes hebt gedefinieerd). Je plaatst dit soort scripts in de head van het document.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

var OP   = (navigator.userAgent.indexOf("Opera") != -1);
var M4   = (navigator.userAgent.indexOf("Mozilla/4") != -1);
var NN4  = (navigator.appName == "Netscape") && M4 && !OP;

var MAC  = navigator.userAgent.indexOf("Mac") != -1;
var NN4m = NN4 && MAC;

link1    = '<LINK REL="stylesheet" HREF="';
link2    = '" TYPE="text\/css">';

cssnn4   = 'nn4.css';
cssnn4m  = 'nn4m.css';

if (nn4) {
if (nn4m) {
document.write(link1 + cssnn4m + link2);
}
else {
document.write(link1 + cssnn4 + link2);
}
}

//-->
</SCRIPT>

De uitkomst van het script is in Netscape Navigator 4 voor Windows de volgende regel HTML-code:

<LINK REL="stylesheet" HREF="nn4.css" TYPE="text/css">

De uitkomst van het script in Netscape Navigator 4 voor Macintosh is:

<LINK REL="stylesheet" HREF="nn4m.css" TYPE="text/css">

Als je het JavaScript voor de browser-specifieke stijlbladen plaatst na het STYLE element met de @import-regel, hebben stijlregels uit de browser-specifieke stijlbladen prioriteit boven die uit het algemene stijlblad.

Wanneer je gebruik maakt van browser-specifieke stijlbladen, dan worden de stijlen uiteraard alleen weergegeven als de browser JavaScript mag uitvoeren. Voor Netscape Navigator 4 is dat geen probleem, omdat stylesheets alleen ondersteund worden als JavaScript is toegestaan.

Vervolg: Voorbeeld browser-specifieke stijlbladen

Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 4 juli 2004