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.