Vorschau von durch Interesse ausgelösten Aktionen

Es kann hilfreich sein, Nutzern eine Vorschau ihrer Aktionen zu zeigen, bevor sie sie ausführen. Interest Invokers sind eine experimentelle Webplattformfunktion, mit der sich deklarativ Interessenbeziehungen zwischen einer Interessenquelle (z.B. einer Schaltfläche oder einem Link) und einem Interessenziel erstellen lassen. Sobald die deklarative Beziehung hergestellt ist, kann ein Entwickler mit verschiedenen Methoden auf Interesse und Verlust des Interesses reagieren, sowohl mit CSS als auch mit JavaScript. Für diesen Anwendungsfall können wir die Ereignisse interest und loseinterest nutzen, um eine Vorschau der verschiedenen Auswirkungen für ein Targeting auf Interessengebiete zu erhalten.

Implementierung

Eine Interessenbeziehung wird erstellt, indem das Attribut interestfor für eine Schaltfläche oder einen Link (d.h. die Interessenquelle) festgelegt wird. Das Attribut verwendet eine ID-Referenz auf ein anderes Element (d.h. das Interessenziel). Interessenauslöser oder ‑quellen können nur ein einziges Interessenziel haben, aber ein Interessenziel kann mehrere Interessenauslöser haben.

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

In diesem Anwendungsfall können wir die Ereignisse interest und loseinterest nutzen, um eine Vorschau der verschiedenen Auswirkungen für ein Zielvorhaben zu erhalten. Beide Ereignisse sind InterestEvents mit einer source-Eigenschaft, die die Quelle des Interesses ist (d.h. das Element mit dem Attribut 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;
});

Aktive Interessenquellen und ‑ziele können mit CSS über die Pseudoselektoren :interest-source bzw. :interest-target ausgewählt werden.

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

Die Start- und Endverzögerung für einen Interest Invoker (also das Element mit dem Attribut interestfor) kann mit den CSS-Eigenschaften interest-delay-start und interest-delay-end oder der Kurzschreibweise interest-delay festgelegt werden.

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

Fallback-Strategien

Fallbacks und Browserunterstützung für Interest Invoker

Interest Invokers müssen bedingt mit dem Polyfill-Paket interestfor von NPM polyfilled werden. Bündeln Sie das Polyfill, anstatt das CDN zu verwenden.

OBLIGATORISCH: Prüfen Sie, ob die Funktion unterstützt wird, indem Sie nach dem Attribut interestForElement in HTMLButtonElement.prototype suchen. Laden Sie das Polyfill nur, wenn die native Unterstützung fehlt.

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

Einschränkungen bei CSS-Polyfills

Wenn Sie das Polyfill verwenden, ändert sich die CSS API geringfügig, um die fehlende Unterstützung für native Pseudoklassen und Attribute zu berücksichtigen:

• Pseudoklassen: Das Polyfill kann keine echten :interest-source- und :interest-target-Pseudoklassen definieren. Stattdessen werden die Klassen .interest-source und .interest-target angewendet. OBLIGATORISCH: Kombinieren Sie sie mit :is(), um sowohl native als auch Polyfill-Zustände zu unterstützen.

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

• CSS-Eigenschaften: Für interest-delay, interest-delay-start und interest-delay-end erfordert das Polyfill die Verwendung von CSS-Variablen, da es die benutzerdefinierten Eigenschaften nicht in allen Browsern direkt lesen kann.

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