Prévias de ações acionadas por interesse

Pode ser útil mostrar aos usuários uma prévia das ações antes que eles as confirmem. Os invocadores de interesse são um recurso experimental da plataforma da Web que oferece uma maneira declarativa de criar relações de segmentação por interesse entre uma fonte de interesse (por exemplo, um botão ou um link) e um destino de interesse. Depois que a relação declarativa é estabelecida, há vários métodos que um desenvolvedor pode usar para responder com base no interesse e na perda de interesse usando CSS e JavaScript. Nesse caso de uso, podemos usar os eventos interest e loseinterest para visualizar vários efeitos de uma segmentação por interesse.

Como fazer a implementação

Uma relação de interesse é criada definindo o atributo interestfor em um botão ou link (ou seja, a origem do interesse). O atributo usa uma referência de ID para outro elemento (ou seja, o destino de interesse). Os invocadores ou as fontes de interesse só podem ter um único destino de interesse, mas um destino de interesse pode ter vários invocadores de interesse.

<!-- 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>

Para este caso de uso, podemos usar os eventos interest e loseinterest para visualizar vários efeitos de uma segmentação por interesse. Ambos os eventos são InterestEvents que têm uma propriedade source, que é a origem do interesse (ou seja, o elemento com o atributo 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;
});

As origens e os destinos de interesse ativos podem ser selecionados com CSS usando os pseudoseletores :interest-source e :interest-target, respectivamente.

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

O atraso de início e término de um invocador de interesse (ou seja, o elemento com o atributo interestfor) pode ser definido com as propriedades CSS interest-delay-start e interest-delay-end ou com a propriedade abreviada interest-delay.

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

Estratégias de fallback

Alternativas e suporte do navegador para invocadores de interesse

Os invocadores de interesse precisam ser preenchidos condicionalmente usando o pacote de polyfill interestfor do NPM. Prefira agrupar o polyfill em vez de usar a CDN.

OBRIGATÓRIO: detecte o recurso verificando a propriedade interestForElement em HTMLButtonElement.prototype e carregue o polyfill somente quando não houver suporte nativo.

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

Limitações do polyfill de CSS

Ao usar o polyfill, a API CSS muda um pouco para compensar a falta de suporte nativo a pseudoclasses e propriedades:

• Pseudoclasses: o polyfill não pode definir pseudoclasses :interest-source e :interest-target reais. Por isso, ele aplica as classes .interest-source e .interest-target. OBRIGATÓRIO: combine-os com :is() para oferecer suporte aos estados nativos e polyfilled.

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

• Propriedades CSS: para interest-delay, interest-delay-start e interest-delay-end, o polyfill exige o uso de variáveis CSS, já que não pode ler as propriedades personalizadas diretamente em todos os navegadores.

/* 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);
}