Neu in Chrome 62

Pete LePage

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 62 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

Indikator für Netzwerkqualität

Die Network Information API ist bereits seit einiger Zeit in Chrome verfügbar, stellt aber nur theoretische Netzwerkgeschwindigkeiten angesichts der Nutzerverbindung bereit. Angenommen, Sie nutzen WLAN, sind aber mit einem mobilen Hotspot mit nur 2G-Geschwindigkeit verbunden. Die API meldet WLAN.

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

In Chrome 62 wurde die API erweitert, um tatsächliche Messwerte zur Netzwerkleistung vom Client bereitzustellen. Mithilfe dieser Signale 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.

Zur Vereinfachung der Anwendungslogik gibt die API die gemessene Netzwerkleistung im Vergleich zu einer Mobilfunkverbindung zurück. Ist die API beispielsweise über eine superschnelle Glasfaserverbindung verbunden, meldet die API 4G.

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

Diese Signale sind auch als HTTP-Anfrageheader verfügbar und werden über Clienthinweise aktiviert. Sehen Sie sich dazu das Beispiel und die spec für weitere Informationen an.

OpenType-Variablenschriften

Traditionell enthielt eine Schriftart nur eine einzige Instanz einer Schriftfamilie, z. B. eine Schriftstärke oder eine Ausdehnung. Für reguläre Inhalte, Fett- und Kursivschrift, müssen Sie drei verschiedene Schriftarten verwenden.

Eine Schriftart für OpenType-Variablen entspricht mehreren einzelnen Schriftarten, die kompakt in einer einzigen Schriftartdatei verpackt werden können. Durch das Anpassen der CSS-Eigenschaft font-variation-settings lassen sich Streckung, Stil, Gewichtung und weitere Elemente ganz einfach anpassen und Sie haben eine unbegrenzte Anzahl stilistischer Variationen. Diese drei Schriftarten können jetzt in einer einzigen, kompakten Datei zusammengefasst 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-Variablenschriftarten bieten uns ein leistungsstarkes neues Tool, um responsive Typografie zu erstellen und die Seitengröße zu reduzieren. Weitere Informationen finden Sie unter Introducing OpenType Variable Fonts von John Hudson.

Medienerfassung aus DOM-Elementen

Mit der Media Capture von der DOM Elements API können Sie jetzt Inhalte wie Audio- und Videoinhalte direkt aus HTMLMediaElements live aufnehmen.MediaStream

Nach dem Aufruf von captureStream() für ein HTML-Medienelement können die gestreamten Inhalte bearbeitet, verarbeitet, per Fernzugriff gesendet oder aufgezeichnet werden. Stellen Sie sich vor, Sie nutzen Web-Audio, um Ihren eigenen Equalizer oder Vocoder zu erstellen. Alternativ können Sie die Inhalte über WebRTC an eine Remote-Website streamen. Die Möglichkeiten sind fast endlos.

Keine sicheren Labels für einige HTTP-Seiten

Wie wir bereits angekündigt haben, wird die Seite ab Chrome 62 bei Eingabe von Daten auf einer HTTP-Seite als „Nicht sicher“ gekennzeichnet und durch ein Label in der Adressleiste gekennzeichnet. Dieses Label wird auch im Inkognitomodus für alle HTTP-Seiten angezeigt.

…und vieles mehr

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

Abonniere unseren YouTube-Kanal, um bei jedem neuen Video eine E-Mail-Benachrichtigung zu erhalten.

Ich bin Pete LePage. Sobald Chrome 63 veröffentlicht wird, werde ich Ihnen die Neuerungen bei Chrome mitteilen.