CSS

• PAGINA PRINCIPALE [P]

LA FORMATTAZIONE DEI LINK

-I link sono quanto di più irritante si possa trovare nel trattamento tipografico sul Web, soprattutto perché (tra le altre cose) cambiano il loro aspetto dinamicamente, cosa di cui la tipografia tradizionale non si era mai dovuta preoccupare. Tim Berners-Lee pensò che i link dovessero essere sottolineati; non fu una cattiva idea: la sottolineatura è rara in tipografia, e quindi non c'era rischio di possibili associazioni logiche. Decise anche che dovessero essere blu il che, ma se ne può discutere, non è stato forse altrettanto saggio. Questo è uno dei rari casi in cui l'uso di due variabili (il colore e la sottolineatura) per differenziare un elemento funziona veramente: una variabile (il colore) vi dice che l'elemento è diverso dal testo circostante e vi da informazioni di stato (visitato, non visitato); l'altra variabile indica che si tratta di un elemento dinamico.
Dal momento che per default il colore di un link cambia in funzione del suo stato, mentre la sottolineatura non cambia, è quest'ultima che ha assunto il significato quasi universale di link. Per questa ragione, di norma, conviene evitare l'uso della sottolineatura per cose diverse dai link.- (CSS hoepli)

PERCHÉ MODIFICARE L'ASPETTO DEI LINK?

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 cinque e rientrano in una speciale categoria, quella delle pseudoclassi. Esse definiscono uno stile per un elemento al verificarsi di certe condizioni. La sintassi è: "elemento:condizione". Nelle specifiche dei CSS sì distinguono cinque possibili condizioni per i link:

• 1) a:link - Definisce un link non ancora visitato.
• 2) a:visited - Definisce un link visitato, ovvero presente nella memoria del browser.
• 3) a:hover - Definisce lo stato del link quando l'utente sposta il cursore su di esso (compare la manina).

Tuttavia, seppur una minoranza, non tutti gli utenti utilizzano il mouse per selezionare i link, ma utilizzano invece il tab della tastiera  e dato che la classe 'hover' è legata allo stumento con cui si interagisce (il mouse), con una navigazione da tastiera i link non vengono differenziati come avverrebbe con il mouse.

La soluzione sarebbe utilizzare la pseudo classe 'focus'. Che però non è supportata da Internet Explorer.

Per ottenere lo stesso effetto anche su IE si usa la pseudo classe 'active'.

• 4) a:focus - E’ importante questa condizione perché è abbinata al link puntato tramite la tastiera con il tasto tab (tabindex) ol’accesskey.
• 5 a:active - Definisce lo stato del link mentre il tasto del mouse è premuto e non rilasciato – o puntato da “focus” -

Inseriamo il seguenta codice html nel menu verticale:

Questo sarà il risultato:

[D]

Per modificare i colori nelle condizioni definiamo le pseudoclassi nei nel nostro foglio stile:

Questo sarà il risultato:

[D]