В спецификации CSS Basic User Interface Module Level 4 появилось свойство interest-delay. Оно позволяет задать задержку "интереса"(внимания) для элемента. Сейчас свойство, а точнее группа свойств, нигде не работает, хоть caniuse говорит обратное, issue на исправление уже создано. Полноценную поддержку ждём годика через три, а пока
Что такое «внимание пользователя»?
Некоторые функции страниц активируются, когда пользователь начинает взаимодействовать с элементом - например, наводит на него курсор, касается на сенсорном экране или фокусируется с клавиатуры. В спецификациях это иногда называют «проявлением интереса», но проще думать об этом как о моменте, когда пользователь «обращает внимание» на элемент.
Очень важно, чтобы такие реакции не происходили мгновенно. Представьте: вы просто быстро проводите курсором над кнопкой, не собираясь на неё нажимать, - и тут всплывает большое меню, которое тут же исчезает. Это раздражает и сбивает с толку.
Точно так же, если пользователь уже начал взаимодействовать с элементом (например, классический пример, навёл курсор на ссылку, и появилось выпадающее меню), то при переходе курсора с самой ссылки на это меню интерфейс не должен мгновенно «забыть», что пользователь всё ещё работает с ним. Иначе меню закроется в самый неподходящий момент.
interest-delay позволяет задать минимальное время, в течение которого пользователь должен проявлять «интерес» к элементу (например, удерживать курсор над ним или находиться в зоне сенсорного касания), прежде чем будут запущены анимации, отображение подсказок, выпадающих меню или другие интерактивные эффекты. Это помог��ет избежать ложных срабатываний при случайных движениях курсора или при переходе между смежными элементами — например, от ссылки к её выпадающему меню.
Пример проблемы без interest-delay
Рассмотрим боковую навигацию без использования interest-delay. Попробуйте навести курсор на компьютере на первый пункт меню "Дизайн", а после выбрать пятый пункт подменю "Гайдлайны". Вы не сможете этого сделать, так как путь вашего курсора будет проходить через второй пункт меню "Разработка", а значит вы уже взаимодейсвуете с ним поэтому появится подменю разработки. По сути вам нужно пройти следующий путь:
Навести курсор на первый пункт меню "Дизайн";
Далее очень аккуратно переместить курсор вправо на первый пункт подменю "Цветовые схемы";
После перевести курсор ровно вниз на последний пункт подменю "Гайдлайны".
Правда ведь удобно? 😁
interest-delay позволяет решить эту проблему, так как вы сможете задать задержку для появления и исчезновения подменю.
.sidebar { interest-delay: 200ms 400ms; }
Сегодня такое поведение исправляется с помощью JavaScript или созданием safe-зон(очередные обёртки). Для конкретно этой задачи можно найти множество решений, но UI-элементов с подобным поведением в одном интерфейсе ещё больше. Вот чтобы не городить для каждого элемента с подобным поведением свой велосипед и придумали interest-delay.
Как управлять задержками?
Для управления этими задержками используйте свойства:
interest-delay-start— задаёт, сколько времени должно пройти после того, как пользователь начал проявлять интерес, прежде чем элемент «официально» получит этот интерес.interest-delay-end— задаёт, сколько времени должно пройти после того, как пользователь перестал проявлять интерес, прежде чем элемент «официально» потеряет его.
Также есть сокращённое свойство:
interest-delay— позволяет задать обе задержки сразу.
Возможные значения
Оба свойства (interest-delay-start и interest-delay-end) принимают следующие значения:
normal— браузер сам определяет задержку, исходя из платформенных соглашений.
⚠️ Важно: эти задержки никогда не равны нулю. Они могут отличаться друг от друга и даже зависеть от способа проявления интереса (например, наведение мыши и долгое нажатие могут иметь разные задержки).<time>— вы сами указываете длительность задержки в миллисекундах (ms) или секундах (s). Например:200ms,0.5s.
На данный момент я предполагаю, что значение normal будет дефолтным при выборе и достаточным для решения большинства кейсов. Точное значение в ms уже будет использовано по месту, когда дефолтное не подошло.
Как работает сокращённая запись?
Свойство interest-delay работает так же, как и другие сокращённые свойства в CSS:
Если указано одно значение, оно применяется и к началу, и к окончанию задержки:
interest-delay: 300ms; /* то же самое, что: interest-delay-start: 300ms; interest-delay-end: 300ms; */Если указано два значения, первое относится к началу, второе — к окончанию:
interest-delay: 200ms 500ms; /* то же самое, что: interest-delay-start: 200ms; interest-delay-end: 500ms; */
Дополнительные сведения
Спецификация уже определила несколько моментов:
Применяется ко всем элементам, а не только к интерактивным
<a>или<button>.Наследуется от родительских элементов.
Не поддерживает проценты.
Анимируется по вычисленному значению (computed value).
Что будет в будущем?
Возможно, синтаксис этих свойств расширят, чтобы можно было задавать разные задержки в зависимости от типа взаимодействия. Например, одна задержка для наведения курсора, другая — для долгого нажатия на сенсорном экране.
