|
Handleiding HTML  Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin
Inhoud onderdeel: Ondersteuning door browsers | Stijlen verbergen | Browser-specifieke stijlbladen | Voorbeeld browser-specifieke stijlbladen
Voorbeeld browser-specifieke stijlbladen
In dit voorbeeld wordt een compleet overzicht gegeven van de code die je opneemt als je gebruik maakt van browser-specifieke stijlbladen. Met behulp van het stijlblok wordt een stijlblad met basisstijlen vastgelegd. De browser-specifieke stijlbladen zijn een aanpassing van en/of aanvulling op het basisstijlblad.
In de scripts is aangenomen dat voor elke browser een apart stijlblad nodig is. Bovendien is voor elke browser nog eens onderscheid gemaakt tussen Macintosh, Linux en overige systemen (waaronder uiteraard Windows). In de praktijk zal het waarschijnlijk niet nodig zijn te werken met zoveel verschillende stijlbladen. Dat betekent dat je de scripts moet aanpassen aan je eigen behoefte.
Het stijlblok en de scripts plaats je in de head van het document. Wat de volgorde betreft is het belangrijk dat het stijlblok en het script voor de algemene browsertest zijn opgenomen vóór het script dat de browser-specifieke stijlbladen definieert.
In het stijlblok en de scripts is ervan uitgegaan dat de verschillende stijlbladen in een subdirectory met de naam "stijl" staan.
<STYLE TYPE="text/css">
<!--
/* Importeren algemeen stijlblad */
@import url("stijl/basis.css");
-->
</STYLE>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
// Algemene browsertest
// Kan ook voor andere doeleinden dan alleen voor
// browser-specifieke stijlbladen gebruikt worden.
var nuA = navigator.userAgent;
var M2 = (nuA.indexOf("Mozilla/2") != -1);
var M3 = (nuA.indexOf("Mozilla/3") != -1);
var M4 = (nuA.indexOf("Mozilla/4") != -1);
var OP = (nuA.indexOf("Opera") != -1);
var OP3 = (nuA.indexOf("Opera/3") != -1) && M3;
var OP35 = (nuA.indexOf("Opera/3") != -1) && M4;
var OP36 = (nuA.indexOf("Opera 3") != -1) && M4;
var OP4 = (nuA.indexOf("Opera 4") != -1) ||
(nuA.indexOf("Opera/4") != -1);
var OP5 = (nuA.indexOf("Opera 5") != -1) ||
(nuA.indexOf("Opera/5") != -1);
var OP6 = (nuA.indexOf("Opera 6") != -1) ||
(nuA.indexOf("Opera/6") != -1);
var OP7 = (nuA.indexOf("Opera 7") != -1) ||
(nuA.indexOf("Opera/7") != -1);
var OP8 = (nuA.indexOf("Opera 8") != -1) ||
(nuA.indexOf("Opera/8") != -1);
var OP9 = (nuA.indexOf("Opera 9") != -1) ||
(nuA.indexOf("Opera/9") != -1);
var IE = (nuA.indexOf("MSIE") != -1) && !OP;
var IE3 = (nuA.indexOf("MSIE 3") != -1);
var IE4 = (nuA.indexOf("MSIE 4") != -1);
var IE50 = (nuA.indexOf("MSIE 5.0") != -1) && !OP;
var IE55 = (nuA.indexOf("MSIE 5.5") != -1) && !OP;
var IE60 = (nuA.indexOf("MSIE 6.0") != -1) && !OP;
var GECKO = (nuA.indexOf("Gecko") != -1);
var MOZ = GECKO && (nuA.indexOf("Netscape") == -1) &&
(nuA.indexOf("Firefox") == -1);
var MOZ1 = MOZ && (nuA.indexOf("rv:1") != -1);
var FF = (nuA.indexOf("Firefox") != -1);
var FF10 = (nuA.indexOf("Firefox/1.0") != -1);
var FF15 = (nuA.indexOf("Firefox/1.5") != -1);
var FF20 = (nuA.indexOf("Firefox/2.0") != -1);
var NN = (navigator.appName == "Netscape") && !OP && !MOZ;
var NN2 = NN && M2;
var NN3 = NN && M3;
var NN4 = NN && M4;
var NN6 = (nuA.indexOf("Netscape6") != -1);
var NN7 = (nuA.indexOf("Netscape/7") != -1);
var NN8 = (nuA.indexOf("Netscape/8") != -1);
// Test naar platform: Macintosh en Linux
var MAC = nuA.indexOf("Mac") != -1;
var LIN = nuA.indexOf("Lin") != -1;
var IE3m = IE3 && MAC;
var IE4m = IE4 && MAC;
var IE50m = IE50 && MAC;
var NN4m = NN4 && MAC;
var NN6m = NN6 && MAC;
var NN7m = NN7 && MAC;
var MOZ1m = MOZ1 && MAC;
var FF10m = FF10 && MAC;
var FF15m = FF15 && MAC;
var FF20m = FF20 && MAC;
var OP5m = OP5 && MAC;
var OP6m = OP6 && MAC;
var OP8m = OP8 && MAC;
var OP9m = OP9 && MAC;
var NN4l = NN4 && LIN;
var NN6l = NN6 && LIN;
var NN7l = NN7 && LIN;
var MOZ1l = MOZl && LIN;
var FF10l = FF10 && LIN;
var FF15l = FF15 && LIN;
var FF20l = FF20 && LIN;
var OP5l = OP5 && LIN;
var OP6l = OP6 && LIN;
var OP7l = OP7 && LIN;
var OP8l = OP8 && LIN;
var OP9l = OP9 && LIN;
//-->
</SCRIPT>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
// Browser-specifieke stijlbladen
link1 = '<LINK REL="stylesheet" HREF="';
link2 = '" TYPE="text\/css">';
cssbasis = 'basis.css';
cssm = 'mac.css';
cssl = 'lin.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';
cssie60 = 'stijl\/msie60.css';
cssnn4 = 'stijl\/nn4.css';
cssnn4m = 'stijl\/nn4m.css';
cssnn4l = 'stijl\/nn4l.css';
cssnn6 = 'stijl\/nn6.css';
cssnn6m = 'stijl\/nn6m.css';
cssnn6l = 'stijl\/nn6l.css';
cssnn7 = 'stijl\/nn7.css';
cssnn7m = 'stijl\/nn7m.css';
cssnn7l = 'stijl\/nn7l.css';
cssop35 = 'stijl\/op35.css';
cssop36 = 'stijl\/op36.css';
cssop4 = 'stijl\/op4.css';
cssop5 = 'stijl\/op5.css';
cssop5m = 'stijl\/op5m.css';
cssop5l = 'stijl\/op5l.css';
cssop6 = 'stijl\/op6.css';
cssop6m = 'stijl\/op6m.css';
cssop6l = 'stijl\/op6l.css';
cssop7 = 'stijl\/op7.css';
cssop7l = 'stijl\/op7l.css';
cssop8 = 'stijl\/op8.css';
cssop8m = 'stijl\/op8m.css';
cssop8l = 'stijl\/op8l.css';
cssop9 = 'stijl\/op9.css';
cssop9m = 'stijl\/op9m.css';
cssop9l = 'stijl\/op9l.css';
cssmoz1 = 'stijl\/moz1.css';
cssmoz1m = 'stijl\/moz1m.css';
cssmoz1l = 'stijl\/moz1l.css';
cssff10 = 'stijl\/ff10.css';
cssff10m = 'stijl\/ff10m.css';
cssff10l = 'stijl\/ff10l.css';
cssff15 = 'stijl\/ff15.css';
cssff15m = 'stijl\/ff15m.css';
cssff15l = 'stijl\/ff15l.css';
cssff20 = 'stijl\/ff20.css';
cssff20m = 'stijl\/ff20m.css';
cssff20l = 'stijl\/ff20l.css';
if (MAC) {
document.write(link1 + cssm + link2);
}
if (LIN) {
document.write(link1 + cssl + link2);
}
if (IE3) {
if (IE3m) {
document.write(link1 + cssie3m + link2);
}
else {
document.write(link1 + cssbasis + 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) {
document.write(link1 + cssie55 + link2);
}
if (IE60) {
document.write(link1 + cssie60 + link2);
}
if (MOZ1) {
if (MOZ1m) {
document.write(link1 + cssmoz1m + link2);
}
if (MOZ1l) {
document.write(link1 + cssmoz1l + link2);
}
else {
document.write(link1 + cssmoz1 + link2);
}
}
if (FF10) {
if (FF10m) {
document.write(link1 + cssff10m + link2);
}
if (FF10l) {
document.write(link1 + cssff10l + link2);
}
else {
document.write(link1 + cssff10 + link2);
}
}
if (FF15) {
if (FF15m) {
document.write(link1 + cssff15m + link2);
}
if (FF15l) {
document.write(link1 + cssff15l + link2);
}
else {
document.write(link1 + cssff15 + link2);
}
}
if (FF20) {
if (FF20m) {
document.write(link1 + cssff20m + link2);
}
if (FF20l) {
document.write(link1 + cssff20l + link2);
}
else {
document.write(link1 + cssff20 + link2);
}
}
if (NN4) {
if (NN4m) {
document.write(link1 + cssnn4m + link2);
}
if (NN4l) {
document.write(link1 + cssnn4l + link2);
}
else {
document.write(link1 + cssbasis + link2);
document.write(link1 + cssnn4 + link2);
}
}
if (NN6) {
if (NN6m) {
document.write(link1 + cssnn6m + link2);
}
if (NN6l) {
document.write(link1 + cssnn6l + link2);
}
else {
document.write(link1 + cssnn6 + link2);
}
}
if (NN7) {
if (NN7m) {
document.write(link1 + cssnn6m + link2);
}
if (NN7l) {
document.write(link1 + cssnn7l + link2);
}
else {
document.write(link1 + cssnn7 + link2);
}
}
if (NN8) {
document.write(link1 + cssnn8 + link2);
}
if (OP35) {
document.write(link1 + cssop35 + link2);
}
if (OP36) {
document.write(link1 + cssop36 + link2);
}
if (OP4) {
document.write(link1 + cssop4 + link2);
}
if (OP5) {
if (OP5m) {
document.write(link1 + cssop5m + link2);
}
if (OP5l) {
document.write(link1 + cssop5l + link2);
}
else {
document.write(link1 + cssop5 + link2);
}
}
if (OP6) {
if (OP6m) {
document.write(link1 + cssop6m + link2);
}
if (OP6l) {
document.write(link1 + cssop6l + link2);
}
else {
document.write(link1 + cssop6 + link2);
}
}
if (OP7) {
if (OP7l) {
document.write(link1 + cssop7l + link2);
}
else {
document.write(link1 + cssop7 + link2);
}
}
if (OP8) {
if (OP8m) {
document.write(link1 + cssop8m + link2);
}
if (OP8l) {
document.write(link1 + cssop8l + link2);
}
else {
document.write(link1 + cssop8 + link2);
}
}
if (OP9) {
if (OP9m) {
document.write(link1 + cssop9m + link2);
}
if (OP9l) {
document.write(link1 + cssop9l + link2);
}
else {
document.write(link1 + cssop9 + link2);
}
}
//-->
</SCRIPT>
Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 23 juni 2007
|
