CSS @import-regeln

Definition och användning

Regeln @import tillåter dig att importera en stilmall till en annan stilmall.

Regeln @import måste placeras på dokumentets topp (men efter eventuella @charset-deklarationer).

Regeln @import stöder också mediafrågor, så det är möjligt att tillåta import beroende på mediet.

Exempel

Exempel 1

Importera "navigation.css"-stilmallen till den aktuella stilmallen:

@import "navigation.css"; /* Använd sträng */

eller

@import url("navigation.css"); /* Använd URL */

Exempel 2

Importera endast "printstyle.css"-stilmall när mediet är print:

@import "printstyle.css" print;

Prova själv

Exempel 3

Importera endast "mobstyle.css"-stilmall när mediet är skärm och viewportbredden max 768 pixlar:

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

Prova själv

CSS-syntax

@import url|string list-of-mediaqueries;

Egenskapsvärde

Värde Beskrivning
url|string URL eller sträng som representerar platsen för den resurs som ska importeras. URL kan vara absolut eller relativ.
list-of-mediaqueries En komma-separerad lista med mediafrågor som avgör under vilka förhållanden CSS-regler som laddas in via URL tillämpas.

Webbläsarstöd

Tal i tabellen noterar den första webbläsareversion som helt stöder detta egenskap.

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