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.

You can add images to your comment by clicking here.