Nouveautés de Chrome 74

Pete LePage

Dans Chrome 74, nous avons ajouté la compatibilité avec les éléments suivants:

Et ce n'est pas tout ! Ce n'est pas tout !

Je m'appelle Pete LePage. Voyons ce que Chrome 74 a de nouveau à offrir aux développeurs.

Journal des modifications

Il ne s'agit là que de quelques-uns des points forts. Pour en savoir plus sur les modifications apportées à Chrome 74, consultez les liens ci-dessous.

Champs de classe privée

Les champs de classe simplifient la syntaxe des classes en évitant d'avoir recours à des fonctions de constructeur uniquement pour définir des propriétés d'instance. Dans Chrome 72, nous avons ajouté la prise en charge des champs de classe publique.

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

Et j'ai dit que des champs de classe privés étaient en préparation. Je suis ravi de vous annoncer que les champs de classe privés sont disponibles 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++;
  }
}

N'oubliez pas que les champs private sont privés. Ils sont accessibles dans la classe, 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 sur les champs de classe.

prefers-reduced-motion

Certains utilisateurs ont signalé avoir ressenti des nausées lorsqu'ils regardaient le défilement en parallaxe, le zoom et d'autres effets de mouvement. Pour y remédier, de nombreux systèmes d'exploitation proposent une option permettant de réduire les mouvements dans la mesure du possible.

Chrome fournit désormais une requête multimédia, prefers-reduced-motion, qui fait partie de la spécification de niveau 5 des requêtes multimédias. Elle vous permet de détecter quand cette option est activée.


@media (prefers-reduced-motion: reduce)

Imaginons que j'ai un bouton d'inscription qui attire l'attention 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 sur le déplacement des éléments. Ou peut-être pas, si l'utilisateur préfère "reduced-motion".

Événements CSS transition

La spécification des transitions CSS nécessite que des événements de transition soient envoyés lorsqu'une transition est mise en file d'attente, commence, se termine ou est annulée. Ces événements sont compatibles avec d'autres navigateurs depuis un certain temps.

Mais 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, vous pouvez suivre ou modifier le comportement lors de l'exécution d'une transition.

Mises à jour de l'API Feature Policy

Les règles de fonctionnalité 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. Cela se fait via l'en-tête Feature-Policy ou via l'attribut allow sur une iFrame.

Feature-Policy: geolocation 'self'

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

Chrome 74 introduit un nouvel ensemble d'API pour vérifier les fonctionnalités 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 de la règle de fonctionnalité.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 74 pour les développeurs. Personnellement, je suis très enthousiaste à propos de KV Storage, un service de stockage clé-valeur asynchrone et ultra-rapide, disponible en version d'essai pour les origines.

Google I/O approche à grands pas !

N'oubliez pas : Google I/O se déroule dans quelques semaines (du 7 au 9 mai) et nous vous proposerons de nombreuses nouveautés. 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

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 75 sera disponible, je vous présenterai les nouveautés de Chrome.