Regola @import CSS

Definizione e uso

La regola @import consente di importare uno stylesheet in un altro stylesheet.

La regola @import deve essere posizionata all'inizio del documento (ma dopo qualsiasi dichiarazione @charset).

La regola @import supporta anche le query di media, pertanto è possibile permettere l'importazione basata sul media.

Esempio

Esempio 1

Importa lo stylesheet "navigation.css" nella tabella di stili corrente:

@import "navigation.css"; /* Usa stringa */

o

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

Esempio 2

Importa lo stylesheet "printstyle.css" solo quando il media è print:

@import "printstyle.css" print;

Prova te stesso

Esempio 3

Importa lo stylesheet "mobstyle.css" solo quando il media è screen e la larghezza massima della viewport è 768 pixel:

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

Prova te stesso

Sintassi CSS

@import url|string list-of-mediaqueries;

valore dell'attributo

valore descrizione
url|string url o stringa, che rappresenta la posizione del risorsa da importare. L'url può essere assoluto o relativo.
list-of-mediaqueries Elenco di query di media separato da virgola, che determina le condizioni under cui le regole CSS importate tramite URL vengono applicate.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

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