Nouveautés de Chrome 99

Pete LePage

Voici les informations à retenir :

  • Il ne reste plus que quelques semaines avant le lancement du compte à rebours jusqu'à la version 100 de Chrome et Firefox.
  • Les couches en cascade CSS vous offrent plus de contrôle sur votre CSS et vous aident à éviter les conflits de spécificité de style.
  • La méthode showPicker() vous permet d'afficher de manière programmatique un sélecteur de navigateur pour des éléments <input> tels que date, color et datalist.
  • Et ce n'est pas tout : ce n'est pas tout.

Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 99.

Chrome 100 et Firefox 100

Chrome 100 sera disponible fin mars (2022) et Firefox 100 sera disponible peu après début mai. Ces deux versions constituent un jalon de numéro de version majeur et sont reportées à trois chiffres. Toutefois, si votre code attend deux chiffres, le nouveau numéro de version peut vous causer des problèmes.

Tout code qui vérifie les numéros de version ou analyse la chaîne user-agent doit être vérifié pour s'assurer qu'il ne présente aucun problème.

Page des drapeaux Chrome mettant en évidence la nouvelle option #force-major-version-to-100

Dans Chrome, l'indicateur #force-major-version-to-100 fait passer le numéro de version actuel à 100.

Dans le menu "Paramètres" de Firefox Nightly, vous pouvez activer l'option "Firefox 100 User-Agent String". Nous vous recommandons de tester votre site afin de vous assurer que tout fonctionne comme prévu.

Pour en savoir plus, consultez Chrome et Firefox bientôt pour atteindre la version majeure 100.

Couches CSS en cascade

La prise en charge des couches CSS en cascade et de la règle CSS @layer est disponible dans Chrome 99. Ils offrent un contrôle plus explicite de vos fichiers CSS pour éviter les conflits de spécificité de style. Cela est particulièrement utile pour les codebases volumineux, les systèmes de conception et la gestion de styles tiers dans les applications.

Elles introduisent une nouvelle couche dans la cascade CSS. Avec les styles superposés, la priorité d'un calque est toujours prioritaire sur la spécificité d'un sélecteur.

Illustration de la démonstration du projet montrant la séparation de l&#39;UI

Si vous essayez de styliser un lien, dans un .card, dans un .post, vous constaterez que le sélecteur le plus spécifique sera appliqué. En utilisant la règle @layer, vous pouvez être plus explicite sur la spécificité de style de chacun et vous assurer que le style du lien de votre fiche remplace celui de votre article.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Cela est dû à une priorité en cascade. Les styles multicouches créent de nouveaux plans en cascade.

Les calques en cascade qui utilisent la règle CSS @layer sont compatibles avec Chrome 99, Firefox 97 et Safari 15.4 bêta. Pour en savoir plus, consultez Les couches en cascade arrivent sur votre navigateur.

showPicker() pour les éléments d'entrée

Pendant longtemps, nous avons dû recourir à des bibliothèques de widgets personnalisés ou à des astuces pour afficher un sélecteur de date. Il existe une nouvelle méthode showPicker() dans le fichier HTML InputElements. C'est la méthode canonique pour afficher un sélecteur de navigateur, non seulement pour date, mais aussi pour time, color et d'autres éléments <input> avec des sélecteurs.

Captures d&#39;écran des sélecteurs de navigateur
Sélecteurs de date dans le navigateur Chrome pour ordinateur, Chrome pour mobile, Safari pour ordinateur, Safari mobile et Firefox pour ordinateur (juillet 2021)

Pour l'utiliser, appelez showPicker() sur l'élément <input>. Dans cet exemple, je l'ai encapsulé dans un bloc try…catch. Cela me permet de proposer une création de remplacement, si le navigateur n'est pas compatible avec l'API ou ne peut pas afficher l'outil de sélection. Ainsi, vous vous assurez que les utilisateurs bénéficient toujours d'une bonne expérience.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Consultez Afficher un sélecteur de navigateur pour la date, l'heure, la couleur et les fichiers pour en savoir plus, ainsi que pour connaître les différents types de <input> que vous pouvez utiliser avec showPicker().

Et bien plus !

Bien sûr, ce n’est pas tout.

L'API Canvas2D a été mise à jour et inclut désormais les fonctionnalités suivantes:

  • Deux nouveaux événements pour ContextLost et ContextRestored
  • Une option willReadFrequently
  • Meilleure compatibilité avec le modificateur de texte CSS
  • et plus encore.

Une nouvelle phase d'évaluation permet aux PWA de fournir d'autres couleurs dans le fichier manifeste d'application Web pour le mode sombre.

L'API de reconnaissance de l'écriture manuscrite est disponible.

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 99.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des 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 que Chrome 100 sera disponible, je serai là pour vous dire les nouveautés de Chrome !