Diversi siti includono i loro esterni Fogli di stile in modi diversi, utilizzando l'approccio @import o collegandosi a quel file CSS. Qual è la differenza tra @import e link per CSS e come hai deciso quale è meglio per te?
La differenza tra @import e Link
Il collegamento è il primo metodo per includere un foglio di stile esterno nelle tue pagine web. Ha lo scopo di collegare la tua pagina con il tuo foglio di stile. Si aggiunge alla testa del tuo Documento HTML.
L'importazione consente di importare un foglio di stile in un altro. Questo è leggermente diverso dallo scenario del collegamento perché puoi importare fogli di stile all'interno di un foglio di stile collegato.
Dal punto di vista degli standard, non c'è differenza tra il collegamento a un foglio di stile esterno o l'importazione. In entrambi i casi è corretto e in entrambi i casi funzionerà ugualmente bene nella maggior parte dei casi. Tuttavia, ci sono alcuni motivi per cui potresti voler utilizzare uno rispetto all'altro.
Perché usare @import?
Molti anni fa, il motivo più comune che è stato fornito per l'utilizzo di @import invece (o insieme a) è perché i browser meno recenti non riconoscevano @import, quindi potresti nascondere gli stili da loro. Importando i tuoi fogli di stile, li renderesti essenzialmente disponibili a browser più moderni e conformi agli standard mentre li "nascondevi" dal versioni precedenti del browser.
Un altro uso del metodo @import consiste nell'utilizzare più fogli di stile su una pagina, includendo solo un singolo collegamento nella testa del documento. Ad esempio, una società potrebbe avere un foglio di stile globale per ogni pagina del sito, con sottosezioni con stili aggiuntivi che si applicano solo a quella sottosezione. Collegandosi al foglio di stile della sottosezione e importando gli stili globali nella parte superiore di quello stile foglio, non devi mantenere un foglio di stile gigantesco con tutti gli stili per il sito e ogni sottosezione. L'unico requisito è che tutte le regole @import debbano precedere il resto delle regole di stile. Eredità può ancora essere un problema.
Perché usare il collegamento?
Il motivo n. 1 per utilizzare i fogli di stile collegati è fornire fogli di stile alternativi per i clienti. Browser come Firefox, Safari e Opera supportano l'attributo rel="alternate stylesheet" e quando ce n'è uno disponibile consentirà agli spettatori di passare da uno all'altro. Puoi anche usare uno switcher JavaScript per passare da un foglio di stile all'altro in IE, usato più spesso con Layout zoom ai fini dell'accessibilità.
Uno degli svantaggi dell'utilizzo di @import è che se hai una testa molto semplice con solo la regola @import, le tue pagine potrebbero visualizzare un "flash di contenuto senza stile" durante il caricamento. Una semplice soluzione a questo è assicurarsi di avere almeno un collegamento aggiuntivo o un elemento di script nella tua testa.
E il tipo di supporto?
Molti autori affermano che è possibile utilizzare il tipo di media per nascondere i fogli di stile dai browser meno recenti. Spesso menzionano questa idea come un vantaggio per l'utilizzo di @import o, ma puoi impostare il supporto digita con entrambi i metodi e i browser meno recenti che non supportano i tipi di media non li visualizzeranno in nessuno dei due Astuccio.
Quindi quale metodo dovresti usare?
La maggior parte degli sviluppatori oggi usa i link e poi importa i fogli di stile in fogli di stile esterni. In questo modo, hai solo una o due righe di codice da regolare nei tuoi documenti HTML. Ma la linea di fondo è che dipende da te. Se ti senti più a tuo agio con @import, allora fallo! Entrambi i metodi sono conformi agli standard e, a meno che non si preveda di supportare browser molto vecchi, non c'è motivo valido per utilizzarli.