Line Height

Luca (aka deMo) mi segnala questo approfondimento sulla specificità CSS(Cascading Style Sheets) dei links di Eric Meyer.

Il documento è vecchio (l'ultima modifica risale al 5 Febbraio 2005), ma l'argomento è interessante: come al solito non si smette mai di imparare. La frequente domanda a cui Eric risponde in questo piccolo articolo è: Ho provato ad applicare i CSS ai miei links, ma l'hovering non funziona. Come è possibile? E' colpa di questi stupidi browsers? E' in questo frangente che viene introdotta la specificità dei selettori, ed in particolare delle pseudo-classi applicate all'elemento <a>.

Il problema di fondo sta tutto nell'ordine in cui vengono specificati gli stati per un link. Io personalmente ho sempre raggruppato a:link, a:visited, a:active insieme, per poi eventualmente ridichiararne uno dopo aver definito gli stili di a:hover. Il signor Meyer invece ci illustra il metodo LVHA, ovvero Link Visited Hover Active: se scritti in questo ordine, gli stati di ogni link non si sovrascrivono, come al contrario potrebbe succedere in altri casi.

Ma allora, perchè bisogna seguire questo schema? They all have equal weight. Hanno tutti lo stesso peso.

 a:link {color: blue;}        /* specificità = 1,1 */
 a:visited {color: purple;}   /* specificità = 1,1 */
 a:hover {color: magenta;}    /* specificità = 1,1 */
 a:active {color: red;}       /* specificità = 1,1 */

E' poi interessante il metodo proposto da Eric (e valido con i CSS 2) per scavalcare il problema di specificità, senza intaccare le altre pseudo-classi e/o creare conflitti di alcun tipo. La soluzione consiste nel combinare insieme più stati:

 a:visited:hover {color: maroon;} /* specificità = 2,1 */
 a:link:hover {color: magenta;}   /* specificità = 2,1 */
 a:hover:active {color: cyan;}    /* specificità = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. In sostanza, quindi, la specificità rimane la stessa, ma cambia l'ordine e si rompe lo schema: la selezione diventa più specifica, offrendo tra l'altro una maggiore personalizzazione (possiamo infatti creare effetti di hovering diversi in base alla natura del link).