Nouveautés de Chrome 111

Adriana Jara

Voici quelques points à retenir :

Je m'appelle Adriana Jara. Voyons ce que Chrome 111 a de nouveau à offrir aux développeurs.

API View Transitions.

Créer des transitions fluides sur le Web est une tâche complexe. L'API View Transitions permet de créer des transitions plus soignées en prenant des instantanés des vues et en permettant au DOM de changer sans chevauchement entre les états.

Transitions créées avec l'API View Transition. Essayer le site de démonstration : nécessite Chrome 111 ou version ultérieure.

La transition de vue par défaut est un fondu croisé. L'extrait de code suivant implémente cette expérience.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Lorsque .startViewTransition() est appelé, l'API capture l'état actuel de la page.

Une fois cette opération terminée, l'callback transmise à .startViewTransition() est appelée. C'est là que le DOM est modifié. L'API capture ensuite le nouvel état de la page.

Notez que l'API est lancée pour les applications monopages (SPA), mais la prise en charge d'autres modèles est également en cours d'implémentation.

Cette API comporte de nombreux détails. Pour en savoir plus, consultez notre article contenant des exemples et des détails ou la documentation sur les transitions de vue sur MDN.

Niveau de couleur CSS 4.

Avec le niveau de couleur CSS 4, CSS est désormais compatible avec les écrans haute définition, en spécifiant les couleurs à partir des gammes HD, tout en proposant des espaces de couleurs spécialisés.

En résumé, cela signifie que vous avez 50% de couleurs supplémentaires à choisir ! Vous pensiez que 16 millions de couleurs, c'était beaucoup. C'est bien ce que je pensais.

Une série d'images montre la transition entre des gammes de couleurs larges et étroites, illustrant la vivacité des couleurs et ses effets.
Essayez-le vous-même

L'implémentation inclut la fonction color(). Elle peut être utilisée pour tout espace de couleur qui spécifie des couleurs avec des canaux R, G et B. color() prend d'abord un paramètre d'espace de couleurs, puis une série de valeurs de canaux pour RVB et éventuellement un alpha.

Voici quelques exemples d'utilisation de la fonction de couleur avec différents espaces colorimétriques.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Consultez cet article pour en savoir plus sur l'utilisation des couleurs haute définition avec CSS.

Nouveaux outils de développement pour les couleurs

Les outils de développement disposent de nouvelles fonctionnalités pour prendre en charge la spécification de niveau 4 des couleurs CSS.

Le volet Styles est désormais compatible avec les 12 nouveaux espaces de couleurs et les 7 nouveaux gamuts décrits dans la spécification. Voici des exemples de définitions de couleurs CSS avec color(), lch(), oklab() et color-mix().

Exemples de définitions de couleurs CSS.

Lorsque vous utilisez color-mix(), qui permet de mélanger un pourcentage d'une couleur à une autre, vous pouvez afficher la sortie de couleur finale dans le volet Computed (Calculé).Résultat de la fonction color-mix dans le volet "Computed" (Calculé).

Le sélecteur de couleurs est également compatible avec tous les nouveaux espaces de couleurs et propose plus de fonctionnalités. Par exemple, cliquez sur l'échantillon de couleur de color(display-p3 1 0 1). Une ligne de délimitation de la gamme a également été ajoutée, permettant de distinguer les gammes sRGB et display-p3 pour mieux comprendre la gamme de la couleur sélectionnée. Ligne de démarcation de la gamme de couleurs.

Le sélecteur de couleur permet également de convertir des couleurs entre différents formats.

Conversion des couleurs entre les formats de couleur.

Consultez cet article pour en savoir plus sur la couleur de débogage et les autres nouvelles fonctionnalités des outils de développement.

Et bien plus !

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

Documentation complémentaire

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

S'abonner

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

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