Neu auf der Webplattform im Mai

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

Seit Mai sind auch Chrome 102, Safari 15.5, Firefox 100 und Firefox 101 stabil.

Chrome 102 und Safari 15.5 unterstützen das Attribut inert. Dadurch werden Elemente aus der Tabulatorreihenfolge und dem Baum für Barrierefreiheit entfernt, wenn sie nicht interaktiv sind. Das kann beispielsweise ein Element sein, das derzeit nicht auf dem Bildschirm bzw. nicht sichtbar ist.

Unterstützte Browser

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Quelle

Chrome 102 enthält den neuen Wert until-found für das HTML-Attribut hidden. So können Sie Text auf einer Seite suchen und zu einem Textfragment scrollen, das sich in einem minimierten Bereich der Seite befindet, z. B. in einem Akkordeon-Muster. Weitere Informationen finden Sie im Hilfeartikel Zusammengefaltete Inhalte mit „hidden=until-found“ barrierefrei machen.

Unterstützte Browser

  • Chrome: 102.
  • Edge: 102.
  • Firefox: nicht unterstützt
  • Safari: Nicht unterstützt.

Quelle

Chrome 102 enthält die Navigation API, eine API, die das clientseitige Routing in Single-Page-Anwendungen standardisiert. Diese API hieß früher „App-Verlaufs-API“.

Unterstützte Browser

  • Chrome: 102.
  • Edge: 102.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Firefox 101 unterstützt konfigurierbare Stylesheets. Dazu gehören der CSSStyleSheet()-Konstruktor sowie die Methoden replace() und replaceSync(). Mit konstruierbaren Stylesheets lassen sich Stylesheets für die Verwendung mit dem Shadow-DOM einfacher erstellen. Im folgenden Beispiel wird mit dem Konstruktor CSSStyleSheet() ein Stylesheet erstellt, mit der Methode replaceSync() eine CSS-Regel hinzugefügt und die resultierende Regel in der Konsole ausgegeben.

const stylesheet = new CSSStyleSheet();
stylesheet
.replaceSync('body { color: red; }');
console
.log(stylesheet.rules[0].cssText);

Unterstützte Browser

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Quelle

In Firefox 101 ist auch die Medienfunktion prefers-contrast verfügbar, die plattformübergreifend genutzt werden kann.

Unterstützte Browser

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

Quelle

Betaversionen von Browsern

Betaversionen von Browsern bieten eine Vorschau auf Funktionen, die in der nächsten stabilen Version des Browsers enthalten sein werden. Dies ist ein guter Zeitpunkt, neue Funktionen oder Entfernungen zu testen, die sich auf deine Website auswirken könnten, bevor diese Funktion veröffentlicht wird.

Neue Betaversionen im April waren Chrome 103 und Firefox 102.

Firefox 102 enthält die Medienfunktion update. Damit wird abgefragt, ob das Ausgabegerät das Aussehen von Inhalten nach dem Rendern ändern kann. Folgende Werte sind zulässig:

none
Nach dem Rendern können die Inhalte nicht mehr aktualisiert werden. Zum Beispiel ein gedrucktes Dokument.
slow
Der Inhalt wird zwar vom Gerät aktualisiert, allerdings zu langsam, um flüssige Animationen anzuzeigen. Beispielsweise E‐Ink-Bildschirme.
fast
Die Inhalte können sich dynamisch und schnell genug ändern, um Animationen zu rendern. z. B. auf einem Computer- oder Smartphonedisplay.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Quelle

Chrome 103 enthält die Local Fonts Access API, die den Zugriff auf die lokal installierten Schriftarten des Nutzers ermöglicht.

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

Änderung: In einer früheren Version dieses Beitrags wurde die Methode Element.isVisible() erwähnt, die in diesem Release nicht enthalten ist.

Teil der Reihe Neues im Web