CSS @import-regel

Definitie en gebruik

De @import-regel staat u toe om een stijlblad in een ander stijlblad te importeren.

De @import-regel moet zich op de top van het document bevinden (maar na elke @charset-verklaring).

De @import-regel ondersteunt ook mediaqueries, waardoor afhankelijkheden van media kunnen worden toegestaan.

Voorbeeld

Voorbeeld 1

Importeer het stijlblad "navigation.css" in het huidige stijlblad:

@import "navigation.css"; /* Gebruik string */

Of

@import url("navigation.css"); /* Gebruik URL */

Voorbeeld 2

Importeer alleen het stijlblad "printstyle.css" wanneer het medium print is:

@import "printstyle.css" print;

Probeer het zelf

Voorbeeld 3

Importeer alleen het stijlblad "mobstyle.css" wanneer het medium screen is en de breedte van het viewport maximaal 768 pixels is:

@import "mobstyle.css" screen and (max-width: 768px);

Probeer het zelf

CSS-syntaxis

@import url|string list-of-mediaqueries;

Eigenschapswaarde

Waarde Beschrijving
url|string Een URL of een string die de locatie van het te importeren resource vertegenwoordigt. URL kan absoluut of relatief zijn.
list-of-mediaqueries Een met komma's gescheiden lijst van mediaqueries die bepalen onder welke voorwaarden de CSS-regels die via de URL worden ingevoerd worden toegepast.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5