[Веб-дизайн, CSS, JavaScript, HTML, Usability] Свободно стилизируемы outline DOM элементов

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
13-Янв-2021 18:30

Цитировать

В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытие outline для элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум :focus-visible.Основная проблема outline - это их стилизирование.Я пришел к своему решению, которое изложено в этой статье.Большой gif

Работая над своим pet проектом мне нужно было сделать один и тот же стиль обводки (при наведении и фокусе) для элементов визуализаций и всех фокусируемых элементов DOM.Моё решениеВставляем div поверх всего остального контента в document.body , и отключаем ему обработку событий через pointer-events: none, растягиваем в размер документа, z-index должен быть больше всех остальных на странице.Извините, данный ресурс не поддреживается. :( Добавляем еще 4-e div с абсолютными позициями в ранее добавленный родительский:Извините, данный ресурс не поддреживается. :( их стили (scss):Извините, данный ресурс не поддреживается. :( Добавляем подписку на события для document: pointerenter, pointerleave , focus , blur:Извините, данный ресурс не поддреживается. :(

Не забудьте отписаться если вы делаете какое то React приложение, и вюшка может быть отмонтирована.

В функциях слушателей фильтруем все события по tabIndex > -1 у event.target. При этом также проверяем что у ссылок есть href, и кроме того что у элементов нет атрибута disabled. Когда происходит blur может оказаться, что элемент оказался в контейнере, который тоже может иметь фокус (тут конечно можно задаться вопросом семантики, но такое бывает… почему в button находится a ):Извините, данный ресурс не поддреживается. :( В методе show получаем размеры target с помощью getBoundingClientRect. А затем перемещаем, наши 4-e div, каждый в свой угол:Извините, данный ресурс не поддреживается. :( Собственно, всё!Описанный выше код вы можете найти здесь.ЗаключениеКак вы можете заметить, элементы можно стилизовать как хотите, или даже вы можете использовать только один элемент, дав ему тот стиль который вам необходим. Все зависит от вашего воображения.Кроме того, overflow: hidden не влияет на наш outline, но иногда нам нужно следить за формой элемента и размерами (к примеру ResizeObserver) , поэтому вы можете улучшить этот подход, все в ваших руках.Спасибо за прочтение!Если вам нужна дополнительная информация, дайте мне знать об этом DM artzub.online.P.S.: английская версия моей статьи здесь
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_vebdizajn (Веб-дизайн), #_css, #_javascript, #_html, #_usability, #_javascript, #_ui, #_ux/ui, #_ux, #_accessibility, #_html, #_css, #_vebdizajn (
Веб-дизайн
), #_css, #_javascript, #_html, #_usability

Профиль ЛС

Ответить на тему

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

Текущее время: 23-Ноя 00:11
Часовой пояс: UTC + 5