stili di colore collegamento css best practice

Question

Esistono molti esempi di CSS per lo styling del colore dei collegamenti.

html5boilerplate.com offre tale codice CSS per il link:

a { color: #00e; } 
a:visited { color: #551a8b; } 
a:hover { color: #06e; }​ 

E 'abbastanza buono per la maggior parte dei casi?

O forse esiste un codice css migliore per lo styling del colore dei collegamenti?

Answer 1

Questo è sicuramente sarà sufficiente in stragrande maggioranza dei casi.

Basta tenere a mente che il corretto ordine di stili per i collegamenti è:

a:link { color: #c00 } /* unvisited links */ 
a:visited { color: #0c0 } /* visited links */ 
a:hover { color: #00c } /* user hovers  */ 
a:active { color: #ccc } /* active links */ 

Il outline potrebbe apparire "brutto" per voi, ma questa è una caratteristica di accessibilità molto importante. Se lo rimuovi, ti preghiamo di fornire un modo alternativo per distinguere correttamente l'elemento corrente (carattere più grande/più intenso, sfondo ad alto contrasto, ecc.)

Answer 2

Se si desidera essere sicuri di utilizzare i collegamenti di stile (e non gli ancoraggi che non sono collegamenti), è necessario utilizzare a:link anziché a.

E si potrebbe aggiungere a:active alla fine. Qui hai un tutorial.

Answer 3

ho trovato la sua sempre bene aggiungere

un {outline: none; }

poiché alcuni browser aggiungono contorni fastidiosi ai collegamenti quando si fa clic

Answer 4

Ripristino sempre le impostazioni che potrebbero essere diverse tra i browser.

Mi piace anche contrassegnare i collegamenti a siti Web esterni in modo diverso, aggiungendo un'immagine (simile a quella di wikipedia).

a, 
a:link, 
a:active, 
a:visited, 
a:hover { 
    color:   #d30; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

/* Links to external websites */ 
a.external:before { 
    content:   url(./pics/external.png); 
} 

Answer 5

Non rimuovere mai il contorno, o almeno rimuoverlo solo per a: attivo. Se lo fai per tutti gli ancoraggi, verrà rimosso anche per: focus che viene utilizzato per la navigazione da tastiera. Anche affidarsi troppo al passaggio del mouse è molto brutto, poiché il passaggio del mouse non è presente sui touch screen.

Mi piace avere tutti i collegamenti facilmente distinguibili dal resto del contenuto.Questa è la mia preferenza personale:

2016 versione

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */ 

a { border-bottom: thin solid; 
    color: rgb(0,0,192); 
    font-weight: bolder; 
    text-decoration: none; 
} 
a:visited { color: rgb(160,0,160); } 
a:active { color: rgb(192,0,0); } 
a:active, a:focus, a:hover { border-bottom-width: medium; } 

2015 Versione

a { border-bottom: thin solid; 
    color: rgb(0,0,192); 
    font-weight: 700; 
    text-decoration: none; 
} 
a:visited { color: rgb(128,0,128); } 
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */ 
a:active, a:focus, a:hover { border-bottom-width: medium; } 

a { border-bottom: 1px solid; 
    color: rgb(0,0,166); 
    font-weight: 700; 
    text-decoration: none; 
} 
a:visited { color: rgb(122,0,122); } 
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */ 
a:active, a:focus, a:hover { border-bottom: 3px solid; } 

2013 versione

a { color: rgb(0,0,166); 
    font-weight: 700; 
    border-bottom: 1px dotted; 
    text-decoration: none; 
} 
a:visited { color: rgb(122,0,122); } 
a:hover, a:focus, a:active { border-bottom: 2px solid; } 
a:focus, a:active { color: rgb(166,0,0); }