Nouveautés de Chrome 142

Rachel Andrew

Date de publication : 28 octobre 2025

Chrome 142 est en cours de déploiement. Cet article présente certaines des principales fonctionnalités de cette version. Consultez les notes de version complètes de Chrome 142.

Voici les points clés de cette version :

Pseudo-classes :target-before et :target-after

Ces pseudo-classes correspondent aux repères de défilement qui se trouvent avant ou après le repère actif (correspondant à :target-current) dans le même groupe de repères de défilement, tel que déterminé par l'ordre de l'arborescence à plat :

  • :target-before : correspond à tous les repères de défilement qui précèdent le repère actif dans l'ordre de l'arborescence à plat au sein du groupe.
  • :target-after : correspond à tous les repères de défilement qui suivent le repère actif dans l'ordre de l'arborescence à plat au sein du groupe.

Syntaxe de plage pour les requêtes de conteneur de style et if()

Chrome améliore les requêtes de style CSS et la fonction if() en ajoutant la prise en charge de la syntaxe de plage.

Elle étend les requêtes de style au-delà de la correspondance exacte des valeurs (par exemple, style(--theme: dark)). Les développeurs peuvent utiliser des opérateurs de comparaison (tels que > et <) pour comparer des propriétés personnalisées, des valeurs littérales (par exemple, 10 px ou 25 %) et des valeurs provenant de fonctions de substitution telles que attr() et env(). Pour que la comparaison soit valide, les deux côtés doivent correspondre au même type de données. Elle est limitée aux types numériques suivants : <length>, <number>, <percentage>, <angle>, <time>, <frequency> et <resolution>.

Exemples :

Comparer une propriété personnalisée à une longueur littérale :

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Comparer deux valeurs littérales

@container style(1em < 20px) {
  /* ... */
}

Utiliser des plages de style dans if() :

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Invokers d'intérêt (attribut interestfor)

Chrome ajoute un attribut interestfor aux éléments <button> et <a>. Cet attribut ajoute des comportements "intérêt" à l'élément. Lorsqu'un utilisateur manifeste son intérêt pour l'élément, des actions sont déclenchées sur l'élément cible, par exemple l'affichage d'un pop-up.

L'agent utilisateur détecte lorsqu'un utilisateur s'intéresse à l'élément à l'aide de méthodes telles que le maintien du pointeur sur l'élément, l'appui sur des touches de raccourci spéciales sur le clavier ou l'appui prolongé sur l'élément sur les écrans tactiles. Lorsqu'un intérêt est exprimé ou perdu, un InterestEvent se déclenche sur la cible, qui comporte des actions par défaut pour les pop-ups, comme l'affichage et le masquage de la pop-up.

Documentation complémentaire

Cette liste ne couvre que quelques points essentiels. Consultez les liens suivants pour en savoir plus sur les modifications apportées à Chrome 141.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo. Vous pouvez également nous suivre sur X ou LinkedIn pour découvrir nos nouveaux articles et posts de blog.

Dès que Chrome 143 sera disponible, nous vous présenterons les nouveautés de Chrome.