Русский
Русский
English
Статистика
Реклама

Свободно стилизируемы outline DOM элементов

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

Я пришел к своему решению, которое изложено в этой статье.

Большой gif

Работая над своим pet проектом мне нужно было сделать один и тот же стиль обводки (при наведении и фокусе) для элементов визуализаций и всех фокусируемых элементов DOM.


Моё решение

Вставляемdivповерх всего остального контента вdocument.body, и отключаем ему обработку событий черезpointer-events: none, растягиваем в размер документа,z-indexдолжен быть больше всех остальных на странице.

Добавляем еще 4-edivс абсолютными позициями в ранее добавленный родительский:

их стили (scss):

Добавляем подписку на события дляdocument:pointerenter,pointerleave,focus,blur:

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

В функциях слушателей фильтруем все события поtabIndex > -1уevent.target. При этом также проверяем что у ссылок естьhref, и кроме того что у элементов нет атрибутаdisabled. Когда происходитblurможет оказаться, что элемент оказался в контейнере, который тоже может иметь фокус (тут конечно можно задаться вопросом семантики, но такое бывает почему вbuttonнаходитсяa):

В методеshowполучаем размерыtargetс помощьюgetBoundingClientRect. А затем перемещаем, наши 4-ediv, каждый в свой угол:

Собственно, всё!

Описанный выше код вы можете найти здесь.

Заключение

Как вы можете заметить, элементы можно стилизовать как хотите, или даже вы можете использовать только один элемент, дав ему тот стиль который вам необходим. Все зависит от вашего воображения.

Кроме того,overflow: hiddenне влияет на нашoutline, но иногда нам нужно следить за формой элемента и размерами (к примеру ResizeObserver) , поэтому вы можете улучшить этот подход, все в ваших руках.

Спасибо за прочтение!

Если вам нужна дополнительная информация, дайте мне знать об этом DMartzub.online.

P.S.: английская версия моей статьи здесь

Источник: habr.com
К списку статей
Опубликовано: 13.01.2021 16:08:51
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Веб-дизайн

Css

Javascript

Html

Usability

Ui

Ux/ui

Ux

Accessibility

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru