: фокус-видимий - CSS-хитрощі

:focus-visibleПсевдо-клас (також відомий як «Focus-Indicated» псевдо-клас) є рідною CSS шляхом до елементів стилю , що:

Перебувають у фокусі
Потрібен видимий індикатор, щоб показати фокус (про це далі)

:focus-visibleвикористовується так само, як :focus: для привернення уваги до елемента, який в даний момент має фокус.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visibleє частиною робочого проекту CSS4 Selectors. До прийняття, Mozilla представила :-moz-focusringпсевдо-клас, щоб передати функціональність Firefox раніше формальних специфікацій.

Навіщо нам: фокус-видимий?

Не :focusробить цього вже? Так, але є проблеми. Найяскравішою ілюстрацією є кнопка, яка запускає деякий JavaScript. Уявіть собі карусель зображень із кнопками для перемикання між зображеннями. Скажімо, ви додали а tabindexдо кнопок, щоб їх можна було вибрати за допомогою клавіатури, але коли ви ходите тестувати карусель за допомогою миші, ви бачите такий контур навколо своєї чудової кнопки:

Не те, що ви хотіли б це зробити (для занепокоєння щодо доступності), але як ви можете від цього позбутися? Встановивши :focusпсевдо-клас:

.next-image-button:focus ( outline: none; )

Тепер ваша кнопка виглядає чудово, коли вона у фокусі, але що відбувається, коли користувач натискає вашу кнопку без миші, а замість клавіатури? Вони не можуть бачити, де вони вклали вкладки! Це проблема, оскільки зараз немає способу визначити, яка кнопка орієнтована на дії клавіатури:

Один із них сфокусований, але ви цього не бачите!

Чи є спосіб видалити синій контур фокусу, але все ж показати фокус, який більше відповідає дизайну сайту? Звичайно, ви можете взяти свій торт і з’їсти його теж, завдяки :focus-visible!

:focus-visibleзастосовується лише тоді, коли ви насправді хочете, щоб візуальний індикатор допомагав користувачеві бачити, де фокус. Іншими словами, він не може приховати контур так, як :focusможе. (Ну, це могло б, вписавши його в дизайн, але що завгодно.) У цьому сенсі ці два слід використовувати разом. Давайте додамо одну до нашої кнопки:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Тепер, коли клавіатура використовується для вкладки до кнопки, буде візуальна індикація фокусу:

Як браузери визначають, коли щось є: фокус-видимим?

Браузерам надається трохи свободи для визначення, коли цей псевдоселектор слід застосовувати до даного елементу, використовуючи власну евристику. Спочатку розглянемо робочий проект CSS4, а потім спробуємо його розбити. З технічних характеристик:

Якщо користувач висловив перевагу (наприклад, через системні налаштування або налаштування браузера) завжди бачити видимий індикатор фокусування, користувацький агент повинен виконати це, маючи: focus-visible завжди збігається на активному елементі, незалежно від будь-якого іншого фактори. (Іншим варіантом може бути використання агентом користувача власного показника фокусування незалежно від стилів автора.)

Будь-який елемент, який підтримує введення з клавіатури (наприклад, елемент введення або будь-який інший елемент, який може спровокувати показ віртуальної клавіатури у фокусі, якщо фізична клавіатура відсутня), повинен завжди відповідати: фокус-видимий при фокусуванні.

Якщо користувач взаємодіє зі сторінкою за допомогою клавіатури, сфокусований на даний момент елемент повинен відповідати: focus-visible (тобто використання клавіатури може змінити відповідність цього псевдокласу, навіть якщо це не впливає на: focus).

Якщо користувач взаємодіє зі сторінкою через вказівний пристрій, таким чином, що фокус переміщується до нового елемента, який не підтримує введення користувачем, новий елемент, що фокусується, не повинен відповідати: focus-visible.

Якщо активний елемент збігається: focus-visible, а сценарій змушує фокус переміщатися в інше місце, то нещодавно сфокусований елемент повинен збігатися: focus-visible.

І навпаки, якщо активний елемент не збігається: focus-visible, а сценарій змушує фокус переміщатися в інше місце, нещодавно сфокусований елемент не повинен збігатися: focus-visible.

Якщо це трохи абстрактно, ось інтерпретація:

Ситуація	Чи застосовується: фокус-видимий?
Користувач каже, що завжди хоче, щоб фокус був видимим через налаштування	Так
Для роботи елемента потрібна клавіатура (як текст)	Так
Користувач здійснює навігацію за допомогою клавіатури	Так
Користувач здійснює навігацію за допомогою вказівного пристрою (наприклад, миші або пальця на сенсорному екрані)	Ні
Сценарій змушує фокус переходити з `:focus-visible`елемента на інший елемент	Так
Сценарій змушує фокус переходити з неелемента `:focus-visible`на інший елемент	Ні

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

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.