про аутлайн

Є така банальна проблема дефолтних Аутлайн: клацаєш на посилання або кнопку, з'являється аутлайн. Початківців розробників він дратує, і вони його радісно вбивають за допомогою якого-небудь *: focus. Прошаренние розробники знають, що аутлайн вбивати не можна, тому що він допомагає орієнтуватися при навігації з клавіатури і з допоміжних пристроїв.

Однак аутлайн від цього при використанні миші дратувати не перестає. І в цьому є вина розробників браузерів: якби дефолтні Аутлайн навколо посилань і кнопок з'являлися тільки при навігації з клавіатури, хлопців, що відключають Аутлайн, було б в рази менше, і доступність сайтів в середньому по інтернету була б вище.

Зараз браузери потихеньку виправляються і вводять спеціальний стан фокусу для мишачих кліків, у якого відключений дефолтний аутлайн. Виправляються, правда, не всі, а якщо захочеться кастомний стиль для клавіатурного фокусу, без милиць і Яваскрипт нічого не вийде.

Для чистоти експерименту елементи сидять в айфрейме

А тепер по браузерам - чи є аутлайн після кліка:

Стара Опера позбулася всіх «мишачих» Аутлайн раніше всіх, але померла, ИЕ підтягнувся в 10 версії, Фаерфокс теж майже молодець.

Крім відсутності дефолтних мишачих Аутлайн хотілося б ще мати різні псевдокласи для фокуса клавіатурного і мишачого. Поки цього всього немає, я зробив спеціальний милицю, який стежить за mousedown і вішає на сфокусований елемент клас, за допомогою якого можна по-різному стилізувати клавіатурний і мишачий фокуси:

Vanilla JS (не працюватиме в IE8, тому що addEventListener):

Легким рухом руки відключаємо ненависні Аутлайн, що не попсувавши доступності:

Милиця ставить клас через setTimeout () (інакше document.activeElement не встигає переключитися), тому в селектор доданий: active (який спрацьовує тільки з мишкою, до речі), щоб елемент не блимав в момент перемикання класу. Якщо у вас є більш елегантне рішення, поправте код на гітхабе або киньте ссилочку в твіттер.

Користуйтеся і не вбивайте Аутлайн повністю, будь ласка.