в Chromium браузерах
На такуу-у-у-ую интересную штуку наткнулся, причём для себя совершенно случайно.
Предыстория:
Делаю для жены простенький сайтик (прям своими руками и с большой любовью, что породит много контента).
Решил CSS слои
reset и base не притащить с последнего проекта, как это обычно бывает, а прям подумать и сформировать актуальные и современные, дабы выложить на npm и больше об этом не думать. Это важное уточнение, потому что в файлах с прошлых проектов обязательно есть правило
:focus-visible со стилизацией outline под проект, а здесь систему проектирую абсолютно с нуля и без копипасты, и такого стиля не было.➿➿➿
Теперь история:
На странице есть список со ссылками на соцсети, у ссылок есть тултип, появляющийся по наведении.
Оффтоп: а вы знали, что с предлогом "по" используется предложный падеж? Да, правильно сказать "по прилёте позвони" 💔
В процессе тестирования доступности заметил странное (на видео) — focus-ring захватывает абсолютно спозиционированных потомков элемента, причём в динамике. Моё лицо в тот момент, буквально — О_о
Начал разбираться и обнаружил, что такое поведение возникает тогда, когда используется
outline-style: auto в связке с браузером на основе Chromium.Это соответствует спецификации, которая буквально говорит, что в случае значения
auto браузер сам решает, как рендерить outline. Ну, например, вот так...outline не обязан быть прямоугольным, он и раньше умел разрываться (представьте ссылку, которая начинается на одной строке и заканчивается на другой) — но то, что он может разрываться на потомках, вырванных из потока, для меня стало неожиданностью
Исторические раскопки показали, что раньше (очень давно) подобное поведение наблюдалось в Firefox и на это жаловались. Вот, например, хороший комментарий с картинкой, иллюстрирующей, почему это весьма неожиданное поведение. Сейчас Firefox так не делает и нет способа заставить его это делать.
У вас наверняка есть резонный вопрос: и что мне делать с этой информацией?
А я не знаю, я обещал только делиться прикольными штуками :)
Ну а кроме шуток — проверьте, что на ваших
outline'ах не используется значение outline-style: auto, это может оказаться неожиданностью для вас и ваших пользователей :)Я вот такую базовую декларацию использую, по необходимости индивидуально адаптируя для элементов, которым это нужно:
// Это весьма заметная рамка
// и я нахожу её хорошим умолчанием
:where(:focus-visible) {
outline: 4px solid <color>;
outline-offset: 4px;
}