interest-delay

Propriétés constitutives

La propriété interest-delay est un raccourci pour les propriétés suivantes :

• interest-delay-start
• interest-delay-end

Syntaxe

/* Valeurs uniques */
interest-delay: normal;
interest-delay: 2s;
interest-delay: 250ms;

/* Valeurs doubles */
interest-delay: 1s normal;
interest-delay: 0s 500ms;

/* Valeurs globales */
interest-delay: inherit;
interest-delay: initial;
interest-delay: revert;
interest-delay: revert-layer;
interest-delay: unset;

Valeurs

La propriété interest-delay accepte une ou deux valeurs. La première valeur définit le délai avant que l'intérêt ne soit montré (interest-delay-start) ; la seconde valeur, si elle est fournie, définit le délai avant que l'intérêt ne soit perdu (interest-delay-end). Chaque valeur peut être soit le mot-clé normal, soit une valeur <time> :

normal

Définit le délai par défaut du navigateur. Il s'agit de la valeur initiale.

<time>

Définit le délai à une durée spécifique. La valeur doit être positive, sinon la propriété devient invalide.

Description

Un élément de contrôle tel que <a> ou <button> peut être défini comme un invicateur d'intérêt en lui attribuant l'attribut interestfor. Lorsque cette relation est établie, l'élément cible est affecté lorsque l'utilisateur·ice « montre de l'intérêt » pour l'invocateur (par exemple, en le survolant ou en le sélectionnant). Un cas d'utilisation courant est d'afficher une fenêtre contextuelle au survol ou à la sélection. Quand l'utilisateur·ice « cesse de montrer de l'intérêt », l'effet s'arrête.

Quand l'utilisateur·ice montre ou perd de l'intérêt, l'effet associé ne commence ou ne s'arrête pas immédiatement — le navigateur ajoute un court délai (qui peut varier selon le navigateur). Cela empêche, par exemple, les fenêtres contextuelles de prévisualisation d'apparaître immédiatement quand l'utilisateur·ice survole un lien, ce qui pourrait être gênant et distrayant sur une page contenant de nombreux liens.

La propriété interest-delay permet de personnaliser ces délais. Vous pouvez utiliser interest-delay pour définir le délai avant que l'effet d'intérêt ne commence (défini par la propriété interest-delay-start) et le délai avant que l'effet d'intérêt ne se termine (défini par la propriété interest-delay-end) dans une seule déclaration.

La propriété interest-delay peut prendre une ou deux valeurs. Ces valeurs peuvent être le mot-clé normal, qui définit le délai par défaut du navigateur, ou une valeur <time>, qui définit un délai personnalisé. Si une seule valeur est spécifiée, elle s'applique à la fois à interest-delay-start et à interest-delay-end. Si deux valeurs sont spécifiées, la première valeur définit interest-delay-start, et la seconde valeur définit interest-delay-end.

Définition formelle

Syntaxe formelle

interest-delay = 
  <'interest-delay-start'>{1,2}  

<interest-delay-start> = 
  normal  |
  <time>  

Exemples

Créer un effet interest-delay simple

Dans cet exemple, nous montrons comment interest-delay affecte le comportement d'un invocateur d'intérêt.

HTML

Le balisage inclut un <button>, un <p> et un <input> de type checkbox. Nous définissons le <button> comme invocateur d'intérêt en lui donnant l'attribut interestfor dont la valeur correspond à l'id de l'élément <p>. Cela fait du paragraphe l'élément cible. Le paragraphe devient un popover grâce à l'attribut popover, qui le masque initialement.

<button interestfor="mypopover">Bouton</button>
<p id="mypopover" popover>Info-bulle au survol</p>
<form>
  <input type="checkbox" id="apply-delay" />
  <label for="apply-delay">
    Appliquer un <code>interest-delay</code> de <code>1s 2s</code>
  </label>
</form>

CSS

Dans le CSS, nous définissons une règle .delay qui applique une valeur interest-delay de 1s 2s à tout invocateur d'intérêt auquel la classe delay est appliquée. Nous appliquerons cette classe au <button> lorsque la case à cocher sera cochée, avec JavaScript.

.delay {
  interest-delay: 1s 2s;
}

JavaScript

Dans notre script, nous récupérons les références du <button> et de la case à cocher, puis nous créons un écouteur d'évènement qui bascule la classe delay sur le <button> à chaque changement de valeur de la case (cochée ou décochée).

const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
  btn.classList.toggle("delay");
});

Résultat

Ceci s'affiche ainsi :

Essayez de montrer de l'intérêt pour le bouton (par exemple, en le survolant ou en le sélectionnant), puis de cesser de montrer de l'intérêt pour observer l'affichage et la disparition de la fenêtre contextuelle. Par défaut, la fenêtre contextuelle s'affiche et disparaît après un très court délai.

Cochez maintenant la case et refaites les mêmes actions. Cette fois, la fenêtre contextuelle devrait apparaître après un délai de 1s lorsque l'intérêt est montré, et disparaître après un délai de 2s lorsque l'intérêt est perdu.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés interest-delay-start, interest-delay-end
• L'API Popover
• Utiliser les invocateurs d'intérêt
• Le module d'interface utilisateur de base CSS