Voorbeelden van acties die worden getriggerd door interesse

Het kan nuttig zijn om gebruikers een voorbeeld van hun acties te geven voordat ze deze uitvoeren. Interest Invokers is een experimentele webplatformfunctie die een op declaratie gebaseerde manier biedt om interesserelaties te maken tussen een interessebron (bijvoorbeeld een knop of een link) en een interessedoel. Nadat de declaratieve relatie is vastgesteld, kan een ontwikkelaar op verschillende manieren reageren op basis van interesse en verlies van interesse met zowel CSS als JavaScript. Voor deze use case kunnen we de gebeurtenissen interest en loseinterest gebruiken om een voorbeeld van verschillende effecten voor een interessetarget te tonen.

Hoe wordt dit geïmplementeerd

Een interesserelatie wordt gemaakt door het kenmerk interestfor in te stellen voor een knop of link (de interessebron). Het kenmerk neemt een ID-verwijzing naar een ander element (dat wil zeggen het interessetarget). Interesse-aanroepers of -bronnen kunnen maar één interessetarget hebben, maar een interessetarget kan meerdere interesse-aanroepers hebben.

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

Voor deze use case kunnen we de gebeurtenissen interest en loseinterest gebruiken om een voorbeeld van verschillende effecten voor een interessetarget te tonen. Beide gebeurtenissen zijn InterestEvents met een source-property die de bron van de interesse is (het element met het kenmerk 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;
});

Actieve interessebronnen en -doelen kunnen worden geselecteerd met CSS met respectievelijk de pseudoselectors :interest-source en :interest-target.

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

De start- en eindvertraging voor een interesse-aanroeper (het element met het kenmerk interestfor) kan worden ingesteld met de CSS-property's interest-delay-start en interest-delay-end of de verkorte property interest-delay.

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

Reservestrategieën

Fallbacks en browserondersteuning voor aanroepers van interesses

Interesse-invokers moeten voorwaardelijk worden gepolyfilled met het interestfor-polyfillpakket van NPM. Bundel de polyfill liever dan het CDN te gebruiken.

VERPLICHT: Voer een functiedetectie uit door te controleren op de property interestForElement op HTMLButtonElement.prototype en laad de polyfill alleen als native ondersteuning ontbreekt.

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

Voorbehouden voor CSS-polyfill

Als je de polyfill gebruikt, verandert de CSS API enigszins om rekening te houden met het gebrek aan ondersteuning voor native pseudoklassen en eigenschappen:

• Pseudoklassen: De polyfill kan geen echte :interest-source- en :interest-target-pseudoklassen definiëren, dus past in plaats daarvan .interest-source- en .interest-target-klassen toe. VERPLICHT: Combineer ze met :is() om zowel systeemeigen als polyfilled statussen te ondersteunen.

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

• CSS-eigenschappen: Voor interest-delay, interest-delay-start en interest-delay-end vereist de polyfill het gebruik van CSS-variabelen, omdat deze de aangepaste eigenschappen niet rechtstreeks in alle browsers kan lezen.

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