Entdecke einige der interessanten Funktionen, die im November 2022 in den stabilen und Beta-Webbrowsern eingeführt wurden.
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.
Unterstützte Browser
- 108
- 108
- 101
- 15,4
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“