Neu in Chrome 74

Pete LePage

In Chrome 74 haben wir Unterstützung für Folgendes hinzugefügt:

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 74 gibt.

Änderungsprotokoll

Dies sind nur einige der wichtigsten Neuerungen. Über die Links unten finden Sie weitere Änderungen in Chrome 74.

Private Klassenfelder

Klassenfelder vereinfachen die Klassensyntax, da keine Konstruktorfunktionen mehr erforderlich sind, um Instanzeigenschaften zu definieren. In Chrome 72 haben wir die Unterstützung für öffentliche Klassenfelder hinzugefügt.

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

Ich habe gesagt, dass private Klassenfelder in Arbeit sind. Ich freue mich, Ihnen mitteilen zu können, dass private Klassenfelder in Chrome 74 eingeführt wurden. Die neue Syntax für private Felder ähnelt der für öffentliche Felder. Der einzige Unterschied besteht darin, dass Sie das Feld mit einem # (Pfundzeichen) als privat kennzeichnen. Stellen Sie sich # als Teil des Feldnamens vor.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

private-Felder sind privat. Sie sind innerhalb der Klasse zugänglich, aber nicht außerhalb des Klassenkörpers.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

Weitere Informationen zu öffentlichen und privaten Klassen finden Sie im Beitrag von Mathias zu Klassenfeldern.

prefers-reduced-motion

Einige Nutzer haben berichtet, dass ihnen beim Betrachten von Parallax-Scrolling, Zoomen und anderen Bewegungseffekten übel wird. Viele Betriebssysteme bieten eine Option, um Bewegungen nach Möglichkeit zu reduzieren.

Chrome bietet jetzt eine Media-Anfrage, prefers-reduced-motion, die Teil der Media Queries Level 5-Spezifikation ist und mit der Sie erkennen können, wann diese Option aktiviert ist.


@media (prefers-reduced-motion: reduce)

Stellen Sie sich vor, ich habe eine Schaltfläche zur Registrierung, die durch eine leichte Bewegung auf sich aufmerksam macht. Mit der neuen Anfrage kann ich die Bewegung nur für die Schaltfläche deaktivieren.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Lies dir Toms Artikel Move Ya! Oder vielleicht auch nicht, wenn der Nutzer die Einstellung „Reduzierte Bewegung“ bevorzugt. Weitere Informationen finden Sie unter

transition-Ereignisse für Preisvergleichsportale

Die CSS-Transitions-Spezifikation erfordert, dass Übergangsereignisse gesendet werden, wenn ein Übergang in die Warteschlange gestellt, gestartet, beendet oder abgebrochen wird. Diese Ereignisse werden in anderen Browsern schon seit einiger Zeit unterstützt.

Bisher wurden sie in Chrome jedoch nicht unterstützt. In Chrome 74 können Sie jetzt auf Folgendes warten:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Wenn Sie auf diese Ereignisse warten, können Sie das Verhalten während einer Übergangsanimation verfolgen oder ändern.

API-Updates für Richtlinien für Funktionen

Mit Feature-Richtlinien können Sie APIs und andere Webfunktionen selektiv aktivieren, deaktivieren und ihr Verhalten ändern. Dies erfolgt entweder über den Feature-Policy-Header oder über das Attribut „allow“ in einem iFrame.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation >s<elf&quo>t;
/iframe

In Chrome 74 werden neue APIs eingeführt, mit denen geprüft werden kann, welche Funktionen aktiviert sind:

  • Eine Liste der zulässigen Funktionen kann mit document.featurePolicy.allowedFeatures() abgerufen werden.
  • Mit document.featurePolicy.allowsFeature(...) können Sie prüfen, ob eine bestimmte Funktion zulässig ist.
  • Außerdem können Sie mit document.featurePolicy.getAllowlistForFeature() eine Liste der Domains abrufen, die auf der aktuellen Seite verwendet werden und die ein bestimmtes Feature zulassen.

Weitere Informationen finden Sie im Beitrag zur Einführung der Feature Policy.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 74 für Entwickler. Ich persönlich bin sehr gespannt auf KV Storage, einen superschnellen, asynchronen Schlüssel/Wert-Speicherdienst, der als Origin Trial verfügbar ist.

Die Google I/O steht vor der Tür!

Und nicht vergessen: Die Google I/O findet in wenigen Wochen (7. bis 9. Mai) statt. Dort gibt es viele tolle Neuigkeiten für euch. Wenn Sie nicht teilnehmen können, werden alle Sessions live gestreamt und sind anschließend auf unserem YouTube-Kanal für Chrome-Entwickler verfügbar.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 75 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.