Interest-delay - Propriété CSS

Schéma de la syntaxe de interest-delay.

Description des termes utilisés sur le schéma :

• duration est une valeur numérique positive ou nulle suivie d'une des unités de durée.

Description de la propriété interest-delay.

⚠

Les propriétés interest-delay-start et interest-delay-end, ainsi que le propriété résumée interest-delay ne sont pour l'instant prise en charge que par Chrome   et Edge  .

L'attribut interestFor de HTML sert à définir un élément comme étant un indicateur d'intérêt. L'attribut interestFor reçoit l'ID d'un autre élément présent sur la page. Si celui-ci comporte l'attribut popover, il sera affiché dans une infobulle lorsque l'utilisateur montre de l'intérêt pour le premier élément. Voici un exemple, mais qui ne fonctionnera pas sur tous les navigateurs (pour l'instant ces attributs ne sont pas reconnus partout).

Cliquer sur ce lien

Quand l'utilisateur montre de l'intérêt pour un bouton ou un lien, le navigateur n'affiche pas tout de suite l'infobulle. Sans ce délai le fonctionnement risque d'être perturbant sur une page comportant beaucoup de liens ou de boutons par exemple : le fait de glisser la souris déclencherait l'affichage et le masquage presque immédiat d'une multitude d'infobulles.
Il en est de même lorsque l'utilisateur perd de l'intérêt pour un élément : l'infobulle ne disparaît pas immédiatement.

Les propriétés interest-delay-start et interest-delay-end, ou la propriété résumée interest-delay permettent de gérer ces délais. Voici ce que cela donne sur un bouton dont l'intérêt est pris en compte seulement après deux secondes, ce qui est long mais c'est pour l'exemple.

Valeurs pour interest-delay.

⚠ Les exemples ci-dessous ne fonctionneront pour le moment que sur Edge   et Chrome   (2026).

• interest-delay: normal;

  Les temps d'apparition et de disparition de l'infobulle sont laissés aux choix du navigateur. Approchez la souris du bouton ci-dessous pour voir quels sont les délais imposés par votre navigateur.

  Lien de test

  Infobulle
  interest-delay:normal;
• interest-delay: 2s;

  La valeur de 2s est appliquée aussi bien au début qu'à la fin de l'intérêt de l'utilisateur. Autrement dit, à partir du moment où la souris arrive sur le bouton, et à partir du moment où elle le quitte.

  C'est une valeur numérique positive ou nulle, suivie d'une unité de temps (voir les unités de durée).

  Lien de test

  Infobulle
  interest-delay:2s;
• interest-delay: 2s 0s;

  Des durées différentes peuvent être appliquées à la valeur start et end. L'écriture ci-dessus est équivalente à :

  interest-delay-start:2s; interest-delay-end:0s;
  Lien de test

  Infobulle
  interest-delay:2s 0s;
• interest-delay: initial; (normal) interest-delay: inherit; interest-delay: revert; interest-delay: revertLayer; interest-delay: unset;

  interest-delay-start: initial; (normal) interest-delay-start: inherit; interest-delay-start: revert; interest-delay-start: revertLayer; interest-delay-start: unset;

  interest-delay-end: initial; (normal) interest-delay-end: inherit; interest-delay-end: revert; interest-delay-end: revertLayer; interest-delay-end: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de interest-delay.

Comme toutes les propriétés qui agissent en réponse à une action de l'utilisateur, l'animation de interest-delay n'est pas très spectaculaire. Voici cependant un exemple de ce qu'il est possible d'obtenir.

Afin de rendre l'exemple plus visuel, l'animation agit aussi sur la graisse des caractères, les caractères gras correspondant à un délai d'intérêt de 2 secondes.

⚠ Cet exemple ne fonctionne pas sur tous les navigateurs.

Exemple interactif avec la propriété interest-delay.

Ajustez les valeurs pour interest-delay-start et interest-delay-end, puis approchez la souris du bouton pour constater l'effet. Le même résultat pourrait être obtenu avec la propriété résumée interest-delay.

Compatibilité des navigateurs avec interest-delay.

Pour le moment (2016) le support de ces propriétés n'est possible que sur Edge   et Chrome  .

1

Propriété
interest-delay

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Chrome pour Androïd

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Opéra

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété interest-delay.

• Module CSS - Interface utilisateur de base - Niveau 4

  Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.

  Concernant interest-delay. Introduction des propriétés interest-delay-start et interest-delay-end, ainsi que de la propriété résumée interest-delay.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, à propos de l'interface utilisateur.

On appelle interface utilisateur tout ce qui est normalement pris en charge par le navigateur : forme du pointeur de souris, couleur du marqueur de texte, etc. Il est néanmoins possible d'ajuster ces paramètres avec les propriétés décrites dans le module CSS - Interface utilisateur de base.

Propriétés :