Dans Chrome 74, nous avons ajouté la compatibilité avec:
- La création de champs de classe privés en JavaScript est désormais beaucoup plus claire.
- Vous pouvez détecter quand l'utilisateur a demandé une expérience de réduction des mouvements.
- Événements de transition CSS
- Ajout de nouvelles API Feature Policy pour vérifier si les fonctionnalités sont activées ou non.
Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés pour les développeurs de Chrome 74 !
Journal des modifications
Ce guide n'aborde que certains des points clés. Consultez les liens ci-dessous pour découvrir les modifications supplémentaires apportées à Chrome 74.
- Nouveautés des outils pour les développeurs Chrome (74)
- Abandons et suppressions de Chrome 74
- Mises à jour du site ChromeStatus.com pour Chrome 74
- Nouveautés de JavaScript dans Chrome 74
- Liste des modifications du dépôt source Chromium
Champs de classe privés
Les champs de classe simplifient la syntaxe de classe en évitant d'avoir besoin de fonctions de constructeur pour définir uniquement les propriétés d'instance. Dans Chrome 72, nous avons ajouté la compatibilité avec les champs de classe publics.
class IncreasingCounter {
// Public class field
_publicValue = 0;
get value() {
return this._publicValue;
}
increment() {
this._publicValue++;
}
}
J'ai dit que les champs de classe privés étaient en préparation. Je suis heureux de vous annoncer que les champs
de classe privée sont arrivés dans Chrome 74. La nouvelle syntaxe des champs privés est semblable aux champs publics, sauf que vous marquez le champ comme privé à l'aide d'un #
(signe dièse). Considérez #
comme faisant partie du nom du champ.
class IncreasingCounter {
// Private class field
#privateValue = 0;
get value() {
return this.#privateValue;
}
increment() {
this.#privateValue++;
}
}
Rappelez-vous que les champs private
sont uniquement privés. Ils sont accessibles dans le cours, mais pas en dehors du corps de la classe.
class SimpleClass {
_iAmPublic = 'shared';
#iAmPrivate = 'secret';
doSomething() {
...
}
}
Pour en savoir plus sur les classes publiques et privées, consultez l'article de Mathias concernant les champs de classe.
prefers-reduced-motion
Certains utilisateurs ont signalé avoir le mal des mouvements lors de la visualisation d'un défilement parallaxe, d'un zoom et d'autres effets de mouvement. Pour résoudre ce problème, de nombreux systèmes d'exploitation offrent une option permettant de réduire les mouvements dans la mesure du possible.
Chrome fournit désormais une requête média, prefers-reduced-motion
, qui fait partie de la spécification des requêtes multimédias de niveau 5, qui vous permet de détecter quand cette option est activée.
@media (prefers-reduced-motion: reduce)
Imaginez que j'ai un bouton d'inscription qui attire l'attention sur lui-même avec un léger mouvement. La nouvelle requête me permet de désactiver le mouvement uniquement pour le bouton.
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Consultez l'article de Tom Move Ya! Ou peut-être pas, si l'utilisateur préfère un mouvement réduit ! pour en savoir plus.
Événements transition
du CSS
La spécification CSS Transitions exige que les événements de transition soient envoyés lorsqu'une transition est mise en file d'attente, démarre, se termine ou est annulée. Ces événements sont pris en charge par d'autres navigateurs depuis un certain temps...
Toutefois, jusqu'à présent, elles n'étaient pas compatibles avec Chrome. Dans Chrome 74, vous pouvez désormais écouter:
transitionrun
transitionstart
transitionend
transitioncancel
En écoutant ces événements, il est possible de suivre ou de modifier le comportement lors d'une transition.
Mises à jour de l'API Feature Policy
Les règles de fonctionnalités vous permettent d'activer, de désactiver et de modifier de manière sélective le comportement des API et d'autres fonctionnalités Web. Pour ce faire, vous devez utiliser l'en-tête "Feature-Policy" ou l'attribut "allow" d'un iFrame.
Feature-Policy: geolocation 'self'
<iframe ... allow="geolocation self">
</iframe>
Chrome 74 introduit un nouvel ensemble d'API pour vérifier quelles fonctionnalités sont activées:
- Vous pouvez obtenir la liste des fonctionnalités autorisées avec
document.featurePolicy.allowedFeatures()
. - Vous pouvez vérifier si une fonctionnalité spécifique est autorisée avec
document.featurePolicy.allowsFeature(...)
. - Vous pouvez également obtenir la liste des domaines utilisés sur la page actuelle qui autorisent une fonctionnalité spécifiée avec
document.featurePolicy.getAllowlistForFeature()
.
Pour en savoir plus, consultez l'article Présentation des règles relatives aux fonctionnalités.
Et bien plus !
Ce ne sont là que quelques-uns des changements apportés à Chrome 74 pour les développeurs. Bien sûr, il y en a bien d'autres. Personnellement, je suis très enthousiaste à propos de KV Storage, un service de stockage clé/valeur asynchrone ultra rapide, disponible en phase d'évaluation.
Google I/O commence bientôt !
Et n'oubliez pas : la conférence Google I/O aura lieu dans quelques semaines (du 7 au 9 mai) et vous aurez de nombreuses nouvelles ressources intéressantes à vous proposer. Si vous ne pouvez pas participer, toutes les sessions seront diffusées en direct et seront ensuite disponibles sur notre chaîne YouTube pour les développeurs Chrome.
S'abonner
Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.
Je m'appelle Pete LePage. Dès la sortie de Chrome 75, je serai là pour vous dire quelles sont les nouveautés de Chrome !