Css: Style, Link o Import?

Per importare un file css in un file html si può usare link oppure @import:

<link href="stile.css" type="text/css" />

<style type="text/css">@import url("stile.css");</style>

La differenza più grossa fra i due è che @import sovrascrive i valori degli stili inseriti tramite link, a prescindere dall’ordine in cui i comandi sono inseriti nel file html.
Quindi, anche se @import viene prima di link, i suoi valori hanno la precedenza.

A cosa può servire?
Ad esempio se stiamo lavorando su un tema di WordPress precotto e preferiamo creare un nuovo file Css parallelo al principale, senza andare a modificare quello originario.

Secondo i miei test, @import ha la precedenza – oltre che su link – anche sugli stili incorporati nell’head di un documento, a patto che @import sia scritto dopo style; link è quello che ha meno ‘potere’ di fra i tre.

C’è inoltre da dire che – secondo un articolo del 2009 scritto da Steve Souders, non un tizio qualsiasi ma uno che ha scritto addirittura un libro dal titolo “High Performance Web Sites” – l’uso di link e @import assieme “rallenta” (relativamente) il caricamento della pagina su Internet Explorer 6-7-8 web poiché usando quel browser le due risorse vengono caricate in serie anziché in parallelo.

Considerando comunque che l’articolo è vecchio, la velocità nel caricamento di risorse leggere come i file Css (visto il diffondersi della banda larga) è acqua passata, IE è stato aggiornato e comunque – stando alle statistiche – non è nemmeno il browser più popolare…

…io non mi preoccuperei troppo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.