In questo articolo esploreremo le possibilità offerte dai CSS nella definizione dell'aspetto dei link. Trattandosi del fondamentale strumento di navigazione e interattività in un medium ipertestuale come il web, la questione non è solo stilistica o estetica, ma coinvolge direttamente i livelli di usabilità generale del sito. Dopo una panoramica sulle regole essenziali per la definizione stilistica dei link in un CSS, affronteremo gli aspetti relativi all'usabilità con una serie di semplici suggerimenti sul colore e gli attributi del testo.
In che modo i browser rendono l'aspetto dei link
Uno degli usi più comuni dei CSS è quello che consente di definire l'aspetto e il comportamento dei link presenti nella pagina. Ciò consente di superare, quando necessario, le limitazioni poste dai browser.
I principali browser rappresentano i link seguendo uno standard consolidato. Se in fase di creazione del documento non si settano colori specifici, un link non visitato è blu, uno visitato è invece viola. Netscape ed Explorer consentono, dai rispettivi menu Preferenze, di modificare queste opzioni. Netscape si limita alla modifica del colore e alla scelta se mostrare i link con o senza sottolineatura. Explorer aggiunge alla selezione del colore la possibilità di stabilire quando sottolineare i link. Le opzioni possibili sono tre: mai, al passaggio del mouse, sempre.
Prima della diffusione dei CSS era possibile assegnare colori specifici per i link a livello del tag <body> tramite gli attributi link, vlink, alink, rispettivamente per indicare un collegamento non visitato, uno visitato e uno attivo. Il codice, applicando questi attributi si presenta così:
<body link="#0000FF" vlink="#FF00FF" alink="#FF0000">
Questi attributi sono però considerati svalutati nelle specifiche HTML 4.01 rilasciate dal W3C. La tendenza, infatti, è quella di tenere separato il contenuto dagli elementi di formattazione, inglobando questi ultimi nei fogli di stile.
Perchè modificare l'aspetto dei link
Come accennato, definire l'aspetto dei link non è un'operazione solo estetica. Se si usano colori o immagini particolari per lo sfondo della pagina o di una tabella modificare i colori predefiniti risulta l'unico modo per visualizzare correttamente questi fondamentali elementi.
Grazie ai CSS è possibile assegnare colori, decorazioni del testo, font o colori di sfondo diversi a seconda dello stato del link.
Nel linguaggio dei CSS le configurazioni possibili dei link sono quattro e rientrano in una speciale categoria, quella delle pseudoclassi. Esse definiscono uno stile per un elemento al verificarsi di certe condizioni. La sintassi è la seguente - elemento:condizione.
Nelle specifiche dei CSS si distinguono quattro possibili condizioni per i link:
- a:link - Definisce un link non ancora visitato.
- a:visited - Definisce un link visitato, ovvero presente nella memoria del browser.
- a:hover - Definisce lo stato del link quando l'utente sposta il cursore su di esso.
- a:active - Definisce lo stato del link mentre il tasto del mouse premuto e non rilasciato.
Il modo con cui abbiamo presentato le quattro pseudoclassi non è casuale. Quando si definiscono, per ragioni di compatibilità, è importante mantenere l'ordine visto sopra. Quindi ricordate: link - visited - hover - active.
Limitazioni
Le pseudoclassi hover e active non sono supportate da Netscape 4. La loro definizione in un foglio di stile non comporta comunque problemi, in quanto Netscape 4 si limita a ignorare le specifiche.
Come si fa
Per realizzare un CSS esistono ottimi programmi dedicati come StyleMaster Pro e TopStyle 2. Gli editor web di fascia alta hanno tutti opzioni e funzionalità in grado di assistere l'utente nella realizzazione di fogli di stile. Ma visto che i CSS non sono che semplici file di testo, per il nostro esempio basterà il Blocco Note di Windows.
Apriamo dunque il Blocco Note e inseriamo questo codice:
A:LINK {
color : Blue;
text-decoration: none
}
A:VISITED {
color : Purple;
text-decoration: none
}
A:HOVER {
color : Red;
text-decoration : underline;
}
A:ACTIVE {
color : Red;
text-decoration: underline
}
Quindi salviamo il file, nominandolo stile.css
Per incorporarlo nella pagina, trattandosi di un CSS esterno useremo questo codice:
<link rel="stylesheet" type="text/css" href="stile.css">
Il codice va inserito all'interno della sezione <head> della pagina.
Commentiamo il codice. I link non visitati della nostra pagina (A:LINK) saranno blu e senza sottolineatura. Quelli visitati (A:VISITED) viola e anch'essi senza alcuna particolare decorazione del testo. Passando con il mouse sopra il link (A:HOVER) e tenendolo premuto (A:ACTIVE) esso apparirà rosso e sottolineato.
Più tecnicamente. Di ogni selettore (nel nostro caso le quattro pseudoclassi) abbiamo definito nel blocco di dichiarazione tra le due parentesi graffe due proprietà: color e text-decoration. A ciascuna proprietà possiamo assegnare il valore che più riteniamo opportuno. Ricordiamo che i colori si possono esprimere anche con codice esadecimale e che le possibili decorazioni del testo possono essere:
- none: nessuna decorazione
- underline: sottolineatura
- overline: disegna una linea sopra al testo
- line-through: traccia una linea che taglia il testo
- blink: testo che lampeggia
Per una trattazione più approfondita dell'argomento rimandiamo alla guida ai CSS di HTML.it .
Quali opzioni impostare: trucchi e consigli
Nell'esempio visto abbiamo limitato la scelta nell'impostazione dei link a due aspetti: il colore e la decorazione del testo. Al momento di impostare gli stili possiamo ovviamente definire numerose altre opzioni. Ma se non si hanno particolari esigenze questa dovrebbe essere la soluzione da adottare in tutti i casi. L'unica eccezione si potrebbe fare evidenziando il testo in grassetto:
A:LINK {
color : Blue;
text-decoration : none;
font-weight : bold;
}
Definire il font e la sua dimensione per il link è invece un'operazione che può essere o inutile o esteticamente non valida. Vediamo perché.
Il font e i suoi attributi vengono in genere definiti a livello di elementi come body, paragrafo (<p>) o tabelle. Se definisco per questi elementi un font Verdana e per il link un Arial il risultato non sarà certo esaltante! D'altra parte, definire per il link gli stessi attributi di testo, per esempio, impostati per <body> sarebbe del tutto inutile, in quanto i collegamenti ereditano automaticamente le impostazioni generali del testo. Eppure non mancano siti in cui al passaggio del mouse il testo del link raddoppia di misura, cambia colore, si sposta, se potesse parlerebbe pure.
Anche le opzioni per la decorazione del testo, come visto, sono numerose, ma al fine di definire l'aspetto dei link solo due vanno prese in considerazione: underline e none. Avete mai visto un link lampeggiante? Applicate la decorazione blink per vedere che effetto fa. Potrete fare le prove per il vostro prossimo albero di Natale, ma stilisticamente è praticamente assurdo.
Un effetto visibile in diversi siti web, e non disturbante, è invece quello del link che cambia colore di sfondo al passaggio del mouse. Per ottenerlo basta questo codice:
A:HOVER {
color : Red;
text-decoration : underline;
background-color : Gray;
}
Ma i link vanno sottolineati?
In molti manuali e linee guida di web design, specie in quelli improntati all'idea di usabilità, si consiglia di sottolineare sempre i link (dovremmo in pratica sempre definire per la proprietà text-decoration il valore underline). La scelta è a vostra discrezione. La sottolineatura è universalmente riconosciuta come segno che indica un link, ma se pensate che il colore basti ad evidenziare la parola, potete farne a meno. Due sono le cose da non fare in ogni caso:
- non evidenziare in alcun modo il link rispetto al testo circostante (cosa purtroppo visibile anche su siti "importanti"). Non si può pretendere che l'utente vaghi con il mouse all'interno della pagina aspettando che compaia la fatidica manina.
- usare la sottolineatura all'interno di porzioni di testo per evidenziare parole e concetti in quanto l'utente può legittimamente pensare che si tratti di un link, anche se il colore non lo indica.
Personalmente seguo questa via. Sottolineo i link contenuti all'interno di porzioni di testo e non sottolineo quelli, ad esempio, che si trovano in una barra di navigazione o in menu. In questo caso, infatti, sono la funzione o la posizione dell'oggetto barra o del menu che suggerisce di per sé la funzione delle parole. Questo, che è solo un approccio personale, sfrutta un'altra potenzialità dei CSS: quella di poter definire vari stili per i link all'interno della stessa pagina. Sarà l'argomento di un prossimo articolo.
Quale colore scegliere?
Per il guru dell'usabilità, Jacob Nielsen, non esistono alternative: i link devono essere sempre blu. Il che comporta, ovviamente, sfondi sempre bianchi o giallo paglierino o qualcosa del genere.....La regola di Nielsen sembra essere francamente eccessiva. Non disponiamo di dati al riguardo, ma non crediamo che i visitatori del sito di Adobe, per citare solo un caso, siano disorientati di fronte ai link rossi e non comprendano che cliccando su quelle parole si viene diretti ad un'altra pagina.
È importante invece distinguere i link visitati con un colore diverso, possibilmente meno appariscente rispetto a quello dei collegamenti non visitati, che devono essere sempre i più in evidenza.
