Nouveautés de Chrome 74

Pete LePage

Dans Chrome 74, nous avons ajouté la compatibilité avec:

Et ce n'est pas tout !

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.

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 !