Scrivo questo articolo anche come memo personale, difatti una delle cose più difficili da ricordare è l’ordine con cui dobbiamo definire gli stati dei collegamenti ipertestuali all’interno dei fogli di stile.
Anche se non è questo lo scopo del post, ricordo che un link si può trovare in quatto differenti stati (attivati al verificarsi di certe condizioni), possiamo gestirli attraverso le pseudo-classi le quali, infatti, non definiscono un elemento ma un particolare stato di quest’ultimo.
In rigoroso ordine alfabetico gli stati sono:
:active(definisce lo stile quando si clicca su un elemento ):hover(definisce lo stile quando si passa sopra un elemento ):link(definisce lo stile di un link prima che sia stato visitato):visited(definisce lo stile di un link dopo che è stato visitato)
Tuttavia non è questo l’ordine giusto con il quale li dobbiamo dichiarare sui CSS, altrimenti le cose non funzioneranno come ci si potrebbe aspettare.
Ogni selettore ha una sua specificità, nel caso sullo stesso elemento fossero applicati due o più selettori, vincerà quello con specificità maggiore, nel caso in cui i selettori avessero la stessa specificità allora a prevalere sarebbe l’ultimo dichiarato.
Detto questo, possiamo comprendere come le seguenti regole abbiano tutte la stessa specificità (0,0,1,1), e prevarranno l’una su l’altra un base all’ordine di dichiarazione:
a:active {color: red;}
a:hover {color: green;}
a:link {color: blue;}
a:visited {color: purple;}
Possiamo notare chiaramente che questo ordine non porterà a niente di buono. Difatti le pseudo-classi :active ed :hover non saranno mai applicate visto che un link sarà sempre nello stato di visitato o non visitato e queste due regole sono state dichiarate per ultime.
Le pseudo classi :link e :visited devono essere dichiarate per prime, l’ordine non ha molto importanza visto che un elemento non potrà trovarsi contemporaneamente in entrambi gli stati. Consideriamo quindi ora il seguente ordinamento:
a:link {color: blue;}
a:visited {color: purple;}
a:active {color: red;}
a:hover {color: green;}
Molto meglio, gli stati :active ed :hover sono stati dichiarati dopo, e quindi avranno una specificità superiore, tuttavia anche questo ordinamento creerà dei problemi in quando lo stato active non sarà mai matchato visto che sarà sempre sovrascritto dallo stato hover.
Quindi il giusto ordine dovrebbe essere il seguente:
:link:visited:hover:active
:focus
Nel caso si voglia gestire anche la pseudo-classe :focus, che corrisponderà al momento in cui un elemento acquista il fuoco, allora probabilmente il posto giusto di dichiarazione è tra le pseudo-classi :hover ed :active, il nostro ordinamento quindi diviene:
:link:visited:hover:focus:active
Concatenamento di pseudo-classi
Con i CSS2, è stata introdotta una nuova funzionalità, la concatenazione di pseudo-classi. Questo permette un’ulteriore possibilità di personalizzazione degli stili. Possiamo scrivere quindi anche qualcosa tipo:
a:link:hover {color: hotpink;} /* specificità 0,0,2,1 */
a:visited:hover {color: gold;} /* specificità 0,0,2,1 */
Conclusioni
Non esiste una regola scritta (almeno che io sappia) indicante l’esatto ordinamento. Tuttavia l’unico dubbio potrebbe riguardare il posizionamento di :focus. Sopratutto in base ai test fatti, lo stato focus non ha un comportamento uniforme su tutti i browsers, quando si naviga con la tastiera, lo stato hover non esiste, possiamo considerare lo stato focus il suo e equivalente quindi spesso si finisce per assegnarli gli stessi stili. Se utilizziamo il mouse per navigare, Firefox è il browser che secondo me gestisce meglio le cose, difatti sono attivati gli stili di :hover quando si passa il mouse sopra l’elemento, quelli di :active quando si clicca sul link e quelli di :focus dopo aver lasciato il pulsante del mouse. Se avessimo posizionato :hover dopo :focus allora dopo aver cliccato sono applicati gli stili di :hover mentre quelli di :focus soltanto dopo aver allontanato il mouse dall’elemento.