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.

Rachel Andrew

Stabile Browserversionen

Im Mai wurden Chrome 102, Safari 15.5, Firefox 100 und Firefox 101 stabil.

Chrome 102 und Safari 15.5 enthalten das Attribut inert. Dadurch werden Elemente aus der Tab-Reihenfolge und dem Barrierefreiheitsbaum entfernt, wenn sie nicht interaktiv sind. Das kann z. B. ein Element sein, das sich derzeit außerhalb des Bildschirms befindet oder ausgeblendet ist.

Browser Support

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

Source

Chrome 102 enthält den neuen Wert until-found für das HTML-Attribut hidden. So können Sie Text, der sich in einem minimierten Bereich der Seite befindet, wie z. B. in einem Akkordeonmuster, auf der Seite suchen und zu einem Textfragment scrollen. Weitere Informationen finden Sie im Beitrag Making collapsed content accessible with hidden=until-found.

In Chrome 102 wird die Navigation API eingeführt, eine API, die das clientseitige Routing in Single-Page-Anwendungen standardisiert. Diese API hieß früher App History API.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

Source

Firefox 101 unterstützt erstellbare Stylesheets. Der Support umfasst den CSSStyleSheet()-Konstruktor und die Methoden replace() und replaceSync(). Constructable Stylesheets erleichtern das Erstellen von Stylesheets für die Verwendung mit dem Shadow-DOM. Im folgenden Beispiel wird mit dem Konstruktor CSSStyleSheet() ein Stylesheet erstellt, mit der Methode replaceSync() wird eine CSS-Regel hinzugefügt und die resultierende Regel wird in der Konsole ausgegeben.

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

Browser Support

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

Source

In Firefox 101 ist auch die Media-Funktion prefers-contrast enthalten, sodass sie browserübergreifend verfügbar ist.

Browser Support

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

Source

Betaversionen von Browsern

Beta-Browserversionen bieten eine Vorschau auf die nächste stabile Version des Browsers. Das ist ein guter Zeitpunkt, um neue Funktionen oder Entfernungen zu testen, die sich auf Ihre Website auswirken könnten, bevor die Veröffentlichung für alle erfolgt.

Im April wurden Chrome 103 und Firefox 102 als neue Betas veröffentlicht.

Firefox 102 enthält das Media-Feature update. Damit wird abgefragt, ob das Ausgabegerät das Erscheinungsbild von Inhalten nach dem Rendern ändern kann. Es werden die folgenden Werte akzeptiert:

none
Sobald die Inhalte gerendert wurden, können sie nicht mehr aktualisiert werden. z. B. ein gedrucktes Dokument.
slow
Das Gerät kann die Inhalte aktualisieren, aber zu langsam, um eine flüssige Animation darzustellen. Beispiel: E-Ink-Displays
fast
Der Inhalt kann sich dynamisch und schnell genug ändern, um Animationen zu rendern. z. B. ein Computer- oder Smartphone-Display.

Browser Support

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

Source

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

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

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

Teil der New to the web series