CSS interest-delay: умные задержки для лучшего UX

04 октября 2025 г.

В спецификации CSS Basic User Interface Module Level 4 появилось свойство interest-delay. Оно позволяет задать задержку “интереса”(внимания) для элемента. Сейчас это работает только в 142 Хроме.

Что такое «внимание пользователя»?

Некоторые функции веб-страниц активируются, когда пользователь начинает взаимодействовать с элементом — например, наводит на него курсор, касается на сенсорном экране или фокусируется с клавиатуры. В спецификациях это иногда называют «проявлением интереса», но проще думать об этом как о моменте, когда пользователь «обращает внимание» на элемент.

Важно, чтобы такие реакции не происходили мгновенно. Представьте: вы просто быстро проводите курсором над кнопкой, не собираясь на неё нажимать, — и тут всплывает большое меню, которое тут же исчезает. Это раздражает и сбивает с толку.

Точно так же, если пользователь уже начал взаимодействовать с элементом (например, навёл курсор на ссылку, и появилось выпадающее меню), то при переходе курсора с самой ссылки на это меню интерфейс не должен мгновенно «забыть», что пользователь всё ещё работает с ним. Иначе меню закроется в самый неподходящий момент.

Пример проблемы без interest-delay

Рассмотрим боковую навигацию без использования interest-delay. Попробуйте навести курсор на компьютере на первый пункт меню “Дизайн”, а после выбрать пятый пункт подменю “Гайдлайны”. Вы не сможете этого сделать, так как путь вашего курсора проходить через второй пункт меню “Разработка”, а значит вы уже взаимодейсвуете с ним поэтому появится подменю разработки. По сути вам нужно пройти следующий путь:

Навести курсор на первый пункт меню “Дизайн”;
Далее очень аккуратно переместить курсор на первый пункт подменю “Цветовые схемы”;
После перевести курсор ровно вниз на последний пункт подменю “Гайдлайны”.

Правда ведь удобно? 😁

Пример

interest-delay позволяет решить эту проблему, так как вы сможете задать задержку для появления и исчезновения подменю.

.sidebar {
  interest-delay: 200ms 400ms;
}

Как управлять задержками?

Для управления этими задержками в CSS существуют специальные свойства:

interest-delay-start — задаёт, сколько времени должно пройти после того, как пользователь начал проявлять интерес, прежде чем элемент «официально» получит этот интерес.
interest-delay-end — задаёт, сколько времени должно пройти после того, как пользователь перестал проявлять интерес, прежде чем элемент «официально» потеряет его.

Также есть сокращённое свойство:

interest-delay — позволяет задать обе задержки сразу.

Возможные значения

Оба свойства (interest-delay-start и interest-delay-end) принимают следующие значения:

normal — браузер сам определяет задержку, исходя из платформенных соглашений. ⚠️ Важно: эти задержки никогда не равны нулю. Они могут отличаться друг от друга и даже зависеть от способа проявления интереса (например, наведение мыши и долгое нажатие могут иметь разные задержки).
<time> — вы сами указываете длительность задержки в миллисекундах (ms) или секундах (s). Например: 200ms, 0.5s.

Как работает сокращённая запись?

Свойство 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; */
```

Дополнительные сведения

Применяется ко всем элементам.
Наследуется от родительских элементов.
Не поддерживает проценты.
Анимируется по вычисленному значению (computed value).

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

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