Esistono diversi modi per applicare gli stili CSS a una pagina Web, inclusi sia i fogli di stile esterni che gli stili incorporati. Se si utilizza un foglio di stile esterno, che è il modo consigliato per dettare l'aspetto di un documento HTML, è necessario utilizzare un approccio
@importare.
Il
@importare regola consente di importare importanti fogli di stile esterni nel documento, sia in una pagina HTML che in altri documenti CSS. Rompere molti stili in un numero di file più piccoli e mirati (uno per il layout, uno per la tipografia, uno per le immagini, ecc.) A volte può rendere più semplice la gestione di quei file e del loro stile. Se vuoi godere di questo vantaggio, importare questi vari file è ciò che dovrai fare per farli funzionare tutti per la visualizzazione della tua pagina web.
Importazione in HTML
Per usare il
@importare regola nel tuo codice HTML, dovresti aggiungere quanto segue al file
del documento:
:
Questo codice ora importa questo foglio di stile per l'uso su questa pagina HTML e puoi gestire tutti i tuoi stili in quel file. Lo svantaggio di fogli di stile importanti in questo modo è che questo metodo non consente download paralleli. La pagina deve scaricare un intero foglio di stile prima di passare al resto della pagina, inclusi eventuali altri file CSS che stai importando con questo metodo. Ciò avrà un effetto negativo sulla velocità della tua pagina e sulle prestazioni di download. Considerando quanto sia importante il rendimento della pagina per il successo del sito Web, questo inconveniente da solo potrebbe essere una ragione per cui si vorrebbe evitare di utilizzare @import.
Approccio alternativo
In alternativa all'utilizzo
@importare nel tuo codice HTML, puoi collegarti a quel file CSS come questo:
Funziona in modo molto simile a
@importare in quanto ti permette di gestire tutti i tuoi CSS da una posizione / file centrale, ma questo metodo è preferibile dal punto di vista del download. Se vuoi ancora segmentare diversi tipi di stili in file separati, puoi continuare a farlo e utilizzare la funzionalità @import all'interno del tuo file CSS principale. Ciò significa che i tuoi file CSS esterni possono ancora essere gestiti individualmente, ma dal momento che tutti importano in un unico CSS CSS, le prestazioni sono migliorate.
Importazione in CSS
Usando il
l'esempio di codice precedente porta il file "default.css" da usare sulla tua pagina HTML. Dentro quel file CSS, avresti i tuoi vari stili di pagina. Puoi avere tutti questi stili dettagliati su quella pagina, oppure puoi usare @import per separarli per una gestione più semplice. Ancora una volta, diciamo che stiamo usando 4 file CSS separati: uno per il layout, uno per la tipografia e uno per le immagini. Il quarto file è il nostro file "master" che è quello a cui la nostra pagina si collega (per questo esempio, questo è "default.css"). Nella parte superiore del file CSS principale possiamo aggiungere le regole mostrate di seguito:
@import url ('/ styles / layout.css'); @ import url ('/ styles / type.css'); @ import url ('/ styles / images.css');
Si noti che queste regole dovere essere prima di tutti gli altri contenuti nel file CSS affinché possano funzionare. Non puoi avere nessun altro stile CSS prima di queste regole di importazione.
Sotto queste regole di importazione, puoi aggiungere qualsiasi altro stile CSS che desideri avere nel tuo foglio predefinito. Quando viene caricato quel file CSS principale, prima importerà questi file separati e aggiungerà i loro stili nella parte superiore del foglio di stile. Avrà quindi tutti gli altri tuoi stili al di sotto di quelli importati, creando il file CSS completo che il browser Web utilizzerà per visualizzare il tuo sito. Ottieni il vantaggio di gestire file più piccoli e concentrati pur mantenendo un solo foglio di stile collegato in quell'HTML.
Utilizzo di @import per le query multimediali
Una cosa che potresti considerare è separare le query multimediali del tuo sito web per gli stili di siti web reattivi in un file separato. Poiché questi stili reattivi possono essere fonte di confusione se visti insieme alle altre regole di stile del tuo sito, la possibilità di averli da soli in un file diverso può essere interessante. Una preoccupazione per questo approccio è che, dal tuo
@importare le regole devono essere le prime, ciò significa che le tue query multimediali verranno caricate prima degli altri stili del tuo sito. Quando si crea un sito reattivo mobile-first che tiene conto delle prestazioni, è probabile che questo sia un problema. Per questo motivo, ti suggeriamo di non separare gli stili reattivi del tuo sito separatamente e di usarli
@importare per portarli nel tuo sito. Sì, sembra che ci siano dei vantaggi nel farlo, ma gli svantaggi superano tali benefici.
Devo usare @import?
No tu no. Molti siti mostrano semplicemente tutti i loro stili principali all'interno di un file e, per quanto grande possa essere quel file, sono gestiti in questo modo (questo è come lo faccio nel mio lavoro). Se trovi
@importare utile, quindi può essere parte del tuo flusso di lavoro. Altrimenti, puoi costruire tranquillamente pagine web il tuo singolo foglio di stile di tutte le tue regole CSS.
Supporto del browser
I browser molto vecchi hanno problemi con alcune di queste regole @import, ma questi browser difficilmente potrebbero rappresentare un problema per te in questi giorni. Questo è particolarmente vero ora che è scaduta la scadenza della fine della vita per le versioni precedenti di Internet Explorer. In definitiva, se decidi di usare
@importare regole nel tuo HTML o CSS, non dovresti incorrere in problemi con versioni legacy dei browser web a meno che tu non abbia qualche strana necessità di supportare versioni incredibilmente vecchie di IE.
A cura di Jeremy Girard
