Neu in Chrome 74

Pete LePage

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

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 74 für Entwickler neu ist.

Änderungsprotokoll

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 74.

Private Klassenfelder

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

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

Und ich habe gesagt, dass Felder für private Kurse in Arbeit sind. Ich freue mich, Ihnen mitteilen zu können, dass private Klassenfelder in Chrome 74 eingeführt wurden. Die Syntax der neuen privaten Felder ähnelt der von öffentlichen Feldern, mit dem Unterschied, dass Sie das Feld mit einem # (Pfundzeichen) als privat kennzeichnen. Stellen Sie sich das # als Teil des Feldnamens vor.

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

Denken Sie daran, dass private-Felder privat sind. Sie sind innerhalb der Klasse zugänglich, aber außerhalb des Klassenkörpers nicht verfügbar.

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

Weitere Informationen zu öffentlichen und privaten Klassen finden Sie in Mathias' Beitrag zu Klassenfeldern.

prefers-reduced-motion

Einige Nutzer haben angegeben, dass sie bei Parallaxen-Scrolling, Zoomen und anderen Bewegungseffekten unter Übelkeit leiden. Viele Betriebssysteme bieten daher die Möglichkeit, Bewegungen nach Möglichkeit zu reduzieren.

Chrome bietet jetzt die Mediaabfrage prefers-reduced-motion, die Teil der Media Queries Level 5-Spezifikation ist. Damit können Sie erkennen, ob diese Option aktiviert ist.


@media (prefers-reduced-motion: reduce)

Stellen Sie sich vor, ich habe eine Anmeldeschaltfläche, die durch eine leichte Bewegung Aufmerksamkeit erregt. Mit der neuen Abfrage kann ich die Bewegungserkennung 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 den Artikel Move Ya! Oder vielleicht auch nicht, wenn der Nutzer „reduced-motion“ bevorzugt. Weitere Informationen finden Sie hier.

transition-Ereignisse für Preisvergleichsportale

Gemäß der CSS-Übergangsspezifikation müssen Ü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…

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

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Wenn Sie auf diese Ereignisse achten, können Sie das Verhalten beim Ausführen eines Übergangs verfolgen oder ändern.

API-Änderungen für die Richtlinie zu Funktionen

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

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

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

  • Eine Liste der mit document.featurePolicy.allowedFeatures() zulässigen Funktionen finden Sie hier.
  • Mit document.featurePolicy.allowsFeature(...) können Sie prüfen, ob eine bestimmte Funktion zulässig ist.
  • Mit document.featurePolicy.getAllowlistForFeature() können Sie auch eine Liste der Domains abrufen, die auf der aktuellen Seite verwendet werden und für die eine bestimmte Funktion aktiviert ist.

Weitere Informationen finden Sie im Hilfeartikel Einführung in die Richtlinie zu Funktionen.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 74 für Entwickler. Es gibt natürlich noch viele weitere. Ich persönlich bin ziemlich begeistert von KV Storage, einem superschnellen, asynchronen Schlüssel/Wert-Speicherdienst, der als Origin-Test verfügbar ist.

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

Und denkt daran: Die Google I/O findet nur noch in wenigen Wochen statt (7. bis 9. Mai). Wir haben viele tolle Neuigkeiten für euch. Falls Sie nicht teilnehmen können, werden alle Sessions live gestreamt und sind danach 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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 75 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.