I fogli di stile possono essere inclusi in una pagina web usando principalmente due metodi: link e @import.
L’obiettivo di questo post è analizzare le conseguenze dell’utilizzo delle due tecniche. Il risultato in sintesi? Non usare @import per migliorare la velocità delle pagine ed evitare problemi con Internet Explorer.

Il metodo più diffuso per aggiungere fogli di sitle alle nostre pagine HTML è il seguente:

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />

Facendo attenzione ai tempi di caricamento è possibile notare come i CSS vengano letti in parallelo su tutti i browser.

Link e @import

I problemi arrivano quando insieme ad un CSS incluso con link, viene usato @import:

<link rel="stylesheet" type="text/css" href="style1.css" /> <style type="text/css"> @import url("style2.css");</style>

In questo caso, su Internet Explorer (IE8 compreso), il CSS incluso con @import viene caricato solo dopo aver completato il primo file. Questo allunga considerevolmente i tempi di caricamento della pagina.

Lo stesso succede quando il secondo foglio di stile viene importato all’interno del primo:

<link rel="stylesheet" type="text/css" href="style1.css" />

e all’interno di style1.css:

@import url("style2.css");

In questo caso però il caricamento in sequenza succede su tutti i browser.