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 es Neues für Entwickler in Chrome 71 gibt.

Änderungsprotokoll

Dies sind nur einige der wichtigsten Änderungen. Über die Links unten finden Sie weitere Änderungen in Chrome 71.

Relative Zeiten mit Intl.RelativeTimeFormat() anzeigen

Twitter showing relative time for latest post

Viele Web-Apps 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 Uhrzeit anzuzeigen.

Die Anzeige relativer Zeitangaben ist so üblich geworden, dass die meisten gängigen Datums-/Zeitbibliotheken lokalisierte Funktionen dafür bereitstellen. Tatsächlich ist Moment JS in fast jeder Webanwendung, die ich entwickle, eine der ersten Bibliotheken, die ich genau für diesen Zweck hinzufüge.

In Chrome 71 wird Intl.RelativeTimeFormat() eingeführt, wodurch die Arbeit auf die JavaScript-Engine verlagert wird und die lokalisierte Formatierung relativer Zeitangaben möglich ist. Das führt zu einer leichten 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 und geben Sie das Gebietsschema an. Rufen Sie dann einfach „format“ mit der relativen Zeit auf. Weitere Informationen finden Sie im Beitrag von Mathias.Intl.RelativeTimeFormat API

Unterstreichungsposition für vertikalen Text angeben

Vertikaler Text mit inkonsistenten Unterstreichungen

Wenn chinesischer oder japanischer Text in einem vertikalen Fluss angezeigt wird, ist die Position der Unterstreichung in Browsern nicht einheitlich. Sie kann sich links oder rechts befinden.

In Chrome 71 akzeptiert die Eigenschaft text-underline-position jetzt left oder right als Teil der CSS3-Spezifikation für Textdekoration. Die CSS3-Spezifikation für Textdekoration fügt mehrere neue Eigenschaften hinzu, 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 Nutzeraktivierung

Wir alle haben schon einmal eine Website besucht, die plötzlich angefangen hat, mit uns zu sprechen. Richtlinien zur automatischen Wiedergabe verhindern, dass Websites Audio- oder Videodateien mit Audio automatisch abspielen. Einige Websites haben versucht, dies zu umgehen, indem sie stattdessen die Sprachsynthese-API verwendet haben.

Ab Chrome 71 ist für die Speech Synthesis API eine Nutzeraktivierung auf der Seite erforderlich, damit sie funktioniert. Damit wird die Richtlinie an andere Richtlinien zur automatischen Wiedergabe angeglichen. Wenn Sie versuchen, die Funktion 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 dann überrascht zu werden – und die Kollegen, die um Sie herum sitzen.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 71 für Entwickler.

  • Die Methode Element.requestFullscreen() kann jetzt auf Android angepasst werden. Sie können wählen, ob die Navigationsleiste sichtbar sein soll oder ob ein vollständig immersiver Modus verwendet werden soll, in dem keine User-Agent-Steuerelemente angezeigt werden, bis eine Nutzeraktion ausgeführt wird.
  • Der Standardmodus für Anmeldedaten für Modulskriptanfragen wurde von omit zu same-origin geändert.
  • Um Chrome an die Shadow DOM v1-Spezifikation anzupassen, wird in Chrome 71 die Spezifität für die Pseudoklassen :host() und :host-context() sowie für die Argumente für ::slotted() berechnet.

Videos vom Chrome DevSummit

Wenn Sie nicht am Chrome Dev Summit teilnehmen konnten oder vielleicht doch, aber nicht alle Vorträge gesehen haben, finden Sie auf unserem YouTube-Kanal die Playlist zum Chrome Dev Summit 2018.

Eva und Phil haben in Building Faster, More Resilient Apps with Service Workers einige interessante Techniken zur Verwendung von Service Workern vorgestellt.

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

Katie und Houssein haben in Speed Essentials: Key Techniques for Fast Websites einige tolle Techniken zur Maximierung der Leistung Ihrer Website vorgestellt.

Jake hat den Kuchen fallen gelassen. In der Playlist zum Chrome DevSummit 2018 finden Sie 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, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 72 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.