Chrome 74 bietet Unterstützung für:
- Das Erstellen von Feldern privater Klassen in JavaScript ist jetzt viel übersichtlicher.
- Du kannst erkennen, wenn ein Nutzer eine verminderte Bewegungsgeschwindigkeit angefordert hat.
- CSS-Umstellungsereignisse
- Es werden neue Feature Policy APIs hinzugefügt, mit denen Sie prüfen können, ob Features aktiviert sind.
Und es gibt noch viel mehr!
Mein Name ist Pete LePage. Sehen wir uns nun an, was es bei Chrome 74 Neues gibt.
Änderungsprotokoll
Dies sind nur einige der wichtigsten Highlights. Weitere Änderungen in Chrome 74 finden Sie unter den folgenden Links.
- Neu in den Chrome-Entwicklertools (74)
- Einstellung und Entfernung von Chrome 74
- ChromeStatus.com-Updates für Chrome 74
- Neuerungen in JavaScript in Chrome 74
- Änderungsliste des Chromium-Quell-Repositorys
Felder für private Klassen
Klassenfelder vereinfachen die Klassensyntax, da keine Konstruktorfunktionen allein zum Definieren von Instanzattributen erforderlich sind. In Chrome 72 werden Felder für öffentliche Klassen jetzt unterstützt.
class IncreasingCounter {
// Public class field
_publicValue = 0;
get value() {
return this._publicValue;
}
increment() {
this._publicValue++;
}
}
Und ich sagte, private Klassenfelder sind in Arbeit. 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, mit der Ausnahme, dass Sie das Feld mithilfe eines #
(Rautenzeichens) als privat markieren. Stellen Sie sich #
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 nur das private sind. Sie sind innerhalb der Klasse zugänglich, aber nicht außerhalb des Klassentexts.
class SimpleClass {
_iAmPublic = 'shared';
#iAmPrivate = 'secret';
doSomething() {
...
}
}
Weitere Informationen zu öffentlichen und privaten Kursen finden Sie im Beitrag von Mathias zu Kursfeldern.
prefers-reduced-motion
Einige Nutzer haben gemeldet, dass sie beim Betrachten von Parallaxe-Scroll- und Zoomeffekten und anderen Bewegungseffekten krank werden. Um dies zu vermeiden, bieten viele Betriebssysteme eine Option, um Bewegungen nach Möglichkeit zu reduzieren.
Chrome stellt jetzt eine Medienabfrage (prefers-reduced-motion
) bereit, die Teil der Spezifikation für Medienabfragen der Stufe 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 mit einer leichten Bewegung die Aufmerksamkeit auf sich selbst lenkt. Mit der neuen Abfrage kann ich nur die Bewegung für die Schaltfläche ausschalten.
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Sieh dir Toms Artikel Move Ya! Oder vielleicht eher nicht, wenn der Nutzer reduzierte Bewegungen bevorzugt!.
transition
-Ereignisse des Preisvergleichsportals
Gemäß der Spezifikation für CSS-Übergänge müssen Übergangsereignisse gesendet werden, wenn ein Übergang in die Warteschlange gestellt wird, beginnt, endet oder abgebrochen wird. Diese Ereignisse werden schon länger in anderen Browsern 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
Durch das Warten auf diese Ereignisse ist es möglich, das Verhalten bei der Ausführung eines Übergangs zu verfolgen oder zu ändern.
Aktualisierungen der Feature Policy API
Mit Featurerichtlinien können Sie APIs und andere Webfunktionen selektiv aktivieren, deaktivieren und deren Verhalten ändern. Dies erfolgt entweder über den Header „Funktionsrichtlinie“ 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 überprüft werden kann, welche Funktionen aktiviert sind:
- Mit
document.featurePolicy.allowedFeatures()
können Sie eine Liste der zulässigen Features abrufen. - 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 eine bestimmte Funktion zulassen.
Weitere Informationen finden Sie im Beitrag zur Einführung in die Feature-Richtlinie.
…und vieles mehr
Dies sind nur einige der Änderungen für Entwickler in Chrome 74. Und natürlich gibt es noch viel mehr. Ich finde KV Storage ganz besonders spannend, einen superschnellen, asynchronen Speicherdienst für Schlüssel/Wert-Paare, der als Ursprungstest verfügbar ist.
Die Google I/O findet bald statt!
Und nicht vergessen: Die Google I/O findet in wenigen Wochen statt (7. bis 9. Mai) und wir haben jede Menge tolle neue Inhalte für dich. Wenn Sie nicht teilnehmen können, werden alle Sitzungen live gestreamt und sind anschließend über den YouTube-Kanal für Chrome-Entwickler verfügbar.
Abo
Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, sobald ein neues Video veröffentlicht wird.
Ich bin Pete LePage und sobald Chrome 75 veröffentlicht wird, melde ich Ihnen, was es Neues in Chrome gibt.