Neu auf der Webplattform im März

Hier finden Sie einige der interessanten Funktionen, die im März 2022 in stabilen und Beta-Webbrowsern eingeführt wurden.

Stabile Browserversionen

Im März wurden Chrome 99, Chrome 100, Firefox 98 und Safari 15.4 als stabil eingestuft. Dadurch kam eine ganze Reihe neuer Funktionen auf die Plattform. Viele dieser Ergänzungen führten dazu, dass die Funktion in allen drei Browser-Engines verfügbar war. In diesem Post habe ich mich auf die Ergänzungen konzentriert, die eine browserübergreifende Interoperabilität ermöglichen. In den Versionshinweisen finden Sie alle Funktionen, die den einzelnen Suchmaschinen hinzugefügt wurden.

Chrome 99 und Safari 15.4 unterstützen abgestufte Ebenen. Mit der At-Rule @layer wird eine Kaskadenebenen definiert, mit der Sie die Spezifität steuern können. Damit ist die Funktion jetzt in allen drei Browser-Engines verfügbar. Weitere Informationen zu abfolgebasierten Ebenen finden Sie im Hilfeartikel Abfolgebasierte Ebenen kommen in Ihren Browser.

Unterstützte Browser

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97
  • Safari: 15.4

Quelle

Chrome 100 enthält den neuen Wert plus-lighter für die CSS-Eigenschaft mix-blend-mode. Dieser Wert ist hilfreich, wenn zwei Elemente mit einem Cross-Fading überblendet werden sollen, wenn alle oder ein Teil der Pixel dieselben Werte haben. Weitere Informationen zu dem damit gelösten Problem findest du unter Das Cross-Fading von zwei DOM-Elementen ist derzeit nicht möglich.

Unterstützte Browser

  • Chrome: 100.
  • Edge: 100.
  • Firefox: 99.
  • Safari: 9.1.

Safari 15.4 enthält die Property contain, die eine CSS-Begrenzung ermöglicht.

Unterstützte Browser

  • Chrome: 52.
  • Edge: 79.
  • Firefox: 69.
  • Safari: 15.4

Quelle

In Safari 15.4 gibt es auch die Taste accent-color, mit der die Akzentfarbe für einige Formularsteuerelemente gesteuert werden kann.

Unterstützte Browser

  • Chrome: 93.
  • Edge: 93.
  • Firefox: 92.
  • Safari: 15.4.

Quelle

In Firefox 98 und Safari 15.4 wurde das Element <dialog> eingeführt, das ein Dialogfeld darstellt.

Unterstützte Browser

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

Quelle

In Safari 15.4 wird außerdem die Pseudoklasse :focus-visible unterstützt. Die Implementierung wurde von Igalia durchgeführt.

Unterstützte Browser

  • Chrome: 86
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4.

Quelle

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.

Im März wurden die neuen Betaversionen Chrome 101 und Firefox 99 veröffentlicht.

Chrome 101 Beta unterstützt die HWB-Farbnotation. Hier wird die Farbe anhand ihres Farbtons, ihrer Weiß- und Schwarzwerte angegeben. Wie bei anderen Farbnotationen gibt eine optionale Alpha-Komponente die Deckkraft an.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Unterstützte Browser

  • Chrome: 101.
  • Edge: 101.
  • Firefox: 96.
  • Safari: 15.

Quelle

Firefox 99 enthält das Attribut pdfViewerEnabled der Navigator-Benutzeroberfläche. Diese Property gibt an, ob der Browser die Inline-Anzeige von PDF-Dateien unterstützt.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

Unterstützte Browser

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 99.
  • Safari: 16.4.

Quelle

Diese Betafunktionen werden bald in stabilen Browsern verfügbar sein.

Teil der Reihe Neues im Web