Neu in Chrome 71

Pete LePage

Chrome 71 bietet Unterstützung für:

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Sehen wir uns an, was es für Entwickler in Chrome 71 Neues gibt.

Änderungsprotokoll

Hier werden nur einige der wichtigsten Highlights vorgestellt. Weitere Änderungen in Chrome 71 findest du unter den folgenden Links.

Relative Zeiten mit Intl.RelativeTimeFormat() anzeigen

Twitter zeigt die relative Zeit für den letzten Beitrag

Viele Webanwendungen verwenden Formulierungen 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 vollständige Uhrzeit anzuzeigen.

Die Anzeige relativer Zeiten ist so üblich, dass die meisten gängigen Datums-/Uhrzeitbibliotheken lokalisierte Funktionen für uns bereitstellen. Moment JS ist bei fast jeder Webanwendung, die ich erstelle, eine der ersten Bibliotheken, die ich ausdrücklich zu diesem Zweck hinzufüge.

In Chrome 71 wird Intl.RelativeTimeFormat() eingeführt. Damit wird die Arbeit auf die JavaScript-Engine übertragen und die lokalisierte Formatierung relativer Zeiten ermöglicht. Dies gibt uns einen kleinen Leistungsschub und bedeutet, dass wir diese Bibliotheken nur dann 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 einfach: Erstellen Sie eine neue Instanz und geben Sie die Sprache an. Rufen Sie dann einfach das Format mit der relativen Zeit auf. Weitere Informationen finden Sie im Beitrag Intl.RelativeTimeFormat API von Mathias.

Unterstreichen für vertikalen Text festlegen

Vertikaler Text mit uneinheitlichen Unterstreichungen

Wenn chinesischer oder japanischer Text vertikal angezeigt wird, stimmen die Browser nicht mit der Unterstreichung überein, zum Beispiel auf der linken oder rechten Seite.

In Chrome 71 akzeptiert die text-underline-position-Eigenschaft jetzt left oder right als Teil der CSS3-Spezifikation zur Textgestaltung. Die CSS3-Spezifikation zur Textgestaltung enthält mehrere neue Eigenschaften, mit denen beispielsweise angegeben werden kann, welche Linie verwendet werden soll, Stil, Farbe und Position.


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

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

Sprachsynthese erfordert Nutzeraktivierung

Wir waren alle überrascht, als wir eine Website aufrufen und sie uns plötzlich meldet. Richtlinien für die automatische Wiedergabe verhindern, dass Websites Audio- oder Videodateien mit Audio automatisch wiedergeben. Einige Websites haben versucht, dies mithilfe der Speech Synthesis API zu umgehen.

Ab Chrome 71 muss die Sprachsynthese-API auf der Seite aktiviert werden, bevor sie funktioniert. Dadurch stimmen sie mit anderen Richtlinien für die automatische Wiedergabe überein. 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 sich und die Mitarbeiter um Sie herum überraschen zu lassen.

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 71 für Entwickler. Und natürlich gibt es noch viel mehr.

  • Die Methode Element.requestFullscreen() kann jetzt unter Android angepasst werden. Sie haben dann die Wahl, ob die Navigationsleiste sichtbar oder im immersiven Modus ist, in dem erst dann User-Agent-Steuerelemente angezeigt werden, wenn eine Nutzergeste ausgeführt wird.
  • Der Standardmodus für Anmeldedaten für Modulskriptanfragen wurde von omit zu same-origin geändert.
  • Und da Chrome 71 an die Shadow DOM v1-Spezifikation angeglichen wird, berechnet Chrome 71 jetzt die Spezifität für die Pseudoklassen :host() und :host-context() sowie für die Argumente für ::slotted().

Videos zum Chrome DevSummit

Wenn Sie nicht am Chrome Dev Summit teilgenommen haben, aber nicht alle Vorträge gesehen haben, sehen Sie sich die Playlist des Chrome Dev Summit 2018 auf unserem YouTube-Kanal an.

Eva und Phil beschäftigten sich im Rahmen des Programms Schnellere, stabilere Anwendungen mit Service Workern erstellen über einige praktische Techniken für den Einsatz von Service Workern.

Mariko und Jake sprachen darüber, wie sie Squoosh in Komplexe, JS-lastige Webanwendungen, die keine Zeitlupe vermeiden.

Katie und Houssein haben in Speed Essentials: Key Techniques for Fast Websites einige großartige Techniken zur Maximierung der Websiteleistung vorgestellt.

Jake hat den Kuchen abgelegt. Die Playlist zum Chrome DevSummit 2018 enthält viele weitere tolle Videos, die Sie sich ansehen sollten.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 72 veröffentlicht wird, melde ich Sie, was es Neues bei Chrome gibt!