Neu in Chrome 71

Pete LePage

In Chrome 71 haben wir Unterstützung für Folgendes hinzugefügt:

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 71 für Entwickler neu ist.

Änderungsprotokoll

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 71.

Relative Zeiten mit Intl.RelativeTimeFormat() anzeigen

Twitter mit relativer Zeit für den neuesten Beitrag

Viele Webanwendungen verwenden Begriffe wie „gestern“, „in zwei Tagen“ oder „vor einer Stunde“, um anzugeben, wann etwas passiert ist oder passieren wird, anstatt das vollständige Datum und die Uhrzeit anzuzeigen.

Die Anzeige relativer Zeiten ist so weit verbreitet, dass die meisten gängigen Bibliotheken für Datum und Uhrzeit lokalisierte Funktionen für diese Aufgabe bereitstellen. In fast jeder Webanwendung, die ich entwickele, ist Moment JS eine der ersten Bibliotheken, die ich speziell zu diesem Zweck hinzufüge.

In Chrome 71 wird Intl.RelativeTimeFormat() eingeführt. Damit wird die Arbeit an die JavaScript-Engine übertragen und es ermöglicht die lokalisierte Formatierung relativer Uhrzeiten. Das führt zu einer kleinen Leistungssteigerung und bedeutet, dass wir diese Bibliotheken nur als Polyfill benötigen, wenn ein Browser die neuen APIs noch nicht unterstützt.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Die Verwendung ist ganz einfach: Erstellen Sie eine neue Instanz, geben Sie das Gebietsschema an und rufen Sie dann „format“ mit der relativen Zeit auf. Ausführliche Informationen findest du im Blogpost The Intl.RelativeTimeFormat API von Mathias.

Unterstrich für vertikalen Text angeben

Vertikaler Text mit inkonsistenten Unterstreichungen

Wenn chinesischer oder japanischer Text in einem vertikalen Fluss angezeigt wird, sind Browser nicht einheitlich bei der Platzierung des Unterstrichs. Er kann links oder rechts platziert werden.

In Chrome 71 werden für die Eigenschaft text-underline-position jetzt left oder right als Teil der CSS3-Textdekorationsspezifikation akzeptiert. Die CSS3-Textdekorationsspezifikation enthält mehrere neue Eigenschaften, mit denen Sie beispielsweise die Art der Linie, den Stil, die Farbe und die Position angeben können.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Sprachsynthese erfordert eine Nutzeraktivierung

Wir alle waren schon einmal überrascht, wenn wir eine Website aufgerufen haben und sie plötzlich mit uns zu sprechen beginnt. Autoplay-Richtlinien verhindern, dass auf Websites automatisch Audio- oder Videodateien mit Audio abgespielt werden. Einige Websites haben versucht, dies zu umgehen, indem sie stattdessen die Sprachsynthese API verwendet haben.

Ab Chrome 71 muss die Sprachsynthese-API auf der Seite in irgendeiner Weise aktiviert werden, bevor sie funktioniert. Damit entspricht sie anderen Richtlinien zu automatischer Wiedergabe. Wenn Sie versuchen, es zu verwenden, bevor der Nutzer mit der Seite interagiert hat, wird ein Fehler ausgelöst.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Es gibt nichts Schlimmeres, als eine Website zu besuchen und Sie und die Kollegen um Sie herum zu überraschen.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 71 für Entwickler. Es gibt natürlich noch viele weitere.

  • Die Methode Element.requestFullscreen() kann jetzt unter Android angepasst werden. Du kannst auswählen, ob die Navigationsleiste sichtbar oder ein vollständiger Modus ist, in dem keine User-Agent-Steuerelemente angezeigt werden, bis eine Nutzergeste ausgeführt wird.
  • Der Standardmodus für Anmeldedaten für Modulscriptanfragen wurde von omit zu same-origin geändert.
  • Außerdem wird in Chrome 71 die Spezifität für die Pseudoklassen :host() und :host-context() sowie für die Argumente für ::slotted() gemäß der Shadow DOM v1-Spezifikation berechnet.

Videos vom Chrome DevSummit

Wenn Sie nicht am Chrome Dev Summit teilnehmen konnten oder die Vorträge verpasst haben, sehen Sie sich die Playlist zum Chrome Dev Summit 2018 auf unserem YouTube-Kanal an.

Eva und Phil haben in Mit Service Workern schnellere, stabilere Anwendungen entwickeln einige praktische Techniken für den Einsatz von Service Workern kennengelernt.

Mariko und Jake haben darüber gesprochen, wie sie Squoosh entwickelt haben, in Complex JS-heavy Web Apps, Avoiding the Slow.

Katie und Houssein haben in Speed Essentials: Key Techniques for Fast Websites (Grundlagen der Geschwindigkeit: Wichtige Techniken für schnelle Websites) einige tolle Techniken zur Leistungsoptimierung Ihrer Website vorgestellt.

Jake hat den Kuchen fallengelassen. In der Playlist zum Chrome DevSummit 2018 finden Sie noch viele weitere interessante Videos.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 72 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.