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

Hier werden nur einige der wichtigsten Highlights behandelt. Weitere Änderungen in Chrome 74 finden Sie unter den folgenden Links.

Private Klassenfelder

Klassenfelder vereinfachen die Klassensyntax, da keine Konstruktorfunktionen erforderlich sind, um nur 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++;
  }
}

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: private-Felder sind privat. 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 eine Medienabfrage (prefers-reduced-motion), die Teil der Spezifikation für Medienabfragen Ebene 5 ist, mit der Sie erkennen können, wann 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;
  }
}

Dann lesen Sie Toms 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…

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

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Durch das Warten auf diese Ereignisse ist es möglich, das Verhalten während eines Übergangs nachzuverfolgen oder zu ä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>

Mit Chrome 74 werden neue APIs eingeführt, mit denen geprüft wird, 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 aufrufen, die auf der aktuellen Seite verwendet werden und für die eine bestimmte Funktion aktiviert ist.

Weitere Informationen finden Sie im Beitrag Einführung in die Feature-Richtlinie.

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 74 für Entwickler. Natürlich gibt es noch viele weitere. Ich persönlich begeistere mich besonders für KV Storage, einen superschnellen, asynchronen Speicherdienst für Schlüssel/Wert-Paare, der als Ursprungstest verfügbar ist.

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

Und denkt daran: Die Google I/O findet nur wenige Wochen später 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 du über unsere Videos auf dem Laufenden bleiben möchtest, kannst du unseren YouTube-Kanal für Chrome-Entwickler abonnieren. Dann wirst du per E-Mail benachrichtigt, 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.