Im HEAD dieser HTML-Seite schreibt zuerst ein JavaScript abhängig vom
Betriebssystem folgendes:
<LINK REL=stylesheet HREF="rot.css" TYPE="text/css">
für Windows-Rechner
<LINK REL=stylesheet HREF="blau.css" TYPE="text/css"> für
alle anderen (Mac, Unix, etc.)
Weiter unten im HEAD steht in statischem HTML ein LINK zu einem externen CSS.
<LINK REL=stylesheet HREF="gruen.css" TYPE="text/css">
Das heisst:
Falls der Browser JavaScript interpretiert, wird zwar als erstes der LINK zum
externen Stylesheet rot.css bzw blau.css geschrieben.
Da der LINK zu gruen.css später im HEAD steht, also näher
beim Inhalt, sollte nach Usanz bzw. CSS-Standard das Stylesheet gruen.css berücksichtigt
werden. Deshalb sollte dieser Absatz-Text immer grün sein.
---
---
Resultate:
So wird Absatztext mit dem jeweiligen Browser unter Windows dargestellt:
| Browser | verwendete Farbe | berücksichtigt |
|---|---|---|
| MS IE 5.0 | grün | korrekt |
| Opera 5.1 | grün | korrekt |
| Netscape 6.0 | grün | korrekt |
| Netscape 4.75 | grün | korrekt |
Der HEAD sieht so aus:
<HEAD>
<TITLE>Testseite fuer JS-verlinkte CSS</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--
if (navigator.appVersion.indexOf('Win') >= 0) {
document.write("<LINK REL=stylesheet HREF=\"rot.css\" TYPE=\"text/css\">");
}
else {
document.write("<LINK REL=stylesheet HREF=\"blau.css\" TYPE=\"text/css\">");
}
//-->
</SCRIPT>
<LINK REL=stylesheet HREF="gruen.css" TYPE="text/css">
</HEAD>