CSS interest-delay: умные задержки для лучшего UX
Сегодня в спеке CSS Basic User Interface Module Level 4 обнаружил новое CSS-свойство interest-delay и скупая мужская слеза потекла по щеке я тут же решил накидать статейку.
Помните проблему: наводишь курсор на пункт меню — появляется выпадающий список, но стоит чуть «промахнуться» при переходе к этому списку, как всё тут же исчезает?
Это происходит потому, что как только курсор покидает сам пункт навигации, состояние :hover пропадает — и меню закрывается, даже если вы всё ещё пытаетесь до него добраться.
Раньше для решения приходилось городить JavaScript, менять HTML-структуру или хитро подгонять отступы… В общем, подстраиваться под ограничения CSS. По этой теме писали огромные статьи и делали доклады.
Но теперь появилось новое CSS-свойство — interest-delay, которое решает проблему элегантно: оно даёт пользователю время «додумать» действие.
Мы буквально говорим браузеру:
Не торопись скрывать меню — подожди немного, вдруг человек просто ведёт курсор к выпадашке?
Свойства interest-delay-start и interest-delay-end позволяют задать задержку на включение и на выключение такого «состояния внимания». Например:
.nav-item {
interest-delay: 100ms 300ms;
}
Первое значение — сколько ждать, прежде чем показывать меню.
Второе — сколько ждать, прежде чем скрывать его после ухода курсора.
css
interest-delay