Neu auf der Webplattform im November

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

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

Ab Chrome 108 für Android ändert sich das Verhalten des Layout-Viewports, wenn die Bildschirmtastatur angezeigt wird. Weitere Informationen finden Sie im Hilfeartikel Vorbereitung auf Änderungen am Verhalten beim Ändern der Größe des Darstellungsbereichs in Chrome für Android.

Neue Darstellungsbereichseinheiten

Außerdem sind in Chrome 108 die neuen CSS-Viewport-Einheiten enthalten. 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 Große, kleine und dynamische Darstellungsbereiche.

Unterstützte Browser

  • Chrome: 108.
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

Die CSS-Kurzschreibweise contain-intrinsic-size wird in Firefox 107 unterstützt, ebenso wie die Langschreibweise contain-intrinsic-width, contain-intrinsic-height und die logischen Eigenschaften contain-intrinsic-block-size und contain-intrinsic-inline-size.

Mit diesen wird die Größe eines UI-Elements angegeben, das einer Größenbeschränkung unterliegt. 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ützte Browser

  • Chrome: 83.
  • Edge: 83.
  • Firefox: 107.
  • Safari: 17.

Quelle

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 Einbeziehung der Druckunterstützung mit LayoutNG zurückzuführen. Dies sorgt für eine moderne, weniger fehleranfällige Oberfläche. 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 browsergemitteltes 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 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. Aufgrund der Termine der Veröffentlichungen ist Firefox 108 die einzige neue Betaversion dieses Monats. Die Betaversion von Safari 16.2 ist noch in der Entwicklung.

Firefox 108 unterstützt die Attribute height und width für das Element <source>, wenn es ein untergeordnetes Element eines <picture>-Elements ist. Für diese Attribute ist die Höhe oder Breite des Bilds in Pixeln als Ganzzahl ohne Maßeinheit zulässig.

Die Implementierung von Containerabfragen ist in Firefox in Arbeit. 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 Serie Neu im Web