Neu auf der Webplattform im Juni

Hier finden Sie einige der interessanten Funktionen, die im Juni 2022 in stabilen und Beta-Webbrowsern eingeführt wurden.

Rachel Andrew

Stabile Browserversionen

Im Juni wurden Chrome 103 und Firefox 102 als stabile Versionen veröffentlicht.

Streams und lesbare Byte-Streams transformieren

Firefox 102 unterstützt Transform Streams. Dadurch wird die Weiterleitung von ReadableStream an eine WritableStream ermöglicht, wobei eine Transformation der Chunks ausgeführt wird. Es ist toll, dass diese Funktion jetzt in allen drei Engines verfügbar ist. Das ist ein guter Zeitpunkt, um mehr über Streams zu erfahren.

Unterstützte Browser

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Quelle

Lesbare Bytestreams werden jetzt auch in Firefox 102 unterstützt. Dadurch ist ein BYOB-Leser (Bring Your Own Buffer) mit der ReadableStreamBYOBReader-Schnittstelle möglich. So können vom Entwickler bereitgestellte Daten gestreamt werden.

Unterstützte Browser

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: Nicht unterstützt.

Quelle

Auf lokal installierte Schriftarten zugreifen

Chrome 103 enthält die Local Fonts Access API, die den Zugriff auf die lokal installierten Schriftarten des Nutzers ermöglicht. Nachdem Sie den Zugriff auf die auf dem Gerät installierten Schriftarten angefordert haben, rufen Sie window.queryLocalFonts() auf, um ein Array der installierten Schriftarten zu erhalten.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Die Medienfunktion update

Firefox 102 enthält die Medienfunktion update. Damit wird abgefragt, ob das Ausgabegerät das Aussehen von Inhalten nach dem Rendern ändern kann.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Quelle

Ein neuer HTTP-Statuscode – erste Hinweise zu 103

In Chrome 103 wird der neue Statuscode „HTTP 103 Early Hints“ hinzugefügt. Wenn der Server oder das CDN weiß, dass zum Laden einer Seite eine bestimmte Gruppe von Unterressourcen erforderlich ist, kann er dem Browser raten, eine Vorabverbindung zu den Ursprüngen herzustellen oder die Ressourcen sogar vorab zu laden, sobald die Seite, für die sie erforderlich sind, eingeht. Damit Sie diese Funktion nutzen können, müssen Sie Ihren Server oder Ihr CDN aktualisieren. Weitere Informationen zu Early Hints

Betaversionen von Browsern

Betaversionen von Browsern bieten eine Vorschau auf Funktionen, die in der nächsten stabilen Version des Browsers enthalten sein werden. Jetzt ist der ideale Zeitpunkt, um neue Funktionen oder Änderungen zu testen, die sich auf Ihre Website auswirken könnten, bevor sie allgemein verfügbar sind.

Im April wurden die neuen Betaversionen Chrome 104, Firefox 103 und Safari 16 veröffentlicht.

Neue Syntax für Bereichsmediaabfragen

Chrome 104 enthält die neue Syntax für Bereichsmediaabfragen aus der Media Queries Level 4-Spezifikation. Beispiel: Eine Medienabfrage, die zuvor so geschrieben wurde:

@media (min-width: 400px) { … }

kann jetzt so geschrieben werden:

@media (width >= 400px) { … }

Unterstützte Browser

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Quelle

Region Capture API

Chrome 104 für Computer enthält außerdem die Region Capture API. So können Sie Inhalte aus einem aufgenommenen Video zuschneiden und entfernen, bevor Sie es teilen.

Safari 16 bietet mehrere wichtige Funktionen

Safari 16 wird eine weitere spannende Version des Safari-Teams sein. Diese Version enthält viele der Funktionen, die in Interop 2022 enthalten sind. Es ist toll, dass wir schon jetzt so viele neue Funktionen erhalten. Ich möchte hier einige meiner Lieblingsfunktionen vorstellen. Weitere Informationen finden Sie in den Versionshinweisen.

Ich freue mich zusammen mit vielen anderen Entwicklern, dass die Unterstützung von Größenabfragen für Containerabfragen bald eingeführt wird. Diese Funktion ist derzeit in Chrome als Flag gekennzeichnet.

In Safari 16 wird auch der Wert subgrid für grid-template-columns und grid-template-rows unterstützt. Diese Funktion ist bereits in Firefox verfügbar und wird in Chrome derzeit entwickelt. Sie ermöglicht es, die Größe von Rasterspuren von verschachtelten Rastern zu übernehmen.

Unterstützte Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Quelle

Beim Rasterlayout können auch Rasterspuren animiert werden.

Unterstützte Browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Die Methode showPicker() ist enthalten. Sie ermöglicht eine kanonische Methode zum Anzeigen einer Browserauswahl für Datum, Uhrzeit, Farbe und Dateien. Weitere Informationen finden Sie unter Browserauswahl für Datum, Uhrzeit, Farbe und Dateien anzeigen.

Unterstützte Browser

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Quelle

Außerdem wurden Probleme mit der Barrierefreiheit für display: contents behoben, sodass diese nützliche Funktion jetzt sicher verwendet werden kann, ohne dass Elemente aus dem Baum für die Barrierefreiheit entfernt werden.

Diese Betafunktionen werden bald in stabilen Browsern verfügbar sein.

Teil der Serie Neu im Web