Предварительный просмотр действий, активируемых интересом

Полезно показывать пользователям, что произойдет, если они выполнят то или иное действие. Interest Invokers – это экспериментальная функция веб-платформы, которая позволяет декларативно создавать связи между источником интереса (например, кнопкой или ссылкой) и его целью. После того как декларативная связь установлена, разработчик может использовать различные методы для реагирования на интерес и потерю интереса с помощью CSS и JavaScript. Для этого варианта использования мы можем использовать события interest и loseinterest, чтобы предварительно просматривать различные эффекты для таргетинга на интересы.

Рекомендации по внедрению

Отношение интереса создается путем установки атрибута interestfor на кнопке или ссылке (т.е. источнике интереса). Атрибут принимает ссылку на идентификатор другого элемента (т.е. целевого объекта). У источников интересов может быть только одна цель, но у цели может быть несколько источников.

<!-- MANDATORY: interest relationships must be established with the `interestfor` attribute on a button or a link -->
<button interestfor="interestingElement" data-effect="A">Some effect</button>
<button interestfor="interestingElement" data-effect="B">Some other effect</button>
<div id="interestingElement">Something interesting</div>

В рамках этого варианта использования мы можем задействовать события interest и loseinterest, чтобы посмотреть, как будут выглядеть разные эффекты для таргетинга на интересы. Оба этих события являются InterestEvent, у которых есть свойство source, являющееся источником интереса (т.е. элементом с атрибутом interestfor).

interestingElement.addEventListener("interest", event => {
  // Apply the preview based on `event.source`
  event.target.dataset.preview = event.source.dataset.effect;
});

interestingElement.addEventListener("loseinterest", event => {
  // Unapply the preview
  delete event.target.dataset.preview;
});

Активные источники и цели интереса можно выбрать с помощью CSS, используя псевдоселекторы :interest-source и :interest-target соответственно.

/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}

Задержку начала и окончания для вызывающего элемента (то есть элемента с атрибутом interestfor) можно задать с помощью свойств CSS interest-delay-start и interest-delay-end или сокращенного свойства interest-delay.

[interestfor] {
  interest-delay-start: 0.2s;
  interest-delay-end: 0.1s;
}

Резервные стратегии

Резервные варианты и поддержка Interest Invokers в браузерах

Вызывающие объекты интереса должны быть условно заполнены с помощью пакета полизаполнения interestfor из NPM. Рекомендуем использовать полифил в пакете, а не CDN.

ОБЯЗАТЕЛЬНО. Проверьте, поддерживается ли функция, посмотрев свойство interestForElement в HTMLButtonElement.prototype, и загрузите полифил, только если встроенная поддержка отсутствует.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

Ограничения полифила CSS

При использовании полифила CSS API немного меняется, чтобы компенсировать отсутствие поддержки нативных псевдоклассов и свойств:

• Псевдоклассы. Полифил не может определять настоящие псевдоклассы :interest-source и :interest-target, поэтому вместо них он применяет классы .interest-source и .interest-target. ОБЯЗАТЕЛЬНО: объедините их с :is(), чтобы поддерживать как нативные, так и полифильные состояния.

/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }

• Свойства CSS. Для interest-delay, interest-delay-start и interest-delay-end полифил требует использования переменных CSS, поскольку он не может считывать пользовательские свойства напрямую во всех браузерах.

/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}