Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 111

Adriana Jara

Voici les informations à retenir :

Créez des transitions soignées dans votre application monopage avec l'API View Transitions.
Faites passer vos couleurs au niveau supérieur grâce à la prise en charge du niveau de couleur CSS 4.
Découvrez les nouveaux outils du panneau de style pour exploiter tout le potentiel de la nouvelle fonctionnalité de couleurs.
Et ce n'est pas tout : bien d'autres fonctionnalités sont disponibles.

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, callback est appelé..startViewTransition() 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 que d'autres modèles sont également pris en charge.

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 avec des spécialisations.

En résumé, cela signifie 50% de couleurs en plus parmi lesquelles choisir ! Vous pensiez que 16 millions de couleurs parlait 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 couleur

Les outils de développement disposent de nouvelles fonctionnalités compatibles avec la spécification de niveau de couleur 4 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. Délimitation de gamme

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

Convertir des couleurs d'un format de couleur à un autre

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 choses.

Le CSS a ajouté des fonctions trigonométriques, des unités de police racine supplémentaires et étendu le pseudo-sélecteur enfant n-ième.
L'API Picture-in-picture pour les documents est en phase de test initiale
Les actions previousslide et nextslide font désormais partie de l'API Media Session. Pour regarder la démo, cliquez ici.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 111.

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 la sortie de Chrome 112, je serai là pour vous présenter les nouveautés de Chrome.