Regola @import in CSS
Definizione e uso
La regola @import ti permette di importare uno stylesheet in un altro stylesheet.
La regola @import deve essere posizionata nella parte superiore del documento (ma dopo qualsiasi dichiarazione @charset).
La regola @import supporta le query di media, quindi può permettere l'importazione dipendente dal media.
Esempio
Esempio 1
Importa lo stylesheet "navigation.css" nella tavola 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;
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);
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 in quali condizioni applicare le regole CSS importate tramite URL. |
Supporto del browser
I numeri nelle tabelle 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 |
