2012-02-14 28 views
5

Come negli ultimi tempi, c'è stato qualche grandi articoli (e confusione) sopra la pratica di fare la seguente:CSS Outline migliori pratiche

a, input, textarea, button { 
    outline: none; 
} 

La maggior parte questi sembrano riferirsi a problemi di accessibilità.

Non è mia intenzione di rimuovere questa funzione del tutto (come il codice di cui sopra fa) ... Tuttavia, questa funzione grandi pasticci mio disegno originale, aggiungendo bordi indesiderate (ERM, delinea?) In aree sgraditi.

Il problema principale di questo è il fatto che questi contorni, essendo così erroneamente definiti, delineano l'area rettangolare attorno all'elemento, non il suo contorno (ad esempio, ignora il raggio di confine, ecc.).

Vediamo un esempio, dovremmo?

http://jsfiddle.net/x5Mex/

L'unica soluzione a questo è di avere il codice di cui sopra in esecuzione e impiegare il mio sistema. Come sempre abbiamo fatto con i browser Web ...

risposta

8

Infatti. Un contorno è intorno all'area rettangolare all'esterno del bordo. Non prende in considerazione gli angoli arrotondati.

Non c'è niente di sbagliato con la disattivazione del contorno, basta assicurarsi di aggiungere qualche altra funzione di accessibilità per le persone che utilizzano la tastiera, per esempio, cambiare il colore dello sfondo sul fuoco

Example

+0

Hmm avrebbe dovuto pensarci anch'io! Grazie. – Christian

+2

+1 - ma un avvertimento; assicurati che la tua sostituzione sia sufficientemente visibile. Sostituire un bordo grigio chiaro con un bordo leggermente più scuro sarà piuttosto difficile da distinguere per alcune persone. Mentre è possibile vedere il cambiamento del colore, una volta che il controllo ha messo a fuoco (in questo esempio) non "sembra focalizzato". Pertanto, è necessario tenere conto del design generale della pagina, in modo da fornire uno stile coerente di evidenziazione del focus sulla pagina/sito e che l'elemento attualmente focalizzato è visivamente evidente e si distingue sufficientemente dagli elementi non focalizzati. – BrendanMcK

+1

In effetti, era solo un esempio, ma sì, dovresti rendere evidente la modifica @ChristianSciberras. –

0

Come molti elementi del modulo, l'elemento pulsante ha diverse interpretazioni nei browser, e come sono necessari molte correzioni ...

http://fvsch.com/code/button-css/ da F. Verschelde dovrebbe lasciare si delineano i pulsanti attorno all'intero elemento e non attorno al suo contenuto.