Neu auf der Webplattform im November

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

Rachel Andrew

Stabile Browserversionen

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

Änderung des Darstellungsbereichs für das Layout in Chrome unter Android

Das Verhalten des Darstellungsbereichs für das Layout wurde in Chrome 108 unter Android geändert, wenn die Bildschirmtastatur angezeigt wird. Weitere Informationen finden Sie unter Auf Änderungen bei der Größe des Darstellungsbereichs in Chrome unter Android vorbereiten.

Neue Einheiten für den Darstellungsbereich

In Chrome 108 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, was bedeutet, dass wir jetzt für diese Einheiten 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 der Kurzform contain-intrinsic-size wird in Firefox 107 zusammen mit der Langschrift contain-intrinsic-width, contain-intrinsic-height und den logischen Eigenschaften contain-intrinsic-block-size und contain-intrinsic-inline-size unterstützt.

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

Unterstützung für das Keyword avoid für die CSS-Fragmentierung

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

Diese Ergänzung ist auf die Unterstützung von Druckaufträgen mithilfe von LayoutNG zurückzuführen. Dadurch entsteht ein modernes, weniger fehleranfälliges Erlebnis. Weitere Informationen zu LayoutNG

Federated Credential Management API

Die Federated Credential Management API (FedCM) bietet eine Abstraktion föderierter Identitätsflüsse im Web. Es wird ein browsergestütztes Dialogfeld angezeigt, in dem Nutzer Konten und Anbieter auswählen können, um sich auf Websites anzumelden. FedCM veröffentlicht jetzt Chrome 108. Weitere Informationen dazu finden Sie im Blogpost zur FedCM-Ankündigung.

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. Aufgrund des Veröffentlichungsdatums ist in diesem Monat Firefox 108 die einzige neue Betaversion. Safari 16.2 Beta läuft noch.

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

In Firefox werden Containerabfragen implementiert. Hinter dem Flag layout.css.container-queries.enabled in der Betaversion von Firefox 108 finden Sie die Einheiten für die Container-Abfragelänge: cqw, cqh, cqi, cqb, cqmin, cqmax. Dabei handelt es sich um Längeneinheiten im Verhältnis zur Größe eines Abfragecontainers.

Teil der Reihe zum Thema „Neu im Web“