Notifications d’onglets Vivaldi pour les développeurs Web

Cet article est aussi disponible sur : English 日本語 Deutsch Српски Português Български 简体中文

Produits : Vivaldi pour ordinateur de bureau uniquement.

Les notifications d’onglets permettent aux pages Web de communiquer de brefs résumés numériques de l’état aux utilisateurs. Il peut s’agir, par exemple, d’afficher de nouveaux messages, e-mails ou actualités non lus ; des tâches ou des factures non traitées ; ou le nombre d’articles ajoutés à un panier.

Les notifications d’onglets sont affichées sous forme de badges numériques au-dessus de la favicon du document dans la barre d’onglets et les panneaux Web.

Vivaldi détecte les compteurs numériques au début du titre du document lorsqu’ils sont entourés de parenthèses (U+0028 LEFT PARENTHESIS et U+0029 RIGHT PARENTHES) et séparés du reste du titre par un caractère d’espacement (U+0020 SPACE). Exemple :

<title>(7) Webmail</title>

Les notifications d’onglets sont activées par défaut, mais les utilisateurs peuvent les désactiver.

Le badge est mis à jour dynamiquement lorsque le titre du document change. Pour des performances optimales, mettez à jour la propriété document.title ou mettez à jour la propriété innerText de l’élément <title>. Le remplacement de l’élément <title> peut retarder les mises à jour des badges.

Les numéros à deux chiffres ou plus peuvent être affichés sous la forme d’un badge de signe plus au lieu d’un badge numérique en raison de contraintes d’espace.

Le compteur numérique est supprimé du titre du document dans les interfaces utilisateur où le badge est affiché. La séquence de caractères « (0) » est supprimée des titres, mais ne génère pas de badge.

Les notifications d’onglets ne sont détectées qu’à partir du titre du document de plus haut niveau (pas iframes).

Désactiver les notifications d’onglets

Vous pouvez désactiver les notifications d’onglets dans un document en préfixant le titre d’une espace (U+200B ZERO WIDTH SPACE) de largeur nulle. Exemple :

<title>​(1195) Step Counter</title>