Neu in Chrome 62

Pete LePage

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 62 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Liste der Änderungen im Chromium-Quell-Repository

Netzwerkqualitätsindikator

Die Network Information API ist schon seit einiger Zeit in Chrome verfügbar, liefert aber nur theoretische Netzwerkgeschwindigkeiten basierend auf der Verbindung des Nutzers. Stellen Sie sich vor, Sie sind mit einem WLAN verbunden, aber auch mit einem Mobilfunk-Hotspot, der nur 2G-Geschwindigkeiten bietet. Die API würde WLAN melden.

console.log(navigator.connection.type);
> wifi

In Chrome 62 wurde die API erweitert, um Messwerte zur tatsächlichen Netzwerkleistung vom Client bereitzustellen. Mithilfe dieser Signale zur Netzwerkqualität können Sie Inhalte an das Netzwerk anpassen. Bei sehr langsamen Verbindungen können Sie beispielsweise die Seitenladeleistung verbessern, indem Sie eine reduzierte Version bereitstellen.

Um die Anwendungslogik zu vereinfachen, gibt die API die gemessene Netzwerkleistung in Bezug auf einen Vergleich mit einer Mobilfunkverbindung zurück. Wenn das Gerät beispielsweise mit einer superschnellen Glasfaserverbindung verbunden ist, meldet die API 4G.

console.log(navigator.connection.effectiveType);
> 4G

Diese Signale sind auch als HTTP-Anfrageheader verfügbar und werden über Client Hints aktiviert. Beispiel – Spezifikation

Variable OpenType-Schriftarten

Bisher enthielt eine Schriftart nur eine Instanz einer Schriftfamilie, z. B. eine Stärke oder eine Weite. Wenn Sie die Schriftarten „Normal“, „Fett“ und „Kursiv“ verwenden möchten, müssen Sie drei separate Schriftarten einbinden, was die Größe Ihrer Seite erhöht.

Eine OpenType-Variable-Schriftart entspricht mehreren einzelnen Schriftarten, die kompakt in einer einzigen Schriftartdatei zusammengefasst werden können. Durch Anpassen der CSS-Eigenschaft font-variation-settings können Sie ganz einfach die Dehnung, den Stil, die Stärke und vieles mehr anpassen und so unendlich viele stilistische Variationen erzielen. Diese drei Schriftarten können jetzt in einer einzigen, kompakten Datei kombiniert werden.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

OpenType-Schriftarten mit variablen Achsen sind ein leistungsstarkes neues Tool, mit dem wir responsive Typografie erstellen und die Seitengröße reduzieren können. Weitere Informationen finden Sie im Blogbeitrag Introducing OpenType Variable Fonts von John Hudson.

Media Capture von DOM-Elementen

Mit der Media Capture from DOM Elements API können Sie jetzt Inhalte wie Audio und Video direkt aus HTMLMediaElements in ein MediaStream aufnehmen.

Nachdem captureStream() für ein HTML-Media-Element aufgerufen wurde, können die gestreamten Inhalte bearbeitet, verarbeitet, remote gesendet oder aufgezeichnet werden. Stellen Sie sich vor, Sie verwenden Web Audio, um einen eigenen Equalizer oder Vocoder zu erstellen. Oder streamen Sie die Inhalte über WebRTC an einen Remote-Standort. Die Möglichkeiten sind nahezu endlos.

„Nicht sicher“-Labels für einige HTTP-Seiten

Wie bereits angekündigt, wird in Chrome 62 eine Seite als „Nicht sicher“ gekennzeichnet, wenn ein Nutzer Daten auf einer HTTP-Seite eingibt. In der Adressleiste wird dann ein entsprechendes Label angezeigt. Dieses Label wird auch im Inkognitomodus für alle HTTP-Seiten angezeigt.

…und vieles mehr

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

Abonniere dann unseren YouTube-Kanal, um per E-Mail benachrichtigt zu werden, wenn wir ein neues Video veröffentlichen.

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