В спецификации 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 или созданием save-зон(очередные обёртки). Для конкретно этой задачи можно найти множество решений, но 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).

Что будет в будущем?

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