*Linux Guide

Fare Web - CSS Alternativi

Attraverso l'uso dei CSS è possibile offrire ai propri visitatori delle skins alternative, per consentire la scelta dell'aspetto delle pagine del proprio sito web.
E' possibile farlo sfruttando i CSS e JavaScript, tuttavia il problema di JavaScript è che non sempre viene supportato e che gli utenti potrebbero liberamente disabilitarlo, rendendo vani tutti i nostri sforzi.
In questo breve articolo offro un sistema, peraltro molto conosciuto, per consentire la scelta delle skins, senza usare JavaScript con l'assoluta certezza che la scelta possa andare a buon fine.
Si tratta di inserire dei collegamenti ai vari fogli di stile; collegamenti che verranno inseriti nella parte che riguarda la testata del codice sorgente. E' una metodica molto semplice che unisce la semplicità alla robustezza.

Dopo avere costruito la struttura delle proprie pagine, è il momento di realizzare un Foglio di Stile adeguato a tali pagine; sarà quindi un Foglio di Stile di base, da usare come stile di partenza che tutti potranno vedere navigando sul web e che potremmo definire di "default". Per comodità di esposizione lo nomineremo "stilebase.css".
Da questo foglio di base, procederemo poi a costruire gli altri fogli che nomineremo a nostro piacimento, ma quello che è importante è che il foglio di base sia incluso nella testata con la formula illustrata nel box qui sotto.


<html>
<head>
<title>CSS alternativi per le nostre pagine</title>
<link rel="stylesheet" title="Default" href="stilebase.css" media="screen" />
</head>
<body>
Il contenuto della pagina
</body>
</html>

Naturalmente dovremo salvare il Foglio di Stile nella stessa directory delle pagine e osservare il comportamento delle stesse, sul browser preferito.
Se tutto è andato bene, le pagine hanno l'aspetto che volevamo

Dopo avere realizzato gli altri fogli di stile (che nomineremo a piacimento con alias che indichino il tema grafico più adeguato) ed averli registrati nella stessa directory delle pagine, dovremo implementarli in ogni singola pagina del nostro sito ed è una cosa veramente semplice.
Basterà inserire i links con la sintassi indicata nel box sottostante


<html>
<head>
<title>CSS alternativi per le nostre pagine</title>
<link rel="stylesheet" title="Default" href="stilebase.css" media="screen" />
<link rel="alternate stylesheet" title="Secondo" href="stiledue.css" media="screen" />
<link rel="alternate stylesheet" title="Terzo" href="stiletre.css" media="screen" />
<link rel="alternate stylesheet" title="Alta visibilità" href="stilehighvis.css" media="screen" />
<link rel="alternate stylesheet" title="Stampa" href="stilestampa.css" media="print" />
<link rel="alternate stylesheet" title="Aural" href="stileaural.css" media="aural" />
</head>
<body>
Il contenuto della pagina
</body>
</html>

Come avrete certo notato, i links ai Fogli di Stile evidenziati in rosso posseggono una sintassi diversa dal precedente, infatti il valore dell'attributo "rel" non è solamente "sylesheet", ma "alternate stylesheet" il che rappresenta proprio la differenza ed è il nocciolo di tutto quanto.
Avrete anche notato che gli alias e i nomi identificativi sono diversi per permettere all'utente di scegliere lo stile che più lo interessa e naturalmente gli alias devono essere più accattivanti!

Avrete certo notato anche la parte evidenziata in azzurro (sottolineata) che mostra un valore dell'attributo "title" settato su "Stampa" e che l'attributo "media" sia stato dotato del valore "print". Questo per favorire chi volesse stampare il documento racchiuso nella pagina e voglia evitare di stampare tutti gli elementi costituenti la pagina stessa. L'utente che cliccasse sul link "stampa" vedrebbe la pagina come sarebbe poi stampata.
L'altra stringa in evidenza è quella enfatizzata con il rosso che mostra come il valore dell'attributo "title" sia settato su "Aural" e che l'attributo "media" sia stato settato sul valore "aural", questo per favorire tutti gli utenti che utilizzano i lettori di schermo.

Una volta che sia stato creato l'elenco degli stili alternativi e che lo si sia implementato nelle pagine, questo non è visibile all'interno della pagina stessa!
E allora?
L'elenco degli stili è presente nella barra di navigazione del browser che è raggiungibile molto semplicemente.
Firefox è une browser che garantisce la visione degli stili alternativi in Linux (ma anche in Windows® e MacOS X®).
Basta cliccare sul menù "Visualizza/View" e scegliere la voce "Stile pagina" scegliendo dalla tendina, lo stile che più si gradisce.

I Vantaggi di questo sistema sono dati dal fatto che sono facili da implementare e che praticamente tutti i browser sono in grado di sfruttarne la malleabilità.
E' consigliabile sempre produrre ed inserire dei CSS per pagine ad elevata accessibilità.
Concludo con l'invito a far lavorare la fantasia e a produrre abiti nuovi per le vostre pagine web.

Linux Guide | Torna in alto