CSS Outline najlepsze praktyki

Question

jak późno nastąpiła kilka świetnych artykułów (i zamieszanie) ponad praktyce wykonując następujące czynności:

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

Najczęściej te wydają się odnosić do kwestii związanych z dostępnością.

Nie jest moim zamiarem całkowite usunięcie tej funkcji (tak jak powyższy kod) ... Jednak ta funkcja świetnie nadaje się do mojego oryginalnego projektu, dodając niezamierzone granice (erm, kontury?) W niepożądanych obszarach.

Głównym problemem jest to, że kontury te, będąc błędnie nazwane takimi, jakie są, w rzeczywistości przedstawiają prostokątny obszar wokół elementu, a nie jego kontur (np. Ignoruje promień obramowania itp.).

Zobaczmy przykład powinniśmy?

http://jsfiddle.net/x5Mex/

Jedynym rozwiązaniem tego problemu jest mieć powyższy kod działa i zatrudnia mój własny system. Tak jak zawsze robiliśmy z przeglądarkami ...

Answer 1

Rzeczywiście. Obramowanie znajduje się wokół prostokątnego obszaru na zewnętrznej granicy. Nie uwzględnia zaokrąglonych narożników.

Nie ma nic złego w wyłączając kontur, po prostu upewnij się dodać kilka innych funkcji ułatwień dostępu dla osób korzystających z klawiatury, na przykład zmienić kolor tła obrazu na ostrość

Example

Answer 2

As wiele elementów formularza, element przycisku ma różne interpretacje w przeglądarkach, a tylu poprawek potrzeba ...

http://fvsch.com/code/button-css/ z F. Verschelde powinien pozwolić zarysujesz przyciski wokół całego elementu, a nie wokół jego zawartości.