Neu auf der Webplattform seit Oktober

Entdecken Sie einige der interessanten Funktionen, die im Oktober 2022 in den stabilen und Beta-Webbrowsern eingeführt wurden.

Rachel Andrew

Stabile Browserversionen

Seit Oktober sind Firefox 106, Chrome 107 und Safari 16.1 stabil. Sehen wir uns einmal an, was das für die Webplattform bedeutet.

Animation von Rasterspuren

Dank der Unterstützung unserer Mitwirkenden bei Microsoft ist Chrome jetzt in der Lage, die grid-template-columns- und grid-template-rows-Werte zu interpolieren. Das bedeutet, dass Rasterlayouts reibungslos zwischen Zuständen übergehen können, anstatt an der Hälfte einer Animation oder eines Übergangs einzurasten.

Ergänzungen zu getDisplayMedia()

In Chrome gibt es außerdem einige Ergänzungen zu getDisplayMedia(), die verhindern sollen, dass der Bildschirm mit einer zu großen Bildschirmfreigabe geteilt wird.

• Mit der Option displaySurface kann angegeben werden, dass die Web-App einen bestimmten Anzeigeoberflächentyp (Tabs, Fenster oder Bildschirme) vorziehen soll.
• Die Option surfaceSwitching gibt an, ob Chrome dem Nutzer erlauben soll, dynamisch zwischen freigegebenen Tabs zu wechseln.
• Mit der Option selfBrowserSurface kann verhindert werden, dass der Nutzer den aktuellen Tab teilt. Dadurch wird der „Hall of Spiegel“-Effekt vermieden.
• Mit der Option systemAudio wird dafür gesorgt, dass dem Nutzer nur relevante Audioaufnahmen in Chrome angeboten werden.

Safari 16.1 unterstützt auch getDisplayMedia und bietet somit Unterstützung für die Aufnahme eines bestimmten Safari-Fensters.

Tests zur Unterstützung von Schrifttechnologie und CSS-Funktionen

Firefox hat die Funktionen font-tech() und font-format() hinzugefügt, um Abfragen mit @supports zu ermöglichen. Im folgenden Beispiel wird die Unterstützung von COLRv1-Schriftarten getestet.

@supports font-tech(color-COLRv1) {

}

Weitere Beispiele findest du auf der MDN.

Zum Textfragment scrollen

Safari 16.1 bietet Unterstützung für das Scrollen zum Textfragment. Damit wird die Navigation zu einer URL mit einem bestimmten Textfragment unterstützt.

AVIF-Unterstützung

Safari 16 unterstützt AVIF-Standbilder und Safari 16.1 unterstützt animierte AVIF-Bilder unter macOS Ventura, iOS 16 und iPadOS 16.

Web Push für Safari

Mit Safari 16.1 wird Web Push auf macOS Ventura in Safari unterstützt. Dabei werden die Push API und die Notifications API verwendet. Weitere Informationen Web Push Landing in Safari bedeutet, dass es jetzt für alle drei großen Suchmaschinen verfügbar ist.

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 in diesem Monat sind Chrome 108, Firefox 107 und Safari 16.2.

Chrome 108 unterstützt den Wert avoid der CSS-Fragmentierungseigenschaften break-before, break-after und break-inside beim Drucken. Dieser Wert weist den Browser an, Fehler vor, nach oder innerhalb des Elements zu vermeiden, auf das er angewendet wird. Das folgende CSS verhindert beispielsweise, dass eine Abbildung bei einem Seitenumbruch fehlerhaft wird.

figure {
    break-inside: avoid;
}

In Chrome 108 wird eine Änderung am Überlaufverhalten für ersetzte Elemente eingeführt, was unter Umständen zu visuellen Änderungen führen kann. Weitere Informationen und Möglichkeiten zur Behebung von gefundenen Problemen finden Sie im Artikel Änderung des Überlaufs bei ersetzten Elementen in CSS.

Es gibt eine Änderung für den Layout-Darstellungsbereich in Chrome unter Android, wenn die Bildschirmtastatur angezeigt wird. In unserem Hilfeartikel Auf Änderungen bei der Größe des Darstellungsbereichs in Chrome unter Android vorbereiten finden Sie weitere Informationen und erfahren, wie Sie sich auf die stabile Version vorbereiten können.

In Chrome gibt es außerdem die neuen CSS-Darstellungseinheiten. Dazu gehören kleine (svw, svh, svi, svb, svmin, svmax), große (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamische (dvw, dvh, dvi, dvb, dvmin, dvmax) und logische Einheiten (vi, vb). Diese Einheiten sind bereits in Firefox und Safari implementiert.

Firefox 107 aktiviert die Unterstützung von COLRv1-Schriftarten und unterstützt so zusammen mit Chrome diese Schriftarttechnologie. In Chrome 108 wurden ebenfalls die Funktionen font-tech() und font-format() unterstützt, um Featureabfragen mit @supports zu erstellen.

In Firefox wird auch contain-intrinsic-size unterstützt. Zusammen mit Chrome werden diese Funktion nun in zwei Browsern unterstützt.

Safari 16.2 Beta enthält eine Reihe von CSS-Fehlerkorrekturen, einschließlich Größenänderung und Scroll-Snap.

Teil der Reihe zum Thema „Neu im Web“