Differenza tra @import e link in CSS

118

Sto imparando un po 'di CSS per modificare il mio modello di progetto. Sono arrivato a questo problema e non ho trovato una risposta chiara sul web. C'è una differenza tra l'utilizzo di @import o link in CSS?

Utilizzo di @import

<style>@import url(Path To stylesheet.css)</style>

Uso di Link

<link rel="stylesheet" href="Path To stylesheet.css">

Qual è il modo migliore per farlo? e perché? Grazie!

css import hyperlink

— Omar Abid
fonte

142

In teoria, l'unica differenza tra loro è che @importil meccanismo CSS include un foglio di stile e <link>il meccanismo HTML. Tuttavia, i browser li gestiscono in modo diverso, offrendo <link>un chiaro vantaggio in termini di prestazioni.

Steve Souders ha scritto un ampio post sul blog che confrontava l'impatto di entrambi <link>e @import(e di tutti i tipi di combinazioni di essi) chiamato " non usare @import ". Quel titolo parla praticamente da solo.

Yahoo! lo cita anche come una delle loro best practice per le prestazioni (co-autore di Steve Souders): Choose <link>over @import

Inoltre, l'utilizzo del <link>tag ti consente di definire fogli di stile "preferiti" e alternativi . Non puoi farlo con @import.

— Mercator
fonte

Grazie - bei collegamenti ipertestuali - specialmente il primo.

— Faisal Vali,

6

È possibile utilizzare il comando import per importare un altro CSS all'interno di un file css che non è possibile con il comando link. Il browser davvero vecchio non può (IE4, IE5 parzialmente) gestire la funzionalità di importazione. Inoltre, alcune librerie che analizzano il tuo xhtml / html potrebbero non riuscire a ottenere l'importazione del foglio di stile. Tieni presente che l'importazione dovrebbe precedere tutte le altre dichiarazioni CSS.

— merkuro
fonte

6

Nessuna vera differenza oggi, ma @importnon è gestita correttamente dai browser più vecchi (Netscape 4, ecc.), Quindi l' @importhack può essere utilizzato per nascondere le regole CSS 2 da questi vecchi browser.

Ancora una volta, a meno che tu non supporti browser molto vecchi, non c'è differenza.

Se fossi in te, tuttavia, utilizzerei la <link>variante sulle tue pagine HTML, perché ti consente di specificare cose come il tipo di media (stampa, schermo, ecc.).

— zenazn
fonte

5

Specificare il supporto è possibile anche per le istruzioni @import.

— Georg Schölly,

Veramente? Immagino che potresti inserire un tipo di media sul tuo tag di stile, ma a me sembra un po 'come un trucco.

— zenazn

5

Puoi fare ad esempio "@import url (style.css) screen, print", sebbene IE7 e precedenti non supportino i tipi di media.

— mercator

5

La direttiva <link> può consentire il caricamento e l'interpretazione asincrona di più CSS.

la direttiva @import forza il browser * ad attendere fino a quando lo script importato viene caricato in linea nello script principale prima che possa essere elaborato correttamente dal suo motore, poiché tecnicamente è solo uno script.

Molti script di minimizzazione CSS (e linguaggi come less o sass) concatenano automaticamente gli script collegati nello script principale poiché finisce per causare meno overhead di trasferimento.

* (dipende dal browser)

— Ape-Inago
fonte

2

Questo articolo può essere utile qui: 4 metodi per aggiungere CSS a HTML: link, embed, inline e import

— Matthew James Taylor
fonte

1

Citazione: "Immaginiamo di avere un sito web di 1000 pagine e colleghiamo a un file CSS da ogni pagina del sito. Immaginiamo ora di voler aggiungere un secondo file CSS a tutte quelle pagine. Potremmo modificare tutti i 1000 file HTML e aggiungere un secondo collegamento CSS o un modo molto migliore sarebbe importare il secondo file CSS dal primo file. Abbiamo appena risparmiato molte ore di lavoro! "

— Casebash

1

Quando uso la regola @import, generalmente è per importare un foglio di stile all'interno di un foglio di stile esistente (anche se non mi piace farlo all'inizio). Ma per rispondere alla tua domanda, no, non credo ci sia alcuna differenza. Assicurati solo di mettere l'URL tra virgolette per rispettare XHTML valido.

— Barry Gallagher
fonte

1

@import è generalmente pensato per essere utilizzato in un foglio di stile esterno piuttosto che in linea come nel tuo esempio. Se davvero volessi nascondere un foglio di stile a browser molto vecchi, potresti usarlo come un trucco per impedire loro di utilizzare quel foglio di stile.

Nel complesso, il <link>tag viene elaborato più rapidamente della regola @import (che apparentemente è un po 'lenta per quanto riguarda il motore di elaborazione css).

— Gabriel Hurley
fonte

0

Microsoft Internet Explorer 9 (MSIE9) non sembra gestire correttamente @import. Osserva queste voci dal mio registro di Apache (indirizzo IP nascosto ma whoisdiceva che era di proprietà di Microsoft stessa): l'HTML principale collegato a screen.css che aveva

@import url("print.css") print;
@import url("speech.css") aural;

che sto per modificare in linkelementi nell'HTML, perché sembra che MSIE9 invii due richieste errate al server, ottenendo errori 404 di cui potrei fare a meno:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

Ci sono state richieste appropriate per questi file in seguito, ma possiamo fare a meno di questa urllogica "spara prima al server, analizza dopo".

— Silas S. Brown
fonte