CSS 2.1: `@import`

Allgemeines:

Es hat sich heute zur allgemein üblichen Praxis entwickelt, CSS-Regeln nicht im style-Element im Kopf jeder Seite einer Website einzubinden, sondern sie in einer externen Datei zu lagern und bei Bedarf einzulesen. Die Vorteile dieser Arbeitsweise sind längst Allgemeingut geworden und sollen deshalb hier nicht noch einmal aufgezählt werden.

Es gibt zwei Möglichkeiten, externe Stylesheets einzubinden:

in HTML das Element link,
in CSS die @-Regel @import.

Beide Möglichkeiten eignen sich auch dazu, Ausgabemedien für CSS-Regeln festzulegen.

Ein besonderer Vorteil dieser Regel ist, dass sich mit ihr CSS-Deklarationen vor schlechten Browsern wie NN 4.x verstecken lassen. CSS-basierte Layouts werden durch den NN 4 zerschlagen und in weiten Teilen unlesbar, da er die CSS-Eigenschaften zur Positionierung nicht oder falsch interpretiert. Um das zu verhindern, macht man sich zunutze, dass er die @import-Regel ebenfalls nicht kennt und deshalb praktisch blind für alle in einer @import-Regel stehenden Deklarationen ist. Dadurch wird das Layout zwar nicht mehr korrekt dargestellt, aber alle Inhalte bleiben lesbar.

Viele Webdesigner argumentieren dagegen, dass eine simple Tabelle für diesen Zweck geeigneter sei, weil dadurch eine mehr konsistente Darstellung des Layouts gegeben ist.

Die verschiedenen Möglichkeiten zur Einbindung von Stylesheets in HTML-Dateien werden auf der Seite Anbindung von CSS an HTML ausführlich vorgestellt.

Die Regel `@import`

Die Regel @import dient dazu, Regeln aus externen Stylesheets in eine CSS-Datei oder in den Stylesheet-Bereich einer HTML-Datei zu importieren.

Die Regel @import muß immer vor allen anderen Regeln stehen. In einer CSS-Datei oder einem Stylesheet-Bereich können auch mehrere @import-Regeln enthalten sein. Sie müssen dann aber vor allen anderen Regeln stehen. Ausnahme ist nur die Regel @charset, die Informationen über die Zeichenkodierung des Stylesheets enthält.

@import darf auch nicht innerhalb anderer @-Regelblocks, z. B. @page { ... }, auftreten. Derartig falsch plazierte @import-Regeln müssen vom Anwenderprogramm ignoriert werden.

Durch @import eingelesene Dateien können wiederum @import-Regeln enthalten. Dabei ist es wichtig, in welcher Reihenfolge die Deklarationen auftreten. Jede zusätzlich eingeführte Ebene hat eine geringere Priorität in der Kaskade, d. h. später importierte Stylesheets erhalten Vorrang vor eher importierten Stylesheets. Ein kurzes Beispiel soll dies verdeutlichen.

Angenommen, unser Web-Dokument würde folgenden Style-Bereich enthalten:

Das importierte Stylesheet enthält diese Zeile:

body { background: #fff; }

Beide Deklarationen für die Hintergrundfarbe der Seite widersprechen sich. Da aber die zuletzt deklarierte Regel eine höhere Gewichtung hat wie die importierten Regeln, würde der Hintergrund der Seite schwarz werden.

Durch die Möglichkeit, mehrere @import-Regeln in einem Stylesheet-Bereich zu halten, lassen sich die CSS-Regeln einer Website nach sachlichen Gesichtspunkten aufteilen (=modularisieren) und in jede Seite brauchen nur die gerade benötigten Stylesheets eingefügt zu werden.

Syntax:

@import url("<name>") <media>;

oder

@import "<name>" <media>;

Komponenten:

<name>: Name der importierten CSS-Datei.
<media>: Aufzählung der Medien in einer komma-separierten Liste, auf die die importierten Regeln angewandt werden sollen. Es können einer oder mehrere Medientypen angegeben werden. Diese Angabe ist optional: ist kein Medientyp notiert, hat dies denselben Effekt wie all.

Code-Beispiel:

Die folgenden drei Beispiele sind äquivalent, sie lesen eine CSS-Datei für Druckausgabe in den Stylesheet-Bereich einer HTML-Datei ein und spezifizieren 'print' als Ausgabemedium. (Es ist aber möglich, dass nicht alle drei Versionen von allen Anwenderprogrammen gleich gut unterstützt werden).

Beispiel 1:

Beispiel 2:

Beispiel 3:

Browserunterstützung

: Die At-Regel @import wird von allen modernen Browsern unterstützt, Unterschiede gibt es nur bei den älteren Browsern.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Diese At-Regel ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Die Umsetzung von @import durch Browser von Mobilgeräten ist aber bisher kaum besser als mangelhaft, weshalb von einer Nutzung in Stylesheets für handheld abgeraten werden muss.