Vivaldi Tab-Benachrichtigungen für Webentwickler

Produkte: Vivaldi nur für Desktop-PCs.

Mithilfe von Tabbenachrichtigungen können Webseiten Benutzern kurze numerische Statuszusammenfassungen übermitteln. Beispiele hierfür sind die Anzeige neuer ungelesener Nachrichten, E-Mails oder Nachrichten. unbearbeitete Aufgaben oder Rechnungen; oder die Anzahl der Artikel, die in einen Warenkorb gelegt wurden.

Tab-Benachrichtigungen werden als numerische Badges über dem Favicon des Dokuments in der Tab-Leiste und in den Web-Panels angezeigt.

Vivaldi erkennt numerische Zähler am Anfang des Dokumenttitels, wenn sie in Klammern ( und U+0029 RIGHT PARENTHES) eingeschlossen und durch ein Leerzeichen (U+0028 LEFT PARENTHESISU+0020 SPACE) vom Rest des Titels getrennt sind. Beispiel:

<title>(7) Webmail</title>

Der Tab „Benachrichtigungen“ ist standardmäßig aktiviert, kann aber von Benutzern deaktiviert werden.

Das Badge wird dynamisch aktualisiert, wenn sich der Titel des Dokuments ändert. Um die beste Leistung zu erzielen, aktualisieren Sie die Eigenschaft oder die document.title Eigenschaft des <title> Elements innerText . Das Ersetzen des Elements kann dazu führen, dass sich die Aktualisierung des <title> Badges verzögert.

Zahlen mit zwei oder mehr Ziffern können aus Platzgründen als Pluszeichen anstelle eines numerischen Zeichens angezeigt werden.

Der numerische Zähler wird aus dem Dokumenttitel in Benutzeroberflächen entfernt, in denen das Badge angezeigt wird. Die Zeichenfolge „“(0) wird aus Titeln entfernt, erzeugt aber kein Abzeichen.

Tab-Benachrichtigungen werden nur anhand des Dokumenttitels des obersten Rahmens erkannt (keine Rahmen).

Deaktivieren von Tab-Benachrichtigungen

Sie können Tab-Benachrichtigungen in einem Dokument deaktivieren, indem Sie dem Titel ein Leerzeichen mitU+200B ZERO WIDTH SPACE einer Breite von Null () voranstellen. Beispiel:

<title>&#x200b;​(1195) Step Counter</title>

Vivaldi Link-Drag-and-Select-Verhalten für Webentwickler

Produkte: Vivaldi nur für Desktop-PCs.

Mit Vivaldi können Benutzer entweder Text innerhalb von Links auswählen oder die Links verschieben. Das Verhalten in Vivaldi unterscheidet sich von der Standardeinstellung in anderen Blink (Chromium)-Browsern.

Benutzer können Text in Links auswählen, indem sie auf einen Link klicken und ihn nach links oder rechts ziehen. Das Link-Element kann gezogen werden, wenn es nach oben oder unten gezogen wird.

Um einen Link explizit immer in eine beliebige Richtung ziehbar zu machen, legen Sie sein draggable Attribut auf truefest. Beispiel:

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

Um den Text eines Links explizit immer in jede Richtung auswählbar zu machen, legen Sie sein draggable Attribut auf falsefest. Beispiel:

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

Wenn Links nicht explizit gezogen werden können (Standardeinstellung), wird die CSS-Eigenschaft user-select ignoriert, und ihre cursor Eigenschaft kann ignoriert werden.

Bewährte Absenderpraktiken für Vivaldi Mail

Produkte: Vivaldi nur für Desktop-PCs.

Vivaldi Mail ist ein voll ausgestatteter E-Mail-Client. Die Zustellbarkeit von E-Mails und die Filterung potenziell unerwünschter Nachrichten wird dem E-Mail-Server des Benutzers überlassen.

Dieses Dokument beschreibt Besonderheiten für Absender, die eine gute Empfängererfahrung und Kompatibilität mit Vivaldi Mail sicherstellen möchten


E-Mail-Rendering

Vivaldi Mail rendert E-Mails mit der Chromium Blink Rendering Engine.

Vivaldi Mail blockiert standardmäßig das Laden externer Ressourcen. Benutzer werden aufgefordert, das Laden externer Ressourcen pro Absenderadresse zu genehmigen.

Betten Sie kleine und wichtige Bilder wie ein Logo oder Symbol in die E-Mail selbst ein, um sicherzustellen, dass sie geladen wird. Fügen Sie Textalternativen (alt Eigenschaften) ein, die als Platzhalter für andere externe Bilder dienen.

Vivaldi Mail wandelt reine HTML-E-Mails in reinen Text um, wenn der Benutzer es vorzieht, reinen Text zu lesen. Bei der Konvertierung werden Verknüpfungen beibehalten und Bilder als alt Eigenschaftstext gerendert. Sie können verhindern, dass ein Bild in der Nur-Text-Konvertierung dargestellt wird, indem Sie es explizit als dekorativ (alt=„“) markieren.

Um das beste Ergebnis zu erzielen, stellen Sie eine sorgfältiger gestaltete Nur-Text-Alternativversion Ihrer HTML-Nachricht bereit.


Dunkler Modus

Vivaldi Mail folgt den Farbschema-Präferenzen des Benutzers und rendert E-Mail-Nachrichten entsprechend.

Sie können die hellen und dunklen Modusvarianten Ihrer Nachricht mit der Medienabfrage “ Bevorzugtes Farbschema“ des Webstandards formatieren. Beispiel:

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

Deaktivieren Sie den automatischen Dunkelmodus

Vivaldi Mail kann automatisch ein dunkles Farbschema anwenden, wenn Ihre E-Mail keine Informationen zum Farbschema enthält.

Sie können den automatischen Dunkelmodus in einer E-Mail-Nachricht deaktivieren, indem Sie ihn explizit nur als hellen Modus deklarieren.

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

Mehrteilige Auswahl

Vivaldi Mail unterstützt nicht das Kombinieren mehrerer multipart/related Teile oder andere komplexe und ungewöhnliche mehrteilige Nachrichten. Es wird der größte (in Bytes) geeignete Teil des bevorzugten Typs in einem multipart/alternative Satz ausgewählt.


Phishing-Warnungen

Vivaldi Mail zeigt eine Identitätswechsel-/Phishing-Warnung an, wenn der Name in den Feldern „Von“ oder „Antwort an“ einer anderen E-Mail-Adresse als der zugehörigen Absenderadresse ähnelt. Senden Sie stattdessen mit einem menschenlesbaren Namen oder ohne festgelegte Namen.

Vivaldi Mail zeigt eine Identitätswechsel-/Phishing-Warnung an, wenn sich die E-Mail-Adressen in den Feldern „Von“ und „Antwort an“ unter unterschiedlichen Domainnamen (einschließlich Subdomains) befinden. Vivaldi Mail zeigt immer eine Imitations-/Phishing-Warnung an, wenn sich eine der beiden Adressen auf einer gemeinsamen persönlichen Mailer-Domain befindet (z. B. gmail.com und icloud.com).


Einfädelnd

Vivaldi Mail ist auf E-Mail-Threads ausgelegt. Threading stellt sicher, dass verwandte E-Mails gruppiert und gemeinsam angezeigt werden. Vivaldi Mail folgt den Standard-E-Mail-Threading-Konventionen, wie in RFC 5322 Abschnitt 3.6.4 beschrieben.

Bitte erwägen Sie die Einführung von E-Mail-Threading für Ihre automatisierten Statusaktualisierungen von Transaktions-E-Mails. Z.B. sollte eine Bestellbestätigung eine Antwort auf die Bestellbestätigungs-E-Mail sein.


Kalender-Einladungen

Vivaldi Mail verarbeitet Anhänge von Kalenderereignissen im Dateiformat iCalendar (RFC 5545) und fordert den Benutzer auf, auf ausstehende Einladungen zu antworten (RSVP).

Alternativ können Sie eine Verknüpfung zu Ereignisdateien auf einem Webserver herstellen. Weitere Informationen finden Sie unter Integration mit Vivaldi Calendar für Webentwickler.

Vivaldi-Lesezeichen-Metadaten für Webentwickler

Produkte: Vivaldi für Desktop

Vivaldi bezieht Metadaten für Lesezeichen aus den HTML-Standard-Metadatenelementen und aus den Metadaten des Open Graph Protocol. Diese Metadaten werden verwendet, um Werte vorab auszufüllen, wenn der Benutzer ein neues Lesezeichen erstellt.

Der Titel des Lesezeichens stammt aus:

  1. Der Dokumenttitel des <title> Elements.
  2. Der Titel des Open Graph Protocol (og:title).

Die Beschreibung des Lesezeichens stammt aus:

  1. Die Beschreibung des Open Graph Protocol (og:description).
  2. Die Dokumentbeschreibung des <meta name="description"> Elements.

Die Open Graph Protocol-Beschreibung wird bevorzugt, da sie oft eine qualitativ hochwertigere Zusammenfassung der Seite darstellt als die HTML-Standard-Beschreibung. Letzteres ist oft zu lang oder wird missbraucht, um Seitenschlüsselwörter anstelle einer schriftlichen Zusammenfassung oder Beschreibung aufzulisten.

Vivaldi für Android und Vivaldi für iOS verwenden nur die HTML-Standard-Elemente.

Integration mit Vivaldi Kalender für Webentwickler

Produkte: Vivaldi nur für Desktop-PCs.

Vivaldi Kalendar ist ein voll funktionsfähiger Kalender-Client, der in den Vivaldi Browser integriert ist. Benutzer können Kalenderfeeds abonnieren oder ein einzelnes Ereignis oder eine Gruppe von Ereignissen zu ihren Kalenderplänen hinzufügen.

Sowohl Kalenderfeeds als auch Ereignisdateien verwenden das iCalendar-Dateiformat (RFC 5545).


Aufforderung zum Hinzufügen von Ereignissen zum Vivaldi-Kalender

Um einen Benutzer aufzufordern, ein Ereignis zu seinen Kalendern hinzuzufügen, erstellen Sie einen Link mit dem https (empfohlenen) oder http URI-Schema. Beispiel:

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

Aufforderung zum Abonnieren des Kalenders in Vivaldi Calendar

Um einen Benutzer aufzufordern, einem neuen Kalenderfeed zu folgen, erstellen Sie mithilfe des URI-Schemas webcal einen Link dazu. Beispiel:

webcal://example.com/holidays.ics

Vivaldi übernimmt und unterstützt nur das HTTPS-Protokoll für Kalenderabonnements.

Vivaldi fragt alle 10 Minuten Kalenderabonnements nach Aktualisierungen ab. Stellen Sie sicher, dass Ihr Kalenderserver geeignete HTTP-Cache-Antwortheader setzt und die Cache-Revalidierung unterstützt, um die Last auf dem Server zu reduzieren (siehe RFC 9111).

Vivaldi Adaptive Theme-Farben für Webentwickler

Produkte: Vivaldi für Desktop, Android und iOS.

Mit adaptiven Designfarben können Webseiten die Akzentfarbe im Browser-Chrome festlegen, einschließlich der Titelleiste, der Tab-Leiste, der Adressleiste, der Statusleiste und mehr. So wenden Sie beispielsweise ein helles Matcha-Grün-Farbthema auf das Browser-Chrome an:

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

Vivaldi verwendet das erste benannte <meta> Element im Dokument.

Adaptive Designfarben sind standardmäßig aktiviert. Die Funktion kann durch benutzerdefinierte Designs deaktiviert werden.

In Vivaldi für den Desktop und Vivaldi für Android können Sie mit den entsprechenden Medienabfragen unterschiedliche Farben für helle und dunkle Designfarbeinstellungen festlegen. So wenden Sie z. B. eine helle Matcha-grüne Designfarbe im hellen Modus und eine dunkle Matcha-grüne Designfarbe im dunklen Modus an:

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

In Vivaldi für Android und Vivaldi für iOS werden dynamische Aktualisierungen der content Eigenschaften ignoriert. Die Designfarbe auf diesen Plattformen wird nur während der anfänglichen Dokumentinitialisierung festgelegt.

In Vivaldi für den Desktop können sich schnelle Änderungen der Designfarbe verzögern. Sie sollten sicherstellen, dass Ihr Dokument seine Designfarbe nicht zu oft ändert

Der Farbton oder die Sättigung einiger Designfarben kann leicht angepasst werden, um einen ausreichenden Kontrast zum Symbolleistentext und den Symbolen zu gewährleisten.

Vivaldi Schnellvorlauf für Webentwickler

Produkte: Vivaldi nur für Desktop-PCs.

Mit dem schnellen Vorlauf können Benutzer von einem Dokument zum nächsten verwandten Dokument in einer Serie navigieren. Beispiele hierfür sind das Navigieren zur nächsten Seite eines Buchs, einer Suchergebnisseite, eines Forums oder eines Bildes in einer Galerie.

Der schnelle Vorlauf wird aktiviert, indem Sie die Leertaste (standardmäßig aktiviert) am unteren Rand des Dokuments drücken oder die Schaltfläche „Schneller Vorlauf“ oder den Schnellbefehl verwenden.

Vivaldi erkennt das nächste Dokument in einer Serie mit verschiedenen Methoden:

  1. (Bevorzugter Webstandard.) Das erste <link> Element mit einer rel="next" Eigenschaft im Dokument.
  2. Das erste <a> Element mit einer rel="next" Eigenschaft im Dokument.
  3. Das letzte <a> Element mit der exakten Zeichenfolge „Next“ oder „Next Page“ (oder lokalisierte Entsprechungen) im Dokument. title Die aria-label und-Eigenschaften werden ebenfalls berücksichtigt. Es werden nur die letzten 1000 <a> Elemente berücksichtigt.

Die Schnellvorlauf-Erkennung erfolgt nur beim ersten Laden des Dokuments. Dynamische Einfügungen später werden von Vivaldi nicht erkannt. Der schnelle Vorlauf wird dynamisch aktualisiert, wenn die href Eigenschaft eines Elements aktualisiert wird.

Versehentliche Navigation im Schnellvorlauf

Der schnelle Vorlauf kann versehentlich in einem kompatiblen Dokument ausgelöst werden, insbesondere bei Dokumenten und Web-Apps wie Spielen, die mit dem Tastenereignis "Leertaste “ interagieren möchten.

Eine versehentliche Navigation kann auftreten, wenn ein Dokument ein Tastaturereignis verarbeitet, das Ereignis jedoch nicht verarbeitet werden kann, nachdem darauf reagiert wurde. Stellen Sie sicher, dass Sie in Ihrem Event-Handler preventDefault() , um dem Browser zu signalisieren, dass auf das Tastaturereignis reagiert und es genutzt wurde. Dies geschieht automatisch, wenn Standardformularsteuerelemente wie <input> und <textarea>verwendet werden.

Es ist wichtig, die Kompatibilität mit dem schnellen Vorlauf, Einzeltastenkombinationen und anderen barrierefreien Tastaturfunktionen zu testen und sicherzustellen.

Vivaldi Web Panels für Webentwickler

Produkte: Vivaldi für Desktop.

Web Panels sind eine spezielle Art von persistenten Tabs, die Benutzer in Vivaldi zu ihrem Seitenbereich hinzufügen können.

Ein Web-Panel lädt eine vom Benutzer bereitgestellte URL in eine schmale Spalte im Seitenbereich. Web-Panels werden mit einem mobilen User-Agent geladen, um ihrem schmalen, mobilähnlichen Viewport zu entsprechen. Dokumente und Web-Apps, die für mobile Geräte optimiert sind, sollten als Web-Panels gut funktionieren.

Web-Panels können numerische Statusinformationen über Tab-Benachrichtigungen und andere Statusinformationen kommunizieren, indem sie ihre Tab-Symbole („Favicon“) dynamisch aktualisieren.

Potenziell störende dialoggesteuerte APIs, z. B alert() . und prompt(), sind nicht verfügbar.

Web Panels werden in einem freigegebenen Kontext mit regulären Tabs ausgeführt. Web Panels können den Benutzer nicht zur Eingabe neuer Berechtigungen auffordern, sondern erteilte Berechtigungen, die ihrem Ursprung bereits erteilt wurden, in einem regulären Tab freigeben.

Leistungsfähigere und integrierte Panel-Erlebnisse können mithilfe der API erstellt werden, die chrome.sidePanelfür Erweiterungen verfügbar ist.

Vivaldi Sync: auf all Ihren Geräten

Vivaldi Sync sorgt dafür, dass Ihre Daten zwischen Ihren Computern, Tablets und Smartphones zugänglich sind. Egal, ob Sie auf dem Desktop, Android, iPhone, iPad oder im Auto surfen, wir sorgen dafür, dass Ihre Lesezeichen, Passwörter, der eingegebene Verlauf, die geöffneten Tabs, die Leseliste und die Notizen immer synchron sind.

Beiträge auf Vivaldi Social übersetzen

Vivaldi Social bringt Sprecher vieler Sprachen zusammen. Es ist zwar faszinierend zu wissen, was die Menschen in verschiedenen Teilen der Welt so treiben, aber es kann eine Herausforderung sein, wenn man ihre Sprache nicht spricht.

Um Ihnen zu helfen, Sprachbarrieren zu überwinden, nutzt Vivaldi Social den Übersetzungsdienst von Lingvanex, einen Dienst, der denjenigen vertraut ist, die den Vivaldi-Browser verwenden.

Beiträge übersetzen

Beiträge auf Vivaldi Social werden in die Sprache übersetzt, die Sie für Ihre Benutzeroberfläche ausgewählt haben. Sie können die Sprache der Benutzeroberfläche unter Einstellungen>, Darstellung>, Sprache der Benutzeroberfläche ändern.

So übersetzen Sie Inhalte:

  1. Suchen Sie einen Beitrag auf Vivaldi Social, den Sie übersetzen möchten.
  2. Klicken Sie auf die Schaltfläche Übersetzen unter dem Beitrag.
  3. Klicken Sie auf Original anzeigen, um zum Originaltext zurückzukehren.

Wenn ein Beitrag in einer anderen Sprache verfasst ist, aber keine Option zum Übersetzen angezeigt wird, hat der Autor des Beitrags nicht die richtige Sprache für seinen Beitrag festgelegt. In diesem Fall können Sie den eingebauten Übersetzer im Vivaldi-Browser verwenden, um den Beitrag zu übersetzen.


Machen Sie Ihre Beiträge übersetzbar

Um sicherzustellen, dass Ihre Beiträge übersetzbar sind, stellen Sie immer sicher, dass Sie eine passende Sprache für den Text Ihres Beitrags ausgewählt haben.

Legen Sie eine Standard-Posting-Sprache fest:

  1. Gehen Sie zu Einstellungen > Andere > Posting-Standardeinstellungen Posting-Sprache>.
  2. Wählen Sie die Sprache aus, in der Sie am häufigsten posten.

Wenn du in einer anderen Sprache als deiner Standardsprache postest, ändere die Spracheinstellungen im Beitragseditor:

  1. Klicken Sie unterhalb des Textfeldes auf den aktuellen Sprachcode (z. B. ).
  2. Wählen Sie im Dropdown-Menü die Sprache aus, in der Sie posten.