Neu in Chrome 62

Pete LePage

Und es gibt noch viel mehr!

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

Vollständige Liste der Änderungen ansehen Liste der Änderungen am Chromium-Quell-Repository

Netzwerkqualitäts-Indikator

Die Network Information API ist seit einiger Zeit in Chrome verfügbar, bietet jedoch nur theoretische Netzwerkgeschwindigkeiten basierend auf der Verbindung des Nutzers. Angenommen, Sie sind mit einem WLAN verbunden, aber mit einem Mobilfunk-Hotspot, der nur eine 2G-Geschwindigkeit hat. Die API würde „WLAN“ melden.

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

In Chrome 62 wurde die API erweitert, um tatsächliche Netzwerkleistungsmesswerte vom Client bereitzustellen. Anhand dieser Signale zur Netzwerkqualität kannst du 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 im Vergleich zu einer Mobilfunkverbindung zurück. Wenn Sie beispielsweise mit einer superschnellen Glasfaserverbindung verbunden sind, meldet die API 4G.

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

Diese Signale sind auch als HTTP-Anfrageheader verfügbar und werden über Client-Hinweise aktiviert. Weitere Informationen findest du im Beispiel und in der Spezifikation.

OpenType-Variable-Schriftarten

Traditionell enthielt eine Schriftart nur eine einzige Instanz einer Schriftfamilie, z. B. eine Schriftstärke oder einen Schriftschnitt. Wenn Sie eine normale, fett formatierte und kursive Schrift verwenden möchten, müssten Sie drei separate Schriftarten einfügen, was die Textmenge auf Ihrer Seite erhöht.

Eine variable OpenType-Schriftart entspricht mehreren einzelnen Schriftarten, die in einer einzigen Schriftdatei kompakt verpackt werden können. Durch Anpassung der CSS-Eigenschaft font-variation-settings lassen sich unter anderem Stretch, Stil und Gewicht ganz einfach anpassen und so eine unendliche Anzahl von Stilvarianten erstellen. 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;
}

Mit OpenType-Variable-Fonts haben wir ein leistungsstarkes neues Tool, mit dem wir responsive Typografie erstellen und das Seitengewicht reduzieren können. Weitere Informationen finden Sie im Artikel Introducing OpenType Variable Fonts von John Hudson.

Medienerfassung über DOM-Elemente

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

Nach dem Aufrufen von captureStream() für ein HTML-Mediaelement kann der gestreamte Inhalt bearbeitet, verarbeitet, per Fernzugriff gesendet oder aufgezeichnet werden. Stellen Sie sich vor, Sie könnten mit Web Audio Ihren eigenen Equalizer oder Vocoder erstellen. Sie können die Inhalte auch mit WebRTC auf eine Remote-Website streamen. Die Möglichkeiten sind nahezu endlos.

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

Wie wir bereits angekündigt haben, werden ab Chrome 62 HTTP-Seiten, auf denen Nutzer Daten eingeben, in Chrome mit einem Label in der Adressleiste als „Nicht sicher“ gekennzeichnet. Dieses Label wird auch im Inkognitomodus für alle HTTP-Seiten angezeigt.

…und vieles mehr

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

Wenn du unseren YouTube-Kanal abonnierst, erhältst du eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 63 veröffentlicht ist, erzähle ich Ihnen gleich, was es Neues bei Chrome gibt.