Neu auf der Webplattform seit April

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

Stabile Browserversionen

Im April 2023 wurden Firefox 112 und Chrome 112 als stabil eingestuft. Sehen wir uns an, was das für die Webplattform bedeutet.

Das inert-Attribut

Firefox 112 enthält das globale Attribut inert. Dieses Attribut weist den Browser an, das Element zu ignorieren. Es gibt an, dass Inhalte nicht interaktiv sein sollen. Die DSGVO hat folgenden Zweck:

  • Verhindert, dass click-Ereignisse ausgelöst werden.
  • Verhindert, dass das Element den Fokus erhält.
  • Das Element und seinen Inhalt aus dem Bedienungshilfen-Baum ausschließen.

Dieses Attribut ist jetzt in allen drei Engines interoperabel.

Unterstützte Browser

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

Quelle

Die linear()-Funktion

Die linear()-Funktion ermöglicht eine lineare Interpolation zwischen mehreren Punkten. So sind komplexere Animationen wie Sprung- und Gummibandeffekte möglich. Diese Funktion ist in Firefox 112 verfügbar.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

CSS-Verschachtelung

Chrome 112 unterstützt CSS-Verschachtelung, eine Funktion, auf die viele Entwickler schon lange gewartet haben. Dazu wird ein neuer Auswahl-Nesting-Befehl > eingeführt, mit dem sich ähnliche Stilregeln verschachteln lassen. Dieser Befehl ist für Entwickler, die bereits mit Pre-Compilern gearbeitet haben, vertraut:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Unterstützte Browser

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Quelle

Preisvergleichsportal animation-composition

Chrome 112 unterstützt auch animation-composition. Weitere Informationen zu dieser Eigenschaft finden Sie unter Festlegen, wie mehrere Animationseffekte mit der Animationszusammensetzung kombiniert werden sollen.

Unterstützte Browser

  • Chrome: 112.
  • Edge: 112.
  • Firefox: 115.
  • Safari: 16.

Quelle

Neuer headless-Modus

Wenn Sie den Chrome-Headless-Modus verwenden, z. B. mit Puppeteer, bietet Version 112 einen brandneuen Headless-Modus. Weitere Informationen finden Sie im Hilfeartikel Der headless Modus in Chrome wird verbessert.

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. Die neuen Betas sind Firefox 113 und Chrome 113. Die Betaversion von Safari 16.5 ist noch verfügbar. Diese Releases bringen viele tolle Funktionen auf die Plattform. Alle Details finden Sie in den Versionshinweisen. Im Folgenden sind nur einige Highlights aufgeführt.

Firefox 113 enthält die Funktionen color(), lab(), lch(), oklab() und oklch(). Außerdem sind die Funktion color-mix() aus CSS Color 5 und das Attribut forced-color-adjust enthalten.

Firefox unterstützt auch die Syntax nth-child of <selector>, mit der Sie genauer festlegen können, welche Elemente ausgewählt werden sollen. Weitere Informationen finden Sie unter Mehr Kontrolle über :nth-child()-Auswahlen mit der Syntax „of S“.

In Chrome 113 sind die Medienfunktionen overflow-inline, overflow-block und update für CSS verfügbar. Auch in der linear()-Glättungsfunktion und dem image-set()-Typ ohne Präfix enthalten.

Chrome 113 enthält außerdem die WebGPU, die Nachfolgerin der WebGL- und WebGL 2-Grafik-APIs für das Web. Es bietet moderne Funktionen wie GPU-Computing, einen geringeren Overhead beim Zugriff auf die GPU-Hardware, die Möglichkeit, von einem einzigen Grafikgerät aus auf mehrere Canvases zu rendern, sowie eine bessere und vorhersehbarere Leistung.

Teil der Serie Neu im Web