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.
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.
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().
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é :
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.
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
etnextslide
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.
- Nouveautés des outils pour les développeurs Chrome (111)
- Abandons et suppressions de Chrome 111
- Mises à jour de ChromeStatus.com pour Chrome 111
- Liste des modifications du dépôt source Chromium
- Agenda des versions Chrome
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 Adriana Jara et dès la sortie de Chrome 112, je serai là pour vous dire quelles nouveautés sont disponibles.