Voorbeeld gebruik browser-specifieke stijlbladen

Het stijlblok en de scripts in dit voorbeeld plaats je in de head van het document. Wat betreft de aparte stijlbladen is ervan uitgegaan dat deze staan in een subdirectory met de naam "stijl". Per browser is in dit voorbeeld onderscheid gemaakt tussen de Macintosh en overige systemen. In de praktijk zal je het script moeten aanpassen aan je eigen behoefte. Misschien heb je aparte stijlbladen nodig voor Linux, of is het niet nodig stijlbladen voor bepaalde browser(versie)s te maken.

<STYLE TYPE="text/css">
<!--

/* Importeren algemeen stijlblad */

@import url(stijl/algemeen.css);

-->
</STYLE>

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

// Algemene browsertest
// Kan ook voor andere doeleinden dan alleen voor
// browser-specifieke stijlbladen gebruikt worden.

var MOZ2 = (navigator.userAgent.indexOf("Mozilla/2") != -1);
var MOZ3 = (navigator.userAgent.indexOf("Mozilla/3") != -1);
var MOZ4 = (navigator.userAgent.indexOf("Mozilla/4") != -1);
var MOZ5 = (navigator.userAgent.indexOf("Mozilla/5") != -1);

var OP   = (navigator.userAgent.indexOf("Opera/3") != -1);
var OP3  = (navigator.userAgent.indexOf("Opera/3") != -1) && MOZ3;
var OP35 = (navigator.userAgent.indexOf("Opera/3") != -1) && MOZ4;
var OP36 = (navigator.userAgent.indexOf("Opera 3") != -1) && MOZ4;
var OP4  = (navigator.userAgent.indexOf("Opera 4") != -1) ||
           (navigator.userAgent.indexOf("Opera/4") != -1);

var IE   = navigator.userAgent.indexOf("MSIE") != -1;
var IE3  = navigator.userAgent.indexOf("MSIE 3") != -1;
var IE4  = navigator.userAgent.indexOf("MSIE 4") != -1;
var IE50  = (navigator.userAgent.indexOf("MSIE 5.0") != -1) && !OP;
var IE55  = (navigator.userAgent.indexOf("MSIE 5.5") != -1) && !OP;

var NN   = (navigator.appName == "Netscape") && !OP;
var NN2  = NN && MOZ2;
var NN3  = NN && MOZ3;
var NN4  = NN && MOZ4;
var NN6  = NN && MOZ5;

var WIN = navigator.userAgent.indexOf("Win") != -1;
var MAC = navigator.userAgent.indexOf("Mac") != -1;
var LIN = navigator.userAgent.indexOf("Lin") != -1;

var IE3w  = IE3 && WIN;
var IE4w  = IE4 && WIN;
var IE50w = IE50 && WIN;
var IE55w = IE55 && WIN;
var NN4w  = NN4 && WIN;
var NN6w  = NN6 && WIN;

var IE3m  = IE3 && MAC;
var IE4m  = IE4 && MAC;
var IE50m = IE50 && MAC;
var IE55m = IE55 && MAC;
var NN4m  = NN4 && MAC;
var NN6m  = NN6 && MAC;

var NN4l  = NN4 && LIN;
var NN6l  = NN6 && LIN;

//-->
</SCRIPT>

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

// Browser-specifieke stijlbladen

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

cssalg  = 'algemeen.css';
cssm    = 'mac.css';

cssie3   = 'stijl\/msie3.css';
cssie3m  = 'stijl\/msie3m.css';
cssie4   = 'stijl\/msie4.css';
cssie4m  = 'stijl\/msie4m.css';
cssie50  = 'stijl\/msie50.css';
cssie50m = 'stijl\/msie50m.css';
cssie55  = 'stijl\/msie55.css';
cssie55m = 'stijl\/msie55m.css';

cssnn4   = 'stijl\/nn4.css';
cssnn4m  = 'stijl\/nn4m.css';
cssnn6   = 'stijl\/nn6.css';
cssnn6m  = 'stijl\/nn6m.css';

cssop35  = 'stijl\/op35.css';
cssop36  = 'stijl\/op36.css';
cssop4   = 'stijl\/op4.css';

if (MAC) {
document.write(link1 + cssm + link2);
}

if (NN4) {
if (NN4m) {
document.write(link1 + cssnn4m + link2);
}
else {
document.write(link1 + cssalg + link2);
document.write(link1 + cssnn4 + link2);
}
}

if (NN6) {
if (NN6m) {
document.write(link1 + cssnn6m + link2);
}
else {
document.write(link1 + cssnn6 + link2);
}
}

if (IE3) {
if (IE3m) {
document.write(link1 + cssie3m + link2);
}
else {
document.write(link1 + cssalg + link2);
document.write(link1 + cssie3 + link2);
}
}

if (IE4) {
if (IE4m) {
document.write(link1 + cssie4m + link2);
}
else {
document.write(link1 + cssie4 + link2);
}
}

if (IE50) {
if (IE50m) {
document.write(link1 + cssie50m + link2);
}
else {
document.write(link1 + cssie50 + link2);
}
}

if (IE55) {
if (IE55m) {
document.write(link1 + cssie55m + link2);
}
else {
document.write(link1 + cssie55 + link2);
}
}

if (OP35) {
document.write(link1 + cssop35 + link2);
}

if (OP36) {
document.write(link1 + cssop36 + link2);
}

if (OP4) {
document.write(link1 + cssop4 + link2);
}

//-->
</SCRIPT>

  Inhoud Handleiding HTML   Index   CSS en browsers

Laatste wijziging 23 september 2000
Copyright © 1995-2000 Hans de Jong