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.
Lascia un commento