Neu in Chrome 71

Pete LePage

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

• Die Anzeige von relativen Zeiten ist jetzt Teil der Intl API.
• Geben Sie an, auf welcher Seite des Texts der Unterstrich erscheinen soll, wenn der Text vertikal ausgerichtet ist.
• Nutzer muss die API aktivieren, bevor sie verwendet werden kann.

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 Links unten finden Sie weitere Änderungen in Chrome 71.

• Liste der Änderungen am Chromium-Quellcode-Repository
• ChromeStatus.com-Updates für Chrome 71
• Eingestellte und entfernte Funktionen in Chrome 71

Relative Zeiten mit Intl.RelativeTimeFormat() anzeigen

Twitter zeigt die relative Zeit für den letzten Beitrag an

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. Dadurch wird die Verarbeitung an die JavaScript-Engine übergeben und die lokalisierte Formatierung relativer Zeitangaben ermöglicht. 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 sich beispielsweise die Art der Linie, der Stil, die Farbe und die Position angeben lassen.

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

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

Sprachsynthese erfordert 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 ist für die Sprachsynthese-API eine Art Nutzeraktivierung auf der Seite erforderlich, damit sie funktioniert. Damit entspricht sie anderen Richtlinien zu automatischer Wiedergabe. Wenn Sie versuchen, sie zu verwenden, bevor der Nutzer mit der Seite interagiert hat, wird ein Fehler ausgegeben.

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

Hinweis:Damit Ihr Code funktioniert, empfehle ich, den Sprachsyntheseaufruf in einen try/catch-Block einzufügen. Wenn die Seite also nicht aktiviert ist, wird der Rest Ihrer App nicht beeinträchtigt.

Es gibt nichts Schlimmeres, als an einen Ort zu kommen und von etwas überrascht zu werden, das Sie und die Kollegen um Sie herum nicht erwartet haben.

…und vieles mehr

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

• Die Element.requestFullscreen()-Methode kann jetzt auf Android-Geräten angepasst werden. Sie können zwischen einer sichtbaren Navigationsleiste und einem Vollbildmodus wählen, 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 dort nicht alle Vorträge gesehen haben, sehen Sie sich die Playlist zum Chrome Dev Summit 2018 auf unserem YouTube-Kanal an.

Eva und Phil haben einige praktische Techniken zur Verwendung von Dienstprogrammen in Schnellere, resilientere Apps mit Dienstprogrammen erstellen vorgestellt.

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 gern, was es Neues in Chrome gibt.