Mehrere CSS-Dateien - Übersicht

Mehrere CSS-Dateien: Eine Einführung

Hier geht es um das Problem: Was passiert, wenn im HEAD einer HTML-Datei mehrere externe StyleSheets (CSS) mit dem LINK-Tag eingebunden werden und diese widersprüchliche Angaben enthalten?

Grundsätzlich, d.h. in den meisten Browsern, wird jeweils das letzte verlinkte Stylesheet verwendet.

Netscape 6.0 macht Probleme, sobald eines oder mehrere der LINK-Tags ein TITLE-Attribut haben. Dann ist keine Logik zu erkennen, welches StyleSheet verwendet wird. Auch Netscape 6.0 zeigt immer das zuletzt verlinkte Stylesheet an, sofern dieser LINK kein TITLE-Attribut hat.

Wenn man im HEAD einer HTML-Datei mehrere LINKs zu externen CSS-Dateien hat und will, dass eine bestimmte CSS-Datei auf jeden Fall berücksichtigt wird, muss der entsprechende LINK am Ende der Liste stehen und darf kein TITLE-Attribut haben.

Das ganze habe ich durchgetestet mit einer Reihe von HTML-Dateien in den vier Windows-Browsern Netscape Navigator 4.75, Netscape 6.0, MS Internet Explorer 5.0 und Opera 5.1.
Falls jemand mit einem gewissen Browser (Netscape und MS IE je ab Version 4) abweichende Resultate feststellt, bin ich sehr froh um ein Mail: luthi@my-mail.ch

REINE HTML-SEITEN
Zwei CSS-Dateien verlinkt Drei CSS-Dateien verlinkt Vier CSS-Dateien verlinkt
  1. Nur Link (*)
  2. Link mit Media (*)
  3. Link mit Title
  4. Link mit Title und Media
  5. Link1 mit Title, Link2 ohne Title (*)
  6. Link1 ohne Title, Link2 mit Title (*)
  7. 1 screen- und 2 projection-Links ohne Title (*)
  1. Nur Link (*)
  2. Link mit Title
  3. Link mit Media (*)
  4. Link mit Title und Media
  5. Links MIT/OHNE/MIT Title
  6. Links OHNE/MIT/OHNE Title (*)
  7. Links MIT/MIT/OHNE Title (*)
  8. Links OHNE/MIT/MIT Title
  9. Links OHNE/OHNE/MIT Title (*)
  10. Link mit Title, META-Tag für Blau
  1. Nur Link (*)
  2. 4 x MIT Title
  3. MIT/MIT/MIT/OHNE Title (*)
  4. MIT/OHNE/MIT/OHNE Title (*)
  5. OHNE/MIT/MIT/OHNE Title (*)
  6. OHNE/OHNE/OHNE/MIT Title (*)
  7. MIT/OHNE/OHNE/MIT Title
 
"DYNAMISCHE" SEITEN
Client-seitig Server-seitig
CSS-Verlinkung mit JavaScript CSS-Verlinkung mit PHP CSS-Verlinkung mit SSI
  1. Nur JS - 1 StyleSheet (*)
  2. Nur JS - Win/Mac (*)
  3. HTML ohne TITLE, JS (*)
  4. HTML mit TITLE, JS (*)
  5. JS, HTML (*)
  6. HTML, JS mit Cookie (*)
  7. idem mit PopUp (*)
 PHP: Grundlagen
  1. HTML, dann PHP (echo) I (*)
  2. HTML, dann PHP (echo) II (*)
  3. HTML, dann PHP (include) (*)
 
  1. HTML, dann SSI (*)

(*) In diesen Beispielen verhält sich Netscape 6.0 wie die andern Browser.
Mozilla 0.8 lieferte übrigens in all den Beispielen dasselbe Resultat wie Netscape 6.0

<= Zurück zur Übersicht der Testseiten

Autor: Thomas Lüthi, luthi@my-mail.ch - Letzte Änderung: 27.12.2001