Regola CSS @import
La regola CSS @import consente di importare regole di stile da altri fogli di stile e di supportare le media query. Valori ed esempi.
La regola @import di CSS importa le regole di stile da un foglio di stile esterno in un altro. Permette di suddividere il CSS in più file (ad esempio, un file per componente o per tema) e di combinarli da un unico punto di ingresso; può inoltre caricare un foglio in modo condizionale sulla base di una media query.
La parola chiave @import deve essere seguita dalla posizione del foglio da includere, scritta come url() o come stringa semplice. Entrambe le righe seguenti producono lo stesso risultato:
@import url("theme.css");
@import "theme.css";Dove deve essere inserita la regola
@import è valido solo all'inizio di un foglio di stile. Deve comparire prima di qualsiasi altra regola eccetto @charset e @layer (un'istruzione @layer senza blocco). Se si inserisce un @import dopo una regola normale come un blocco di selettore, il browser lo ignora.
@charset "utf-8"; /* allowed first */
@import "reset.css"; /* imports must come before any styles */
body {
margin: 0;
}
@import "late.css"; /* invalid — ignored, because a rule already appeared */@import non può essere utilizzato all'interno di regole at-rule di gruppo condizionale come @media o @supports. Per caricare un foglio solo in determinate condizioni, allegare la condizione all'@import stesso (vedere Media query di seguito).
@import vs. l'elemento <link>
È possibile importare un foglio di stile anche dall'HTML con <link rel="stylesheet" href="theme.css">. I due approcci producono lo stesso risultato, ma differiscono nelle prestazioni:
- Un tag
<link>viene rilevato dal browser durante l'analisi dell'HTML, quindi il file può iniziare a scaricarsi immediatamente e in parallelo con le altre risorse. - Un
@importviene trovato solo dopo che il foglio di stile padre è stato scaricato e analizzato. Questo crea una catena di richieste (HTML → main.css → imported.css) che può ritardare il rendering.
Per i fogli di stile di livello superiore, preferire <link>. Usare @import quando si desidera specificamente una composizione a livello CSS — ad esempio, per assemblare un singolo bundle da più file parziali o per importare un foglio in un livello a cascata con nome.
| Initial Value | - |
|---|---|
| Applies to | - |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | N/A |
Sintassi
Sintassi della regola CSS @import
@import <url> | <string> [ <media-query-list> ]? ;Esempio della regola @import:
Esempio della regola CSS @import
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2>@import at-rule example</h2>
<p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
<p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
</body>
</html>Risultato
La differenza tra URL relativo e URL assoluto
I tipi di dati <url> e <string> sono accettati dalla regola @import per specificare il file da importare. Questo può essere fornito come URL assoluto o relativo.
L'esempio di codice seguente usa un URL relativo. Ciò significa che l'URL è relativo alla posizione del foglio di stile corrente. In questo caso non è necessario fornire un percorso: è sufficiente indicare il nome del file.
Regola CSS @import
@import "relative.css";Nell'esempio seguente l'URL è ancora relativo, ma è stato fornito anche un percorso parziale:
Regola CSS @import
@import "../css/relative.css";Come si può vedere, il seguente esempio include il percorso completo con il nome di dominio. Ciò significa che l'URL è assoluto.
Regola CSS @import
@import "http://www.examples.fr/css/absolute.css";Media query
@import accetta una media query dopo l'URL, in modo che il foglio venga applicato solo quando la condizione è soddisfatta. È questo il modo per rendere un'importazione dipendente dai media senza racchiuderla in @media (operazione non consentita).
Il foglio seguente viene caricato solo quando la pagina viene stampata:
@import "print.css" print;È possibile utilizzare qualsiasi media query, incluse le query sulle caratteristiche come la larghezza:
@import "wide.css" screen and (min-width: 768px);Il browser scarica comunque il file indipendentemente dalla condizione — la media query decide solo se le regole vengono applicate, non se il file viene recuperato.
Importazione in un livello a cascata
Una funzionalità moderna consente di assegnare un foglio importato a un livello a cascata con nome tramite layer(). Tutto il contenuto del file importato partecipa alla priorità di quel livello, il che rappresenta un modo pulito per impedire che il CSS di terze parti sovrascriva il proprio:
@import "bootstrap.css" layer(framework);È anche possibile condizionare un'importazione con una query sulle funzionalità usando supports(), in modo che il foglio venga caricato solo se il browser supporta una determinata dichiarazione:
@import "grid.css" supports(display: grid);Valori
| Value | Description |
|---|---|
| url | Un <url> o <string> che indica la posizione della risorsa da importare. L'URL può essere relativo o assoluto. |
| string list-of-mediaqueries | Un elenco di media query separate da virgola che condizionano l'applicazione delle regole CSS definite nell'URL collegato. |