@import e link: quale usare e perchè?

[Eugene]

Buonasera.

Da quando ho "scoperto" l'esistenza del comando @import al fine di collegare un documento css ad una pagina html, mi è sorto un dubbio:
quali vantaggi offre questo metodo rispetto al più tradizionale, almeno per il sottoscritto, link?
Ovviamente ho fatto delle indagini in rete, e le uniche informazioni che ho trovato a riguardo sono relative al fatto che NN non riconoscesse questo comando dando la possibilità di creare più fogli stile per i differenti browser (ma non esistendo più, questa motivazione perde di valore) e che cambiando il modo di scrivere il comando si possa stabilire da quale browser (e da quale versione del suddetto) far leggere il foglio stile.

Ma, a parte quanto sopra indicato, esiste un altro motivo che dovrebbe motivare la scelta di @import piuttosto che link per collegare un documento css ad una pagina html?

Grazie e buona serata.

[fcaldera]

@import può generare il fouc su explorer
infatti @import carica i fogli di stile per ultimi e in ordine non sequenziale. Quindi le regole verrebbero applicate solo alla fine.

inoltre le regole caricate con @import dovrebbero precedere tutte le altre ma, In alcuni browser, se si utilizza questa dichiarazione NON all'inizio, il foglio di stile potrebbe non caricarsi affatto

quindi, meglio usare il tag <link>

[erredeco]

Io utilizzo il seguente sistema, che mi permette un'elevata flessibilità, separando i fogli di stile a seconda del loro utilizzo:
Nella pagina:

<link rel="stylesheet"  type="text/css" href="css_global.css" media="screen"/>

contenuto di css_global.css:

/*elenco fogli di stile: \*/
@import"reset.css"
@import"typography.css";
@import"common.css";
@import"decoration.css";
/*ecc.ecc.ecc.*/

[Eugene]

Grazie mille per la spiegazione.

Il dubbio mi era sorto soprattutto perchè avevo trovato @import nel sito css Zen Garden, che fino a prova contraria dovrebbe essere il sito con i css per eccellenza.

Dopo aver letto la pagina da te indicata, ho però notato che nel sopraindicato sito venga inserito

<script type="text/javascript"></script>

prima di richiamare il foglio stile, eliminando effettivamente l'effetto FOUC.

A questo punto mi chiedo: perchè non hanno usato direttamente link? C'è qualche motivazione che mi sfugge?

Buona giornata.

[Eugene]

erredeco, inizialmente utilizzavo anche io fogli stile differenti in base all'utilizzo, ma poi mi è stato fatto notare che così facendo si rallenta notevolmente il caricamento dei documenti css poichè per ogni file viene generato un processo di carimento url (o qualcosa del genere).
Non so se con il tuo sistema (ovvero richiamare gli altri documenti css da un css principale) risolva questo problema.

[erredeco]

mi è stato fatto notare che così facendo si rallenta notevolmente il caricamento dei documenti css poichè per ogni file viene generato un processo di carimento url (o qualcosa del genere).

E' chiaro che subirai un rallentamento...a mio avviso però i vantaggi (soprattutto in fase di sviluppo) superano gli svantaggi: con questo sistema posso - senza MAI toccare l'HTML - "spegnere" alcuni fogli di stile e non altri, rinominarli, provarne di nuovi,eccetera...

Credo che il motivo principale per cui molti utilizzano

@import"stile.css";

Sia il fatto che è invisibile a IE5 (e inferiori) e Netscape4: in questo modo non ci si prende la briga di dover costrurire un foglio di stile compatibile con browser vecchissimi, il cui supporto per i CSS è talmente limitato che non vale la pena sprecar tempo per cercare di realizzare un CSS compatibile.

P.S.

@import"stile.css";

Risulta invisibile anche a IE5, ma VISIBILE a IE5.5.

@import"stile.css"screen;

invece è invisibile a QUALUNQUE IE (7 compreso!)