CSS @import-Regel
Definition und Verwendung
Die @import-Regel ermöglicht es Ihnen, ein Stilblatt in ein anderes Stilblatt zu importieren.
Die @import-Regel muss am Dokumentanfang stehen (aber nach jeder @charset-Aussage).
Die @import-Regel unterstützt Media Queries und ermöglicht daher die abhängige Importierung von Medien.
Beispiel
Beispiel 1
Importiert das "navigation.css"-Stilblatt in das aktuelle Stilblatt ein:
@import "navigation.css"; /* Zeichenkette verwenden */
oder
@import url("navigation.css"); /* URL verwenden */
Beispiel 2
Importiert nur "printstyle.css"-Stilblatt, wenn das Medium Print ist:
@import "printstyle.css" print;
Beispiel 3
Importiert nur "mobstyle.css"-Stilblatt, wenn das Medium Screen und die maximale Breite des Viewports 768 Pixel beträgt:
@import "mobstyle.css" screen and (max-width: 768px);
CSS-Syntax
@import url|string list-of-mediaqueries;
Attributwert
| Wert | Beschreibung |
|---|---|
| url|string | URL oder Zeichenkette, die den Standort der zu importierenden Ressource darstellt. URL kann absolut oder relativ sein. |
| list-of-mediaqueries | Eine durch Komma getrennte Liste von Media Queries, die bestimmt, unter welchen Bedingungen die durch URL eingeführten CSS-Regeln angewendet werden. |
Browser-Unterstützung
Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
