Hier finden Sie einige der interessanten Funktionen, die im Oktober 2022 in stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Im Oktober wurden Firefox 106, Chrome 107 und Safari 16.1 stabil. Sehen wir uns an, was das für die Webplattform bedeutet.
Animation von Rastertracks
Dank der Arbeit unserer Mitwirkenden bei Microsoft können in Chrome jetzt grid-template-columns
- und grid-template-rows
-Werte interpoliert werden. Das bedeutet, dass bei Rasterlayouts nahtlos zwischen den Status gewechselt werden kann, anstatt dass sie sich in der Mitte einer Animation oder eines Übergangs verschieben.
Unterstützte Browser
Ergänzungen zu getDisplayMedia()
In Chrome gibt es auch einige Ergänzungen zu getDisplayMedia()
, die versehentliches Übermaß beim Teilen des Bildschirms verhindern sollen.
- Die Option
displaySurface
kann darauf hinweisen, dass die Webanwendung bevorzugt einen bestimmten Bildschirmtyp (Tabs, Fenster oder Bildschirme) anbietet. - Mit der Option
surfaceSwitching
wird angegeben, ob Chrome dem Nutzer erlauben soll, dynamisch zwischen geteilten Tabs zu wechseln. - Mit der Option
selfBrowserSurface
können Sie verhindern, dass der Nutzer den aktuellen Tab freigibt. So wird der Spiegelkabinetteffekt vermieden. - Mit der Option
systemAudio
wird sichergestellt, dass Chrome dem Nutzer nur relevante Audioaufnahmen anbietet.
Safari 16.1 unterstützt außerdem getDisplayMedia
, sodass Sie ein bestimmtes Safari-Fenster erfassen können.
Unterstützung von Schrifttechnologien und -funktionen aus CSS testen
In Firefox wurden die Funktionen font-tech()
und font-format()
hinzugefügt, um Abfragen mit @supports
zu erstellen. Im folgenden Beispiel wird die Unterstützung von COLRv1-Schriftarten getestet.
@supports font-tech(color-COLRv1) {
}
Weitere Beispiele finden Sie in der MDN.
Zum Textfragment scrollen
Safari 16.1 unterstützt das Scrollen zu Textfragmenten, wodurch das Aufrufen einer URL mit einem bestimmten Textfragment möglich ist.
AVIF-Unterstützung
Safari 16 unterstützte statische AVIF-Bilder. Safari 16.1 unterstützt animierte AVIF-Bilder unter macOS Ventura, iOS 16 und iPadOS 16.
Web-Push für Safari
Safari 16.1 unterstützt Web Push in Safari unter macOS Ventura. Dazu werden die Push API und die Notifications API verwendet. Weitere Informationen finden Sie im Artikel Web Push. Da Web Push jetzt auch in Safari verfügbar ist, ist es jetzt in allen drei großen Browsern verfügbar.
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. Die neuen Betaversionen dieses Monats 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. Mit diesem Wert wird dem Browser mitgeteilt, dass er vor, nach oder innerhalb des Elements, auf das er angewendet wird, keine Zeilenumbrüche einfügen soll. Mit dem folgenden CSS wird beispielsweise verhindert, dass eine Abbildung an einem Seitenumbruch unterbrochen wird.
figure {
break-inside: avoid;
}
Mit Chrome 108 wird eine Änderung am Verhalten von Überlauf bei ersetzten Elementen eingeführt, was unter Umständen zu visuellen Änderungen führt. Weitere Informationen und eine Anleitung zur Behebung von Problemen finden Sie im Artikel Änderung am Overflow-Attribut für ersetzte Elemente in CSS.
Das Verhalten des Layout-Viewports in Chrome auf Android-Geräten hat sich geändert, wenn die Bildschirmtastatur angezeigt wird. Weitere Informationen und eine Anleitung zur Vorbereitung auf die Einführung in der stabilen Version des nächsten Monats finden Sie im Hilfeartikel Vorbereitung auf Änderungen am Verhalten der Ansichtsgröße in Chrome für Android.
Außerdem sind in Chrome die neuen CSS-Viewport-Einheiten verfügbar. 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 (vi
, vb
) Einheiten. Diese Einheiten sind bereits in Firefox und Safari implementiert.
In Firefox 107 wird die Schriftart-Unterstützung COLRv1 aktiviert. Damit unterstützt Firefox diese Schriftarttechnologie ebenso wie Chrome. In Chrome 108 werden außerdem die Funktionen font-tech()
und font-format()
für Suchanfragen mit @supports
unterstützt.
Firefox unterstützt jetzt auch contain-intrinsic-size
. Damit gibt es neben Chrome nun zwei Browser, die diese Funktion unterstützen.
Safari 16.2 Beta enthält eine Reihe von CSS-Fehlerkorrekturen, darunter für die Größenanpassung und das Scrollen.
Teil der Serie Neu im Web