Salta il menu

[css] @import

Notizia del 12/02/2007

Poniamo di avere un sito piuttosto esteso, con diverse sezioni ognuna delle quali formattata in modo leggermente diverso o comunque con tanti particolari e comandi: far stare tutto in un unico foglio di stile può rendere laboriosa la ricerca di un determinato passaggio in caso di modifica malgrado l'indentatura.

In questi casi torna utile il comando @import che permette di agganciare un CSS a un altro, "a cascata", appunto: vediamo come.

Poniamo di avere un CSS dedicato solo ai comandi generici:

* {margin: 0px; padding: 0px; border: 0px;} body {background: #000; color: #fff; font-family: sans-serif; font-size: 80%;} hr {width: 50%;} h1 0{color: #0f0; background: #000;} a {color: #00f; background: #000;}

e poi di averne un altro per l'header, ad esempio:

#header {height: 150px;} #header h1 {color: #ff0; background: #000;} #header img {border: 5px inset #404040;} #header a {color: #ff0; background: transparent;}

e infine uno per il corpo della pagina:

#corpo {padding: 10px;} #corpo img {border: 1px solid #fff;} #corpo a {color: #fa0; background: #000;}

Potrei agganciarli separatamente alla pagina web in questo modo:

<html> <head> <title>Reb's</title> <link href="generico.css" rel="stylesheet" type="text/css" media="all" /> <link href="header.css" rel="stylesheet" type="text/css" media="all" /> <link href="corpo.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> </body> </html>

oppure posso agganciarli direttamente tra di loro e caricare solo l'ultimo nell'head della pagina web; per farlo, scrivo il CSS generico, quindi in quello dell'header scrivo:

@import url("generico.css"); #header {height: 150px;} #header h1 {color: #ff0; background: #000;} #header img {border: 5px inset #404040;} #header a {color: #ff0; background: transparent;}

e nel CSS per il corpo potrei scrivere:

@import url("header.css"); #corpo {padding: 10px;} #corpo img {border: 1px solid #fff;} #corpo a {color: #fa0; background: #000;}

In questo modo importerei entrambi i CSS; allo stesso modo potrei decidere di importare tutti i CSS nell'ultimo, anziché agganciarli l'uno all'altro come mostrato sopra; in questo caso scriverei:

@import url("generico.css"); @import url("header.css"); #corpo {padding: 10px;} #corpo img {border: 1px solid #fff;} #corpo a {color: #fa0; background: #000;}

O addirittura crearne uno apposito solo con gli import e agganciare quello all'header:

@import url("generico.css"); @import url("header.css"); @import url("corpo.css");

che salverò come riepilogo.css e nella pagina web scriverò:

<html> <head> <title>Reb's</title> <link href="riepilogo.css" rel="stylesheet" type="text/css" media="all" /> </head>

Tutti questi metodi sono ugualmente validi; l'unica accortezza da avere è che in ogni caso vanno agganciati nel giusto ordine, perché il comando a seguire sovrascrive sempre quello che lo precede, perciò se scrivessi:

@import url("header.css"); @import url("corpo.css"); @import url("generico.css");

i comandi generici impostati ad esempio per il tag H1 o per il link andrebbero a sovrascrivere quelli specifici impostati per l'head o per il corpo e questo vale sia con il comando @import che con il link diretto dai CSS alla pagina web.

Il comando @import è utilizzato anche direttamente nella pagina, in questo modo:

<html> <head> <title>Reb's</title> <style type="text/css" media="all"> @import url("riepilogo.css"); </style> </head> <body> </body> </html>

A volte il comando @import è usato per nascondere la formattazione ad alcuni vecchi browser: si linka una formattazione minima "buona per tutti" (per esempio il problematico Netscape 4.7) e più sotto si importa un altro foglio di stile più elaborato che non viene letto da tali browser che non supportano @import e che va a sovrascrivere e integrare il foglio di stile spartano:

<html> <head> <title>Reb's</title> <link href="spartano.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> @import url("elaborato.css"); </style> </head> <body> </body> </html>

Lo stesso vale per diverse sintassi del comando che può essere scritto con o senza virgolette, parentesi, "url": un sistema rispetto all'altro "nasconde" il foglio di stile importato a uno o più browsers (a discapito però a volte della correttezza della sintassi e quindi della validazione del codice); rimane uno spunto da considerare nel caso si debba progettare un sito per un circuito dove già si sa che molto probabilmente ci saranno browser con problemi di visualizzazione (es. una grossa intranet con macchine obsolete o sistemi operativi molto diversi fra loro). Per chi fosse interessato, qui una tabella riepilogativa delle varie sintassi, dei browser a cui si nasconde il foglio di stile e dell'eventuale mancata validazione.

Torna a inizio pagina

Commenti

1 - Scritto da Marco GRAZIA il 19/02/2007 alle 15:34

A questo punto sarebbe interessante un articolo sui commenti condizionali per internet explorer, che ne pensi?

2 - Scritto da reb il 19/02/2007 alle 15:56

mh... sul fatto che ci starebbe hai ragione, pero'... come dire... mi irritano come principio :D

pero' prometto di tenerli in considerazione ;)

3 - Scritto da Marco GRAZIA il 19/02/2007 alle 18:54

Posso comprendere la tua irritazione, ma se l'offerta di questo sito si sta muovendo verso i tutorial, e visto che questi stanno diventando molto interessanti anche nei contenuti, devi prendere in considerazione il fatto che questi commenti condizionali sono importanti.

specialmente ora con l'uscita (forzata) di IE7 che ha modificato ulteriormente il modo di vedere di Internet Explorer rispetto agli standard che regolano il Web.

Va be, l'ho buttata giù pesante, però non è colpa mia se il Web è così :-D

4 - Scritto da reb il 19/02/2007 alle 19:29

si, hai ragione... diciamo allora che prima di quelli ci sono ancora un sacco di cose che desidero proporre (non ultimo un layout con posizionamento assoluto, che manca proprio!)

5 - Scritto da reb il 19/02/2007 alle 19:30

p.s. grazie per il supporto e per la graditissima sponsorizzazione :D

Aggiungi il tuo commento

I campi con * sono obbligatori.

Torna a inizio pagina

Torna a inizio pagina