Anteprime delle azioni attivate dall'interesse

Può essere utile fornire agli utenti un'anteprima delle loro azioni prima che le eseguano. Gli attivatori di interesse sono una funzionalità sperimentale della piattaforma web che fornisce un modo basato su dichiarazioni per creare relazioni di interesse tra un'origine di interesse (ad es. un pulsante o un link) e un target di interesse. Una volta stabilita la relazione dichiarativa, esistono diversi metodi che uno sviluppatore può utilizzare per rispondere in base all'interesse e alla perdita di interesse utilizzando sia CSS che JavaScript. Per questo caso d'uso, possiamo sfruttare gli eventi interest e loseinterest per visualizzare l'anteprima di vari effetti per un targeting per interesse.

Come implementare

Una relazione di interesse viene creata impostando l'attributo interestfor su un pulsante o un link (ovvero l'origine dell'interesse). L'attributo accetta un riferimento ID a un altro elemento (ovvero il target di interesse). Gli attivatori o le origini di interesse possono avere un solo target di interesse, ma un target di interesse può avere più attivatori di 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>

Per questo caso d'uso, possiamo sfruttare gli eventi interest e loseinterest per visualizzare l'anteprima di vari effetti per un targeting per interesse. Entrambi questi eventi sono InterestEvent che hanno una proprietà source che è l'origine dell'interesse (ovvero l'elemento con l'attributo 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;
});

Le origini e i target di interesse attivi possono essere selezionati con CSS utilizzando rispettivamente gli pseudo-selettori :interest-source e :interest-target.

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

Il ritardo di inizio e di fine per un attivatore di interesse (ovvero l'elemento con l'attributo interestfor) può essere impostato con le proprietà CSS interest-delay-start e interest-delay-end o con la proprietà abbreviata interest-delay.

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

Strategie di riserva

Opzioni di riserva e supporto del browser per gli attivatori di interesse

Gli attivatori di interesse devono essere sottoposti a polyfill condizionale utilizzando il pacchetto di polyfill interestfor di NPM. Preferisci l'aggregazione del polyfill all'utilizzo della CDN.

OBBLIGATORIO: esegui il rilevamento delle funzionalità controllando la proprietà interestForElement su HTMLButtonElement.prototype e carica il polyfill solo quando manca il supporto 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>

Avvertenze sui polyfill CSS

Quando utilizzi il polyfill, l'API CSS cambia leggermente per tenere conto della mancanza di supporto nativo per pseudo-classi e proprietà:

• Pseudo-classi: il polyfill non può definire pseudo-classi :interest-source e :interest-target reali, quindi applica le classi .interest-source e .interest-target. OBBLIGATORIO: combinali con :is() per supportare sia gli stati nativi che quelli con polyfill.

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

• Proprietà CSS: per interest-delay, interest-delay-start e interest-delay-end, il polyfill richiede l'utilizzo di variabili CSS, in quanto non può leggere le proprietà personalizzate direttamente in tutti i browser.

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