CSS @import-regel
Definitie en gebruik
De @import-regel staat u toe om een stylesheet in een andere stylesheet te importeren.
De @import-regel moet zich op de top van het document bevinden (maar na elke @charset-verklaring).
De @import-regel ondersteunt mediaqueries, zodat afhankelijkheden van media kunnen worden toegestaan.
Voorbeeld
Voorbeeld 1
Importeer de stylesheet "navigation.css" in de huidige stylesheet:
@import "navigation.css"; /* Gebruik string */
of
@import url("navigation.css"); /* Gebruik url */
Voorbeeld 2
Importeer alleen de stylesheet "printstyle.css" wanneer het medium print is:
@import "printstyle.css" print;
Voorbeeld 3
Importeer alleen de stylesheet "mobstyle.css" wanneer het medium screen is en de viewport breedte maximaal 768 pixels bedraagt:
@import "mobstyle.css" screen and (max-width: 768px);
CSS-syntaxis
@import url|string list-of-mediaqueries;
eigenschapswaarde
| waarde | beschrijving |
|---|---|
| url|string | url of string, die de locatie van het te importeren resource represents. url kan absoluut of relatief zijn. |
| list-of-mediaqueries | Een lijst van mediaqueries gescheiden door komma's, die bepaalt op welke voorwaarden de CSS-regels die worden ingevoerd via de URL worden toegepast. |
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
