Neu auf der Webplattform seit Oktober

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

Rachel Andrew

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 Rasterspuren

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

Bewegen Sie den Mauszeiger auf die Avatare, um die Animation zu sehen. Dieses Beispiel stammt aus dem Artikel CSS-animierte Rasterlayouts, in dem Sie weitere Informationen finden.

Unterstützte Browser

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

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 findest du auf der MDN.

Zum Textfragment scrollen

Safari 16.1 unterstützt das Scrollen zu Textfragmenten, wodurch Sie zu einer URL mit einem bestimmten Textfragment wechseln können.

AVIF-Unterstützung

Safari 16 unterstützt Standbilder von AVIF, 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. Dabei werden die Push API und die Notifications API verwendet. Weitere Informationen dazu finden Sie im Artikel Meet Web Push. Da Web Push jetzt auch in Safari verfügbar ist, ist es jetzt in allen drei großen Browsern verfügbar.

Betaversionen des Browsers

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 beim Drucken den Wert avoid der CSS-Fragmentierungseigenschaften break-before, break-after und break-inside. 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-Code wird beispielsweise verhindert, dass eine Abbildung bei 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.

Der Layout-Darstellungsbereich in Chrome funktioniert nun anders, wenn die Bildschirmtastatur eingeblendet 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 Reihe „Neu im Web“