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

Nouveautés de Chrome 127

Adriana Jara

Voici les informations à retenir :

font-size-adjust vous aide à améliorer la lisibilité des polices de remplacement.
Les activations utilisateur sont désormais propagées entre les documents Picture-in-picture et leur ouvre-fichier.
Les conteneurs de défilement sont désormais sélectionnables au clavier par défaut.
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

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

CSS `font-size-adjust`

La lisibilité de votre site peut diminuer lorsque la famille de polices de premier choix n'est pas disponible et que la police de remplacement a une valeur d'aspect très différente.

L'image suivante montre la différence entre les polices Verdana et Times, même si le texte est de la même taille.

Lignes de texte indiquant: "Ce texte utilise la police Verdana (14 pixels), qui comporte des lettres minuscules relativement grandes" et "Ce texte utilise la police Times (14 pixels), qui est difficile à lire en petites tailles"

Si votre site devait utiliser la police Times, il serait beaucoup plus difficile à lire.

La propriété CSS font-size-adjust vous permet d'ajuster la taille de police des polices de remplacement pour que les valeurs d'aspect (hauteur des lettres minuscules divisées par la taille de la police) soient cohérentes, et que le texte s'affiche de façon similaire, quelle que soit la police utilisée.

Dans l'image suivante, l'utilisation de font-size-adjust permet de maintenir la lisibilité entre les polices Verdana et Times.

   font-size-adjust: 0.545;

Lignes de texte indiquant "Ce texte utilise la police Verdana (14 pixels), qui comporte des lettres minuscules relativement grandes", "Ce texte utilise la police Times (14 pixels), qui est difficile à lire en petites tailles" et "Ce texte en police Times de 14 pixels est ajusté à la même valeur d'aspect que la police Verdana. Les polices minuscules sont donc normalisées entre les deux polices

Avec le lancement de font-size-adjust dans Chrome, cette fonctionnalité devient disponible en version de référence. Pour en savoir plus, consultez CSS font-size-adjust est désormais en version de référence.

Document Picture-in-picture: propager l'activation de l'utilisateur

L'API Document Picture-in-picture propage désormais les activations de l'utilisateur entre la fenêtre Picture-in-picture du document et son écran d'ouverture.

Consultez la démo de propagation de l'activation des gestes utilisateur et observez les modifications apportées à la couleur d'arrière-plan de la page lorsqu'une activation de l'utilisateur est détectée. Le geste de l'utilisateur est propagé dans les deux contextes, ce qui modifie l'arrière-plan des deux fenêtres.

Les activations utilisateur dans une fenêtre Picture-in-picture de document peuvent ainsi être utilisées dans la fenêtre d'ouverture et inversement. Ce changement rend l'utilisation des API soumises à l'activation par l'utilisateur plus ergonomique, car les gestionnaires d'événements de la fenêtre Picture-in-picture du document sont souvent exécutés dans le contexte de l'ouvreur. Le contexte de l'ouvreur doit donc avoir accès au geste de l'utilisateur.

Pour en savoir plus, consultez Mode Picture-in-Picture pour n'importe quel élément, pas seulement <video>.

Conteneurs de défilement sélectionnables au clavier.

Il est important que les conteneurs de défilement soient sélectionnables au clavier pour rendre les défileurs et le contenu qu'ils contiennent plus accessibles à tous les utilisateurs.

À partir de maintenant, les barres de défilement seront sélectionnables de manière programmatique par défaut. Avant cette modification, un élément de défilement ne pouvait être sélectionné par tabulation que si le tabindex était explicitement défini sur 0 ou plus.

Notez que ce comportement ne se produit que si le conteneur de défilement ne comporte aucun enfant sélectionnable. Par exemple, si le conteneur de défilement contient déjà un bouton, la touche Tabulation ignore le conteneur de défilement et sélectionne directement le bouton.

Les bonnes pratiques d'accessibilité recommandent que toutes les fonctionnalités soient disponibles à l'aide d'un clavier. Les barres de défilement sélectionnables par défaut au clavier permettent à l'utilisateur d'accéder plus facilement aux barres de défilement à l'aide de la navigation séquentielle.

Notez que cette modification est activée très lentement pour les utilisateurs au fil du temps, afin que nous puissions surveiller les problèmes qu'elle pourrait entraîner. Par conséquent, il est possible que certains utilisateurs ne voient cette fonctionnalité activée qu'à partir de la version 130, voire plus tard.

Pour en savoir plus, consultez la section Barres de défilement sélectionnables au clavier.

Et bien plus !

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

Les transitions de vue simultanées du même document dans un frame principal et un iFrame de même origine sont désormais disponibles.
Le texte alternatif généré à partir de contenus CSS est désormais compatible avec plusieurs arguments.
Le panneau "Performances" des DevTools capture désormais les événements de message WebSocket et les affiche dans la trace des performances.

Consultez les notes de version complètes.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour découvrir les modifications supplémentaires dans Chrome 127.

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