Nouveautés de Chrome 99

Pete LePage

Voici les informations à retenir :

  • Le compte à rebours de la version 100 de Chrome et de Firefox n'est plus qu'à quelques semaines.
  • Les couches en cascade CSS vous permettent de mieux contrôler votre CSS et d'é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 les éléments <input> tels que date, color et datalist.
  • Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je m'appelle Pete LePage. Voyons ce que Chrome 99 propose aux développeurs.

Chrome 100 et Firefox 100

Chrome 100 sera disponible fin mars 2022, et Firefox 100 peu de temps après, début mai. Ces deux versions marquent un jalon important et passent à 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 de l'user-agent doit être vérifié pour s'assurer qu'il ne pose aucun problème.

Page des indicateurs Chrome mettant en avant la nouvelle option #force-major-version-to-100

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

Dans le menu des paramètres de Firefox Nightly, vous pouvez activer l'option "Chaîne user-agent Firefox 100". Il est recommandé de tester votre site pour vous assurer que tout fonctionne comme prévu.

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

Couches CSS en cascade

La prise en charge des calques en cascade CSS et de la règle CSS @layer est disponible dans Chrome 99. Elles 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 grands codebases, les systèmes de conception et la gestion des styles tiers dans les applications.

Ils ajoutent une nouvelle couche à la cascade CSS. Avec les styles en couches, la priorité d'une couche l'emporte toujours sur la spécificité d'un sélecteur.

Illustration de la démonstration du projet de décomposition de l&#39;UI

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

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

  .link {
    color: blue;
  }
}

Cela est dû à la priorité en cascade. Les styles en couches créent des plans en cascade.

Les calques en cascade utilisant la règle CSS @layer sont compatibles avec Chrome 99, Firefox 97 et Safari 15.4 bêta. Pour en savoir plus, consultez la page Les couches Cascade seront bientôt disponibles dans votre navigateur.

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

Pendant longtemps, nous avons dû recourir à des bibliothèques de widgets personnalisées ou à des astuces pour afficher un sélecteur de date. Une nouvelle méthode showPicker() est disponible dans HTML InputElements. Il s'agit de 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 navigateurs
Sélecteurs de date du navigateur dans Chrome pour ordinateur, Chrome pour mobile, Safari pour ordinateur, Safari pour 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 fournir un élément de remplacement si le navigateur n'est pas compatible avec l'API ou ne peut pas afficher le sélecteur. Cela garantit une expérience utilisateur de qualité.

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 et découvrir tous les types de <input> pour lesquels vous pouvez utiliser showPicker().

Et bien plus !

Bien sûr, il y en a bien d'autres.

L'API Canvas2D a été mise à jour et ajouté de nouvelles fonctionnalités, y compris:

  • Deux nouveaux événements pour ContextLost et ContextRestored
  • Une option willReadFrequently
  • Compatibilité avec davantage de modificateurs de texte CSS
  • et plus encore.

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

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

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 99.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 100 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.