Aperçus des actions déclenchées par l'intérêt

Il peut être utile de fournir aux utilisateurs un aperçu de leurs actions avant qu'ils ne les valident. Les déclencheurs d'intérêt sont une fonctionnalité expérimentale de la plate-forme Web qui permet de créer de manière déclarative des relations d'intérêt entre une source d'intérêt (par exemple, un bouton ou un lien) et une cible d'intérêt. Une fois la relation déclarative établie, un développeur peut utiliser plusieurs méthodes pour réagir à l'intérêt et à la perte d'intérêt à l'aide de CSS et de JavaScript. Pour ce cas d'utilisation, nous pouvons exploiter les événements interest et loseinterest pour prévisualiser différents effets pour une cible d'intérêt.

Mise en œuvre

Une relation d'intérêt est créée en définissant l'attribut interestfor sur un bouton ou un lien (c'est-à-dire la source d'intérêt). L'attribut prend une référence d'ID vers un autre élément (c'est-à-dire la cible d'intérêt). Les sources ou les invocateurs d'intérêt ne peuvent avoir qu'une seule cible d'intérêt, mais une cible d'intérêt peut avoir plusieurs invocateurs d'intérêt.

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

Pour ce cas d'utilisation, nous pouvons exploiter les événements interest et loseinterest pour prévisualiser différents effets pour une cible d'intérêt. Ces deux événements sont des InterestEvent qui ont une propriété source, qui est la source de l'intérêt (c'est-à-dire l'élément avec l'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;
});

Les sources et cibles d'intérêt actives peuvent être sélectionnées avec CSS à l'aide des pseudo-sélecteurs :interest-source et :interest-target, respectivement.

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

Le délai de début et de fin d'un déclencheur d'intérêt (c'est-à-dire l'élément avec l'attribut interestfor) peut être défini avec les propriétés CSS interest-delay-start et interest-delay-end ou la propriété abrégée interest-delay.

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

Stratégies de remplacement

Créations de remplacement et compatibilité des navigateurs pour les déclencheurs d'intérêt

Les déclencheurs d'intérêt doivent être polyfillés de manière conditionnelle à l'aide du package polyfill interestfor de NPM. Privilégiez le regroupement du polyfill plutôt que l'utilisation du CDN.

OBLIGATOIRE : Détectez la fonctionnalité en vérifiant la propriété interestForElement sur HTMLButtonElement.prototype, et chargez le polyfill uniquement lorsque la compatibilité native est manquante.

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

Mises en garde concernant les polyfills CSS

Lorsque vous utilisez le polyfill, l'API CSS change légèrement pour compenser l'absence de compatibilité native avec les pseudo-classes et les propriétés :

• Pseudo-classes : le polyfill ne peut pas définir de vraies pseudo-classes :interest-source et :interest-target. Il applique donc les classes .interest-source et .interest-target à la place. OBLIGATOIRE : Combinez-les avec :is() pour prendre en charge les états natifs et polyfilled.

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

• Propriétés CSS : pour interest-delay, interest-delay-start et interest-delay-end, le polyfill nécessite l'utilisation de variables CSS, car il ne peut pas lire directement les propriétés personnalisées dans tous les navigateurs.

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