兴趣触发的操作预览

Web 功能： 兴趣调用器

在用户提交操作之前，向其提供操作预览会很有帮助。兴趣调用器是一项实验性 Web 平台功能，提供了一种基于声明的方式，用于在兴趣来源（即按钮或链接）与兴趣目标之间创建兴趣关系。建立声明式关系后，开发者可以使用 CSS 和 JavaScript，通过多种方法来响应兴趣和兴趣丧失。对于此应用场景，我们可以利用 interest 和 loseinterest 事件来预览兴趣定位目标的各种效果。

如何实现

通过在按钮或链接（即兴趣来源）上设置 interestfor 属性，可以创建兴趣关系。该属性接受对另一个元素（即兴趣目标）的 ID 引用。兴趣调用方或来源只能有一个兴趣目标，但一个兴趣目标可以有多个兴趣调用方。

<!-- 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 属性的元素）的开始和结束延迟时间可以使用 interest-delay-start 和 interest-delay-end CSS 属性或简写 interest-delay 属性进行设置。

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

后备策略

兴趣调用器的回退和浏览器支持

必须使用 NPM 中的 interestfor polyfill 软件包有条件地对兴趣调用器进行 polyfill。建议捆绑 polyfill，而不是使用 CDN。

强制要求：通过检查 HTMLButtonElement.prototype 上的 interestForElement 属性来检测功能，并且仅在缺少原生支持时加载 polyfill。

<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 Polyfill 注意事项

使用 polyfill 时，CSS API 会略有变化，以弥补原生伪类和属性支持的不足：

  • 伪类：polyfill 无法定义真正的 :interest-source 和 :interest-target 伪类，因此它会改为应用 .interest-source 和 .interest-target 类。强制性：将它们与 :is() 结合使用，以同时支持原生状态和 polyfill 状态。
/* 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，polyfill 需要使用 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);
}