[intensive] [HTML1] [HTML2] Добавить :focus-visible в критерии про глобальные стили

[firefoxic]

Ссылка HTML1 — CSS-02. Глобальный селектор. HTML2 — Д16. Нет глобальных стилей тегов.

Проблема

1. Студенты думают, что глобально прописывать фокус нельзя, потому что его нет в примерах к критериям. Но это ничего не ломает, а только улучшает.
2. К сожалению, всё ещё не рассказываем студентам про :focus-visible, и уж точно про грамотный фолбэк с него на :focus

Возможное решение Добавить такой пример с надписью «Правильно»/«Верно»:

:focus-visible {
	outline: 2px solid var(--contrast-color);
	outline-offset: 2px;
}

@supports not selector(:focus-visible) {
	:focus {
		outline: 2px solid var(--contrast-color);
		outline-offset: 2px;
	}
}

Значения не принципиальны, но такие как правило в большинстве случаев смотрятся адекватно. А селекторы не мешаются и точечно можно легко перебить их любым селектором с псевдоклассом (например для тёмных кнопок со светлым текстом на светлом же фоне вокруг кнопки — просто указывается нужный цвет аутлайна у кнопки).

Плюс этот сниппет будет студентам как образец хорошо работающего фолбэка на фокус.

---

TODO:

• [x] Сочинить обоснование правильности

[nikolai-shabalin]

Для чего может понадобиться глобальный фокус? Приведите пожалуйста пример

[firefoxic]

Для «нормализации». Если фокусы на каких-то интерактивных элементах в стайлгайде не проработаны (а скорее всего так и есть) и верстальщиком не застилизованы по подобию с другими элементами из стайлгайда (и это тоже скорее всего так), то будет дефолтная браузерная обводка. А в разных браузерах обводки фокуса разного дизайна (подходящая для страницы с браузерными стилями, но не со стилями из макета). И в каком-нибудь Девайсе тонкая чёрная точечная обводка Firefox в подвале почти не видна будет, или на голубом фоне какой-нибудь Седоны голубая обводка Safari тоже сольётся с фоном (хотя сейчас и в макете такое есть).

А нормализованная обводка для всего интерактивного по примерным стилями из стайлгайда даст более заметные и консистентные с остальным дизайном фокусы во всех браузерах. Ну а точечно легко это дело переопределяется. Например если общий стиль в Девайсе задать

:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

то для текстовых полей ввода достаточно переопределить лишь

.class-on-text-input:focus-visible {
	outline-offset: -2px;
}

Ну и самое главное — это даже не эта нормализация, а пример для студентов правильного сниппета фолбэка с :focus-visible на :focus. На работе точно будут требовать, чтобы от мыши не было обводки и давно уже пора про это всё рассказывать студентам.

[nikolai-shabalin]

Спасибо. Идея хорошая. Будем исследовать

[efiand]

https://efiand.github.io/sedona-modern https://efiand.github.io/device-modern Макеты нашей Академии, где фокус по стайлгайду практически единообразен, - идеальное место приложения для такой глобализации: позволяет сильно сократить CSS и время его написания.

По примеру Седоны: стоит outline-offset указывать явно даже нулевой, а то в Chrome будет не по макету для кнопок, кнопкоссылок и инпутов.

[firefoxic]

В первом сообщении отредактировал код в соответствии с обновлением на MDN.

[ghost]

Добавили статью про focus-visible.

Про глобальные стили на этом потоке добавлять не будем. Но рассмотрим этот вариант перед стартом следующего потока

[ghost]

Сергей, просьба на будущее — не переписывай сообщения. Лучше добавь отдельный комментарий. Это будет более прозрачно и удобнее для истории.

[firefoxic]

В этом варианте есть проблема:

Специфичность селекторов:

• 0.1.1
• 0.2.1
• 0.1.1

Отменяющий обводку второй селектор слишком тяжёлый. Уже были проблемы с этим вариантом и остальными состояниями. Поэтому стал искать другие способы (сначала второй, потом благодаря Шиме Видасу третий).

Можно это вылечить обернув :not() ещё и в :where():

button:focus:where(:not(:focus-visible)) {
	outline: none;
}

Многословненько, зато без проблем со специфичностью. С поддержкой тоже проблем не должно быть, у :where() поддерка чуть лучше, чем у :focus-visible.

[nikolai-shabalin]

Добавили :focus-visible в новый курс, который ещё не опубликовалы. На данный момент :focus-visible есть в эталонной реализации