Avance rapide de Vivaldi pour les développeurs Web

Produits : Vivaldi pour ordinateur de bureau uniquement.

L’avance rapide permet aux utilisateurs de naviguer d’un document à l’autre dans une série. Il peut s’agir, par exemple, d’accéder à la page suivante d’un livre, d’une page de résultats de recherche, d’un forum ou d’une image dans une galerie.

L’avance rapide est activée en appuyant sur la touche Espace (activée par défaut) au bas du document, ou en utilisant le bouton Avance rapide ou la commande rapide.

Vivaldi détecte le document suivant d’une série à l’aide de différentes méthodes :

  1. (Standard du Web préféré.) Le premier élément <link> avec une propriété rel="next" dans le document.
  2. Le premier élément <a> avec une propriété rel="next" dans le document.
  3. Le dernier élément <a> avec la chaîne exacte « Next » ou « Next Page » (ou équivalents traduits) dans le document. Les propriétés aria-label et title sont également pris en compte. Seuls les 1000 dernier élements <a> sont pris en compte.

La détection de l’avance rapide ne se produit que lors du chargement initial du document. Les insertions dynamiques ultérieures ne seront pas détectées par Vivaldi. L’avance rapide est mise à jour dynamiquement lorsque la propriété d’un élément href est mise à jour.

Avance rapide accidentelle

L’avance rapide peut être déclenchée accidentellement sur un document compatible, en particulier pour les documents et les applications Web tels que les jeux qui souhaitent interagir sur l’événement clavier Espace .

Une navigation accidentelle peut se produire lorsqu’un document traite un événement clavier, mais ne parvient pas à consommer l’événement après avoir agi dessus. Dans votre gestionnaire d’événements, assurez-vous d’appeler preventDefault() pour signaler au navigateur que l’événement clavier a été traité et consommé. Cela se produit automatiquement lors de l’utilisation de contrôles de formulaire par défaut tels que <input> et <textarea>.

Il est important de tester et de s’assurer de la compatibilité avec l’avance rapide, les raccourcis à touche unique et d’autres fonctionnalités d’accessibilité du clavier.

Couleurs du thème adaptatif Vivaldi pour les développeurs Web

Produits : Vivaldi pour ordinateur de bureau, Android et iOS.

Les couleurs de thème adaptatives permettent aux pages Web de définir la couleur d’accentuation dans le navigateur Vivaldi, y compris la barre de titre, la barre d’onglets, la barre d’adresse, la barre d’état, etc. Par exemple, pour appliquer un thème de couleur vert clair au navigateur Vivaldi :

<meta name="theme-color" content="#8ba888">

Vivaldi utilise le premier élément nommé <meta> du document.

L’option Couleurs adaptatives du thème est activée par défaut. La fonctionnalité peut être désactivée par des thèmes personnalisés.

Dans Vivaldi pour ordinateur et Vivaldi pour Android, vous pouvez définir différentes couleurs pour les préférences de couleur de thème clair et sombre à l’aide des requêtes multimédias appropriées. Par exemple, pour appliquer une couleur de thème vert matcha clair en mode clair et une couleur de thème vert matcha foncé en mode sombre :

<meta name="theme-color" content="#8ba888" media="(prefers-color-scheme:light)">>
<meta name="theme-color" content="#44624a" media="(prefers-color-scheme:dark)">

Dans Vivaldi pour Android et Vivaldi pour iOS, les content mises à jour dynamiques des propriétés sont ignorées. La couleur du thème sur ces plates-formes n’est définie que lors de l’initialisation du document.

Dans Vivaldi pour ordinateur, les changements rapides de la couleur du thème peuvent être retardés. Vous devez vous assurer que votre document ne change pas trop souvent la couleur de son thème

La teinte ou la saturation de certaines couleurs de thème peut être légèrement ajustée pour assurer un contraste suffisant avec le texte et les icônes de la barre d’outils.

Métadonnées de signets Vivaldi pour les développeurs Web

Produits : Vivaldi pour ordinateur de bureau

Vivaldi s’approvisionne en métadonnées pour les signets à partir des éléments de métadonnées HTML standard et des métadonnées du protocole Open Graph. Ces métadonnées sont utilisées pour préremplir les valeurs lorsque l’utilisateur crée un signet.

Le titre du signet provient :

  1. Du titre du document à partir de l’élément <title> .
  2. Du titre du protocole Open Graph (og:title).

La description du signet proviend de :

  1. La description du protocole Open Graph (og:description).
  2. La description du document à partir de l’élément <meta name="description"> .

La description du protocole Open Graph est préférée car il s’agit souvent d’un résumé de meilleure qualité de la page que la description HTML standard. Ce dernière est souvent trop longue ou mal utilisée pour lister les mots-clés de la page au lieu d’un résumé ou d’une description écrite.

Vivaldi pour Android et Vivaldi pour iOS n’utilisent que les éléments HTML standard.

Intégration avec Vivaldi Agenda pour les développeurs Web

Produits : Vivaldi pour ordinateur de bureau uniquement.

Vivaldi Agende est un client d’agenda complet intégré au navigateur Vivaldi. Les utilisateurs peuvent s’abonner à des flux d’agenda ou ajouter un seul ou un groupe d’événements à leurs agendas.

Les flux d’agenda et les fichiers d’événements utilisent tous deux le format de fichier iCalendar (RFC 5545).


Invitation à ajouter des événements à Vivaldi Agenda

Pour inviter un utilisateur à ajouter un événement à ses agendas, créez un lien à l’aide du schéma d’URI https (recommandé).http Exemple :

https://example.com/staff-meeting.ics

Invitation à s’abonner à l’agenda dans Vivaldi Agenda

Pour inviter un utilisateur à suivre un nouveau flux d’agenda, créez un lien vers celui-ci à l’aide du schéma d’URI webcal . Exemple :

webcal://example.com/holidays.ics

Vivaldi ne prend en charge que le protocole HTTPS pour les abonnements à l’agenda.

Vivaldi interroge les abonnements à l’agenda pour obtenir des mises à jour toutes les 10 minutes. Assurez-vous que votre serveur d’agenda définit les en-têtes de réponse de cache HTTP appropriés et prend en charge la revalidation du cache pour réduire la charge sur le serveur (voir RFC 9111).

Comportement de glisser-sélectionner de lien Vivaldi pour les développeurs Web

Produits : Vivaldi pour ordinateur de bureau uniquement.

Vivaldi permet aux utilisateurs de sélectionner du texte à l’intérieur des liens ou de faire glisser les liens. Le comportement dans Vivaldi diffère de celui par défaut des autres navigateurs Blink (Chromium).

Les utilisateurs peuvent sélectionner du texte à l’intérieur des liens en cliquant sur un lien et en le faisant glisser vers la gauche ou la droite. L’élément du lien peut être déplacé lorsqu’il est déplacé vers le haut ou vers le bas.

Pour qu’un lien puisse toujours être déplacé dans n’importe quelle direction, définissez son attribut draggable à true. Exemple :

<a href="https://example.com/" draggable="true">
  Draggable and Not Selectable Link Text
</a>

Pour que le texte d’un lien soit toujours sélectionnable dans n’importe quelle direction, définissez son attribut draggable à false. Exemple :

<a href="https://example.com/" draggable="false">
  Selectable and Not Draggable Link Text
</a>

Lorsque les liens ne sont pas explicitement déplaçables (par défaut), la propriété CSS user-select est ignorée et leur propriété cursor peut être ignorée.

Notifications d’onglets Vivaldi pour les développeurs Web

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>

Meilleures pratiques de l’expéditeur pour Vivaldi Courrier

Produits : Vivaldi pour ordinateur de bureau uniquement.

Vivaldi Courrier est un client de messagerie complet. La délivrabilité des courriels et le filtrage des messages potentiellement indésirables sont laissés au serveur de messagerie de l’utilisateur.

Ce document décrit les spécificités pour les expéditeurs qui souhaitent garantir une bonne expérience de réception et une compatibilité avec Vivaldi Courrier.


Rendu des courriers

Vivaldi Courrier affiche les courriels à l’aide du moteur de rendu Chromium Blink.

Par défaut, Vivaldi Courrier bloque le chargement des ressources externes. Les utilisateurs seront invités à approuver le chargement des ressources externes par adresse d’expéditeur.

Intégrez des images petites et importantes, comme un logo ou un symbole, dans le courrier lui-même pour vous assurer qu’il est chargé. Incluez des alternatives textuelles ( propriétés alt) pour servir d’espaces réservés à d’autres images externes.

Vivaldi Courrier convertira les e-mails HTML uniquement en texte brut lorsque l’utilisateur préfère lire du texte brut. Le processus de conversion préserve les liens et affiche les images en tant que texte de propriété alt. Vous pouvez empêcher une image d’être représentée dans la conversion de texte brut en la marquant explicitement comme décorative (alt=«  »).

Pour un résultat optimal, fournissez une version alternative en texte brut plus soigneusement conçue de votre message HTML.


Mode sombre

Vivaldi Courrier suit les préférences de jeu de couleurs de l’utilisateur et affiche les courriers en conséquence.

Vous pouvez styliser les variantes des modes clair et sombre de votre message à l’aide de la requête multimédia standard Web prefers-color-scheme. Exemple :

<meta name="color-scheme" content="light dark">
<style>
@media(prefers-color-scheme: light) {
  body { background: white; color: black; }
}
@media(prefers-color-scheme: dark) {
  body { background: black; color: white; }
}
</style>

Désactivation du mode sombre automatique

Vivaldi Courrier peut appliquer automatiquement un jeu de couleurs sombres si votre courrier ne contient pas d’informations sur le jeu de couleurs.

Vous pouvez désactiver le mode sombre automatique dans un courrier en le déclarant explicitement comme mode clair uniquement.

<meta name="color-scheme" content="only light">

Sélection Multipart

Vivaldi Courrier ne prend pas en charge la combinaison de plusieurs parties multipart/related ou d’autres messages complexes et inhabituels en plusieurs parties. Il choisira la plus grande partie appropriée (en octets) du type préféré dans un ensemble multipart/alternative.


Avertissements d’hameçonnage

Vivaldi Courrier affichera un avertissement d’usurpation d’identité/hameçonnage si le nom dans les champs De ou Répondre à ressemble à une adresse e-mail différente de l’adresse d’expéditeur associée. Envoyez à l’aide d’un nom lisible par humain ou sans nom défini à la place.

Vivaldi Courrier affichera un avertissement d’usurpation d’identité/hameçonnage si les adresses e-mail dans les champs De et Répondre à se trouvent à des noms de domaine différents (y compris des sous-domaines). Vivaldi Courrier affichera toujours un avertissement d’usurpation d’identité/hameçonnage si l’une des deux adresses se trouve dans un domaine de messagerie personnel commun (par exemple, gmail.com et icloud.com).


Fils de discussion

Vivaldi Courrier est conçu autour des fils de discussion sous forme de courriels. Le fil de discussion permet de regrouper et d’afficher les e-mails associés. Vivaldi Courriel suit les conventions standard de fil de discussion des e-mails, telles que décrites dans la section 3.6.4 de la RFC 5322.

Veuillez envisager d’adopter le fil de discussion des e-mails pour vos mises à jour de statut automatisées des e-mails transactionnels. Par exemple, une confirmation d’expédition de commande doit être une réponse à l’e-mail de confirmation de commande.


Invitations d’agenda

Vivaldi Courrier traitera les pièces jointes des événements de calendrier au format de fichier iCalendar (RFC 5545) et invitera l’utilisateur à répondre aux invitations en attente (RSVP).

Vous pouvez également créer un lien vers des fichiers d’événements sur un serveur Web. Reportez-vous à la section Intégration avec Vivaldi Agenda pour les développeurs Web.

Interface du navigateur sur iOS

Comme le navigateur de bureau, Vivaldi sur iOS dispose d’une interface utilisateur unique.

Vivaldi sur iOS avec chaque élément de l’interface utilisateur nommé.

Barre d’onglets

Sur la barre d’onglets, vous pouvez voir tous vos onglets ouverts, tout comme sur l’application de bureau. Si vous avez beaucoup d’onglets ouverts, glissez la barre d’onglets vers la gauche ou vers la droite pour afficher les autres onglets.

Pour activer/désactiver la barre d’onglets :

  1. Allez dans les Bouton du menu Vivaldi onglets des paramètres > du menu > Vivaldi.
  2. Cochez/décochez le bouton Afficher la barre d’onglets.

Pour déplacer la barre d’onglets en bas de l’écran ainsi que de la barre d’adresses :

  1. Allez dans les Bouton du menu Vivaldi onglets des paramètres >du menu > Vivaldi.
  2. Sélectionnez Bas pour Position de la barre d’adresse.

Barre d’adresses

  • Bloqueur de contenu – modifiez le niveau de suivi et de blocage des publicités pour le site Web.
  • Champ d’adresse et de recherche : saisissez le lien que vous souhaitez visiter ou un terme de recherche que vous souhaitez rechercher.
  • Menu Vivaldi – accédez à des options telles que la page de signet, la page de capture, les paramètres et bien plus encore en appuyant sur le logo Vivaldi.

Pour déplacer la barre d’adresses en bas de l’écran :

  1. Allez dans les Bouton du menu Vivaldi onglets des paramètres >du menu > Vivaldi.
  2. Sélectionnez Bas pour Position de la barre d’adresse.

Lorsque vous déplacez la barre d’adresse vers le bas, il est recommandé d’inverser l’ordre dans lequel les suggestions de recherche sont affichées et de conserver la suggestion la plus pertinente la plus proche de la barre d’adresse.

Pour inverser l’ordre des suggestions de recherche :

  1. Allez dans les onglets des paramètres >du menu > Vivaldi.
  2. Assurez-vous que l’option Bas est sélectionnée pour la position de la barre d’adresse.
  3. Dans Suggestions de recherche, activez l’option Inverser l’ordre des suggestions de recherche.

Barre d’outils inférieure

Lorsque vous avez déplacé la barre d’adresse vers le bas, il y aura deux barres d’outils en bas de l’écran. Si vous avez activé la barre d’onglets, en bas de l’écran, la barre d’onglets remplacera la barre d’outils inférieure.

En mode paysage et sur des écrans plus grands, comme sur l’iPad, toutes les icônes de la barre d’outils inférieure sont déplacées vers la barre d’adresse.

Vivaldi sur iOS en mode paysage sur un iPad.

Panneau Sessions

Les sessions sont un moyen de stocker vos onglets ouverts pour y accéder facilement plus tard. Il vous permet de fermer certains onglets inutilisés ou de les fermer tous, libérant ainsi de la mémoire et des ressources sur votre ordinateur. Une session peut contenir des onglets d’une seule fenêtre, toutes vos fenêtres et, éventuellement, vos espaces de travail. Découvrez comment gérer vos sessions à l’aide du panneau Sessions.

Accéder au panneau Sessions

Pour ouvrir le panneau Sessions :

Navigateur Vivaldi avec panneau Sessions ouvert et mis en surbrillance.

Ajouter une nouvelle session enregistrée

Pour enregistrer des onglets en tant que session via le panneau Sessions :

  1. Ouvrez le panneau Sessions.
  2. Cliquez sur Enregistrer les onglets en tant que sessions dans le coin supérieur droit du panneau.
  3. Donnez un nom à la session.
  4. Décidez d’inclure ou non les onglets de tous les espaces de travail de la session et d’enregistrer les onglets de toutes les fenêtres ou uniquement de la fenêtre actuelle.
  5. Appuyez sur Enregistrer.

Afficher et modifier des sessions

Pour afficher et modifier le contenu d’une session enregistrée :

  1. Ouvrez le panneau Sessions.
  2. Sélectionnez une session.
  3. Cliquez sur Modifier la session dans le coin supérieur droit du panneau.

Vous pouvez réorganiser, renommer et supprimer des onglets comme vous le feriez avec la session active dans le panneau Windows.


Enregistrement automatique des sessions

Pour sauvegarder automatiquement tous vos onglets ouverts en tant que session une fois toutes les heures :

  1. En bas du panneau, cliquez sur Sauvegarde automatique de session.
  2. Sélectionnez le nombre de jours de sauvegardes que vous souhaitez conserver :
    • Dernier jour
    • 3 derniers jours
    • 5 derniers jours
    • 30 derniers jours

Suppression d’une session enregistrée

Pour supprimer une session :

  1. Ouvrez le panneau Sessions.
  2. Sélectionnez une session que vous souhaitez supprimer.
  3. Cliquez sur Supprimer la session dans le coin supérieur droit du panneau.

Vous pouvez également cliquer avec le bouton droit de la souris sur la session et sélectionner Supprimer dans le menu contextuel.

Thèmes dans Vivaldi sur iOS

Vivaldi sur ordinateur est connu pour ses nombreuses options de personnalisation et nous en avons également apporté beaucoup à Vivaldi sur iOS.

Pour modifier le thème du navigateur dans Vivaldi sur iOS :

  1. Allez dans le menu > Vivaldi Paramètres > Thème d’apparence>Bouton du menu Vivaldi.
  2. Choisissez entre:
    • en suivant le système,
    • Thème clair,
    • Thème sombre.

Si vous choisissez le thème clair, les barres d’outils du navigateur adapteront ses couleurs d’accentuation en fonction des couleurs du site Web.

3 sites Web différents avec 3 couleurs d’accentuation différentes.

Fonds d’écran de la page d’accueil personnalisés

Tout comme sur le bureau, vous pouvez sélectionner un fond d’écran préchargé pour décorer la page d’accueil ou utiliser votre propre image.

Pour mettre à jour le fond d’écran :

  1. Allez dans le menu > Vivaldi Paramètres > Apparence > Fonds d’écran.
  2. Appuyez sur le fond d’écran de votre choix ou sur le bouton + pour sélectionner une image dans vos photos.