Alcuni visitatori hanno trovato molto carino l’ultimo aggiornamento che ho fatto al layout di questo sito. Ne avevo già parlato un mesetto fa, anticipando quali erano le mie intenzioni, anche se poi non le ho messe in pratica completamente1. Voglio allora spiegarti qui di seguito come ho implementato la funzione che consente di avere l’alto contrasto, al posto della grafica normale.
Se clicchi sulla linguetta “accessibile” in alto, sotto la barra del percorso, ti si apre un cassetto degli attrezzi con alcuni pulsanti, che puoi usare per personalizzare l’aspetto di queste pagine, in base alle tue esigenze visive: versione ad alto contrasto chiara, scura, allineata a sinistra o giustificata, con caratteri grandi o piccoli. Le prime due, in particolare, le ho realizzate seguendo un’ottima guida pubblicata su A List Apart, sito noto agli “esperti” del settore, punto di riferimento per i talebani del web, e non solo. Vediamo come si fa.
I fogli di stile (CSS o Style Sheets) possono essere associati ai documenti usando una lista di collegamenti nelle intestazioni della pagina web. Esistono tre differenti relazioni esterne che i fogli di stile possono avere con un documento: persistente, preferenziale, alternativa.
Persistente
Gli stili in questa categoria sono sempre attivi. Possono essere utilizzati per le “regole” condivise tra fogli di stile differenti. Bisogna ricordare infatti, che la parola cascading, ovvero “in cascata”, significa proprio questo: i vari fogli possono essere organizzati in maniera gerarchica, in modo tale che un figlio eredita le definizioni di un padre. Per rendere un foglio di stile persistente, l’attributo rel viene impostato a “stylesheet”, senza specificare alcun titolo:
link rel="stylesheet" type="text/css" href="miostile.css"
Preferenziale
Per attivare questa modalità, non è necessario fare nulla, in quanto il browser li “accende” automaticamente. A differenza di quelli persistenti, gli stili preferenziali possono essere disattivati, se l’utente seleziona un foglio alternativo. Per rendere un foglio preferenziale, l’attributo rel è impostato a “stylesheet”, dandogli anche un nome tramite l’attributo title. Stili diversi che si vogliono raggruppare insieme, avranno semplicemente lo stesso nome (valore dell’attributo title): se l’utente li disattiva, l’effetto vale per tutti gli appartenenti al gruppo. Se si dichiara più di un gruppo di preferenziali, il primo in ordine di apparizione ha la precedenza sugli altri.
link rel="stylesheet" type="text/css"
href="miostile.css" title="predefinito"
Alternativa
Come è facile intuire dal paragrafo precedente, in questa categoria vengono definiti gli stili che l’utente potrà usare come alternativi a quelli preferenziali, per personalizzare il modo in cui il sito viene visualizzato. Per rendere un foglio alternativo, l’attributo rel è impostato a “alternate stylesheet”, dandogli anche un nome tramite l’attributo title. Valgono inoltre le stesse regole di raggruppamento viste in precedenza. È bene osservare, infine, che tutto ciò si applica a stili definiti in file esterni, collegati con l’elemento link.Nella prossima puntata, vedremo come utilizzare i concetti che ho introdotto qui sopra: ancora non abbiamo visto esattamente come avviene lo “scambio” di stile a livello di interfaccia, ma adesso hai le basi per capire quello che verrà detto in seguito.
1 Avevo parlato, in un mio precedente intervento, della possibilità di rendere “mobili” i menu di sinistra, ma non ho reso disponibile questa funzione. Non tanto perché sono svogliato o non so come fare (anche se dovrei studiare bene tutti i passaggi), quanto per le limitazioni che avrei dovuto introdurre. La possibilità di trascinare i menu, posizionandoli a piacimento in un punto dell’area del sito, è una funzionalità non accessibile, e “rompe” alcuni vincoli sulla validità del codice.