Neu auf der Webplattform im November

Entdecke einige der interessanten Funktionen, die im November 2022 in stabilen und Beta-Webbrowsern eingeführt wurden.

Rachel Andrew

Stabile Browserversionen

Im November wurden Firefox 107 und Chrome 108 stabil. Sehen wir uns an, was das für die Webplattform bedeutet.

Änderung am Verhalten des Layout-Darstellungsbereichs in Chrome für Android

In Chrome 108 wird unter Android das Verhalten des Layout-Darstellungsbereichs geändert, wenn die Bildschirmtastatur angezeigt wird. Weitere Informationen finden Sie im Hilfeartikel Vorbereitung auf Änderungen am Verhalten der Ansichtsgröße in Chrome für Android.

Neue Einheiten für den Darstellungsbereich

Außerdem sind in Chrome 108 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 Anzeigenblöcke sind bereits in Firefox und Safari implementiert. Das bedeutet, dass wir jetzt für diese Anzeigenblöcke eine Interoperabilität zwischen den drei wichtigsten Browser-Engines haben.

Weitere Informationen finden Sie unter Die großen, kleinen und dynamischen Einheiten für den Darstellungsbereich.

Die CSS-Eigenschaft contain-intrinsic-size wird in Firefox 107 zusammen mit den Langschrift-Attributen contain-intrinsic-width, contain-intrinsic-height und den logischen Eigenschaften contain-intrinsic-block-size und contain-intrinsic-inline-size unterstützt.

Diese werden angewendet, um die Größe eines UI-Elements anzugeben, für das eine Größenbeschränkung gilt. So kann ein User-Agent die Größe eines Elements bestimmen, ohne seine untergeordneten Elemente zu rendern. Sie sind nützlich, wenn ein Element einer Größenbeschränkung unterliegt.

Unterstützung für das CSS-Fragmentierungs-Keyword avoid

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;
}

Diese Ergänzung ist auf die Einbindung der Druckunterstützung mit LayoutNG zurückzuführen. Dadurch wird eine moderne, weniger fehleranfällige Oberfläche ermöglicht. Weitere Informationen zu LayoutNG

Federated Credential Management API

Die Federated Credential Management API (FedCM) bietet eine Abstraktion für föderierte Identitätsabläufe im Web. Es wird ein browserbasiertes Dialogfeld angezeigt, in dem Nutzer Konten von Identitätsanbietern auswählen können, um sich auf Websites anzumelden. FedCM wird in Chrome 108 eingeführt. Weitere Informationen finden Sie im Blogpost zur Ankündigung von FedCM.

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. Da die Veröffentlichungsdaten in dieses Jahr fallen, ist Firefox 108 die einzige neue Betaversion in diesem Monat und Safari 16.2 Beta läuft noch.

Firefox 108 unterstützt die Attribute height und width für das Element <source>, wenn es einem <picture>-Element untergeordnet ist. Diese Attribute akzeptieren die Höhe oder Breite des Bildes in Pixeln als Ganzzahl ohne Einheit.

Die Implementierung von Containerabfragen in Firefox ist in vollem Gange. Hinter dem Flag layout.css.container-queries.enabled in Firefox 108 Beta finden Sie die Einheiten für die Länge der Containerabfrage: cqw, cqh, cqi, cqb, cqmin, cqmax. Dies sind Längeneinheiten, die sich auf die Größe eines Abfragecontainers beziehen.

Teil der Reihe „Neu im Web“