Entdecke einige der interessanten Funktionen, die im Juni 2022 in den stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Im Juni sind Chrome 103 und Firefox 102 stabil.
Streams und lesbare Bytestreams transformieren
Firefox 102 unterstützt Transform Streams. Dies ermöglicht das Pipeing von ReadableStream zu einer WritableStream und die Ausführung einer Transformation für die Blöcke. Wir freuen uns, dass diese Funktion in allen drei Suchmaschinen verfügbar ist. Das ist ein guter Zeitpunkt, um mehr über Streams zu erfahren.
Lesbare Bytestreams werden jetzt auch in Firefox 102 unterstützt. Dadurch wird ein BYOB-Reader (Bring your own buffer) mit der ReadableStreamBYOBReader-Schnittstelle ermöglicht. Damit können vom Entwickler bereitgestellte Daten gestreamt werden.
Auf lokal installierte Schriftarten zugreifen
Chrome 103 enthält die Local Font Access API, die den Zugriff auf die lokal installierten Schriftarten des Nutzers ermöglicht. Nachdem Sie Zugriff auf die auf dem Gerät installierten Schriftarten angefordert haben, rufen Sie window.queryLocalFonts() auf, um ein Array der installierten Schriftarten abzurufen.
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. Hiermit wird abgefragt, ob das Ausgabegerät das Aussehen des Inhalts ändern kann, nachdem dieser gerendert wurde.
Neuer HTTP-Statuscode – 103 frühe Hinweise
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 der Browser den Browser anweisen, eine Verbindung zum Ursprung herzustellen oder Ressourcen beim Laden der Seite, die sie benötigen, vorab zu laden. Hierfür sind Aktualisierungen auf Ihrem Server oder CDN erforderlich, um die Funktion nutzen zu können. Weitere Informationen zu Early Hints
Beta-Browser-Releases
Beta-Browser-Versionen bieten eine Vorschau auf Elemente in der nächsten stabilen Version des Browsers. Dies ist ein guter Zeitpunkt, um neue Funktionen zu testen oder die Entfernung von Inhalten zu testen, die sich auf Ihre Website auswirken könnten, bevor die Veröffentlichung weltweit verfügbar ist.
Die neuen Betaversionen im April waren Chrome 104, Firefox 103 und Safari 16.
Neue Syntax für Bereichsmedienabfragen
Chrome 104 enthält die neue Syntax für Bereichsmedienabfragen aus der Spezifikation „Media Queries Level 4“. Zum Beispiel wurde zuvor eine Medienabfrage wie folgt geschrieben:
@media (min-width: 400px) { … }
Kann jetzt wie folgt geschrieben werden:
@media (width >= 400px) { … }
Region Capture-API
In Chrome 104 auf Computern ist auch die Region Capture API enthalten. Dadurch können Inhalte aus aufgenommenen Videos zugeschnitten und entfernt werden, bevor sie geteilt werden.
Safari 16 bietet viele wichtige Browserfunktionen
Safari 16 scheint eine weitere aufregende Version des Safari-Teams zu sein. In dieser Version wurden viele der Funktionen hinzugefügt, die im Interop 2022 enthalten sind. Es ist erfreulich, dass zu dieser Mitte des Jahres so viele neue Funktionen hinzukommen. Ich stelle hier einige meiner Lieblingsfunktionen vor. Weitere Informationen findest du in den Versionshinweisen.
Zusammen mit vielen Entwicklern freue ich mich sehr, dass Größenabfragen für Containerabfragen unterstützt werden, eine Funktion, die derzeit auch hinter einer Markierung in Chrome steht.
In Safari 16 wird auch der subgrid-Wert für grid-template-columns und grid-template-rows unterstützt. Diese Funktion ist bereits in Firefox und in der Entwicklung in Chrome verfügbar. Sie ermöglicht, dass die Größe von Rasterspuren von verschachtelten Rastern übernommen wird.
Beim Rasterlayout besteht auch die Möglichkeit, Rasterspuren zu animieren.
Unterstützte Browser
- 107
- 107
- 66
- 16
Die showPicker()-Methode, die eine kanonische Methode zum Anzeigen einer Browserauswahl für Datum, Uhrzeit, Farbe und Dateien ermöglicht, ist enthalten. Weitere Informationen finden Sie unter Browserauswahl für Datum, Uhrzeit, Farbe und Dateien anzeigen.
Probleme mit der Barrierefreiheit für display: contents wurden ebenfalls behoben, sodass diese nützliche Funktion sicher verwendet werden kann, ohne dass die Gefahr besteht, dass Elemente aus dem Baum für Bedienungshilfen entfernt werden.
Diese Betafunktionen sind bald auch in stabilen Browsern verfügbar.
Teil der Reihe zum Thema „Neu im Web“