Salta la barra di navigazione


Cerchi qualcosa?
Nel web Nel sito

Powered by Google

 

Hack CSS

Come implementare la pseudo classe 'focus' applicata ai link anche su Internet Explorer

Questo articolo è stato riscritto ed integrato da: Selezionare i link di un documento navigato con la tastiera.

L'usanza diffusa di differenziare un link al passaggio del mouse spesso rende un sito più gradevole e usabile. Per fare questo si usano i CSS e la pseudo classe 'hover' applicata all'elemento 'Ancor'.

a:hover{
   backgorund: ...
   border-bottom: ...
   ecc...
}

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.

Ottenere la differenziazione dei link anche per chi naviga con una tastiera da un valore aggiunto ai nostri siti web e ci costa davvero poca fatica.

La soluzione sarebbe utilizzare la pseudo classe 'focus'.

a:focus{
   backgorund: ...
   border-bottom: ...
   ecc...
}

Che però non è supportata da Internet Explorer. Per ottenere lo stesso effetto anche su IE spolvereremo (almeno io) la pseudo classe 'active' che, prima di questo tutorial, ho sempre considerato poco utile se non si utilizzano frameset.

a:active{
   backgorund: ...
   border-bottom: ...
   ecc...
}

Quindi, ricapitolando, il codice per ottenere la differenziazione dei link su tutti i browser, sia che si utilizzi il mouse, sia che si utilizzi la tastiera è:

a:active, a:focus, a:hover{
   backgorund: ...
   border-bottom: ...
   ecc...
}