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.
Donnez une nouvelle dimension aux couleurs grâce à la compatibilité avec le niveau de couleur CSS 4.
Découvrez les nouveaux outils dans le panneau "Style" pour tirer le meilleur parti des nouvelles fonctionnalités de couleur.
Et ce n'est pas tout : ce n'est pas tout.

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 111 pour les développeurs.

Afficher l'API Transitions

La création de transitions fluides sur le Web est une tâche complexe. L'API View Transitions simplifie la création de transitions soignées en créant des instantanés des vues et en permettant au DOM de changer sans qu'il y ait de chevauchement entre les états.

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

La transition d'affichage par défaut est un fondu enchaîné. L'extrait suivant met en œuvre 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, le callback transmis à .startViewTransition() est appelé. 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, mais que d'autres modèles sont également pris en charge.

Pour en savoir plus sur cette API, consultez cet article, qui contient des exemples et des informations détaillées, ou consultez la documentation sur les transitions sur MDN.

Niveau de couleur CSS 4.

Avec le niveau de couleur 4 du CSS, le CSS est désormais compatible avec les affichages haute définition, en spécifiant les couleurs des gammes HD et en proposant des espaces colorimétriques avec des spécialisations.

En bref, cela signifie que vous avez 50% de couleurs en plus à choisir ! Vous pensiez que 16 millions de couleurs ressemblait à beaucoup de choses. Je le pensais aussi.

Une série d'images est montrée à la transition entre des gammes de couleurs larges et étroites, pour illustrer la netteté des couleurs et ses effets.
Essayer vous-même

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

Voici quelques exemples d'utilisation de la fonction color 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 et profiter pleinement des couleurs haute définition avec CSS.

Nouveaux outils de développement de couleur

Les outils de développement disposent de nouvelles fonctionnalités compatibles avec la spécification de couleur CSS de niveau 4.

Le volet Styles accepte désormais les 12 nouveaux espaces de couleur et les sept nouvelles gammes décrites 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 dans une autre, vous pouvez afficher la couleur finale dans le volet Calculé : color-mix dans le volet "Calculé".

De plus, le sélecteur de couleur prend en charge tous les nouveaux espaces de couleur avec davantage de fonctionnalités. Par exemple, cliquez sur l'échantillon de couleur(display-p3 1 0 1). Une ligne de délimitation de la gamme a également été ajoutée. Elle permet de distinguer les gammes sRVB et display-p3 afin de mieux comprendre la gamme de la couleur sélectionnée.

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

Conversion des couleurs entre les formats de couleur.

Consultez cet article pour en savoir plus sur le débogage des couleurs et sur d'autres nouvelles fonctionnalités dans les outils de développement.

Et bien plus !

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

CSS a ajouté des fonctions trigonométriques, des unités de police racine supplémentaires et un pseudo-sélecteur enfant étendu.
L'API Document Picture-in-picture est en phase d'évaluation
Les actions previousslide et nextslide font désormais partie de l'API Media Session. Cliquez ici pour regarder la démonstration.

Complément d'informations

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

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 Adriana Jara et dès la sortie de Chrome 112, je serai là pour vous dire quelles nouveautés sont disponibles.