Collegare i CSS alle pagine HTML - seconda parte

Collegare i CSS alle pagine HTML
Collegare i CSS alle pagine HTML

I fogli di stile alternativi, persistenti e preferenziali sono un utile meccanismo per fornire più fogli di stile ad un unico documento. Il loro supporto non è molto diffuso.

Per prima cosa è da stabilire quale sintassi definisce questi fogli di stile: essi sono tutti esterni, collegati attraverso l' elemento <link>. Ecco un piccolo schema:

Foglio di stile
Alternativo
Valore attrib. rel elemento <link>
alternate stylesheet
Attributo title elemento <link>
deve essere incluso
Foglio di stile
Persistente
Valore attrib. rel elemento <link>
stylesheet
Attributo title elemento <link>
deve essere incluso
Foglio di stile
Preferenziale
Valore attrib. rel elemento <link>
stylesheet
Attributo title elemento <link>
non deve essere incluso

In un browser in cui sono supportati i fogli di stile alternativi, viene offerta all' utente una scelta tra diversi fogli di stile disponibili, per visualizzare la pagina. I fogli di stile alternativi devono avere un attributo title descritto nell' elemento <link>; quel titolo verrà usato dal browser quando verrà data la possibilità all' utente di scegliere il foglio di stile.

Il foglio di stile preferenziale è il foglio di stile di default (predefinito) e viene usato quando la pagina viene caricata per la prima volta nel browser. Ci dovrebbe essere solo un foglio di stile preferenziale in ogni documento: se è presente più di uno, il browser userà il primo e potrà usare gli altri come fogli di stile alternativi.

I fogli di stile persistenti vengono usati insieme ad ogni altro foglio di stile preferenziale o alternativo per rappresentare la pagina. Nell' esempio di codice più sotto riportato il file stile1.css è un foglio di stile persistente; esso contiene le definizioni di stile che si devono usare ovunque. Il file stile2.css è il foglio di stile preferenziale, dato che il valore dell' attributo rel è "stylesheet" come quello di stile1.css, ma ha l' attributo title impostato a "default". I files media.css e large.css sono fogli di stile alternativi, come indicato dall' attributo rel. I titoli "medium type" e "large type" servono come indizio di quando andrebbero utilizzati, se correttamente supportati: per esempio fornire fogli di stile alternativi per persone con problemi di vista.

  <head>
  <link rel="stylesheet" href="/stile1.css" type="text/css" />
  <link rel="stylesheet" href="/stile2.css" type="text/css title="default" />
  <link rel="alternate stylesheet" href="/media.css" type="text/css" title="medium type" />
  <link rel="alternate stylesheet" href="/large.css" type="text/css" title="large type" />
  </head>
  

Il foglio di stile stile1.css potrebbe contenere regole che specificano colore e layout. Il foglio di stile preferenziale stile2.css potrebbe contenere regole che stabiliscono la dimensione del font per un utente normodotato; i files media.css e large.css potrebbero contenere regole per dimensioni maggiori del carattere, permettendo all' utente di scegliere la dimensione del carattere in base alle proprie esigenze.