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 ouverture.
  • Les conteneurs de défilement sont désormais sélectionnables par défaut au clavier.
  • Et ce n'est pas tout !

Je m'appelle Adriana Jara. Entrons dans le vif du sujet et découvrons les nouveautés de Chrome 127 pour les 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 valeur de sa police de remplacement est 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 px), dont les minuscules sont relativement grandes." et "This utilise une police Times (14px), qui est difficile à lire dans les petites tailles".

Si votre site revient à la police Times, il devient 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 préserver la lisibilité entre les polices Verdana et Times.

   font-size-adjust: 0.545;

Lignes de texte indiquant : "Ce texte utilise la police verdana (14 px), qui contient des lettres minuscules relativement grandes", "Ce texte utilise une police Times (14 px), qui est difficile à lire en petite taille" et « Ce texte en police 14 px Times est ajusté à la même valeur d'aspect que la police Verdana, de sorte que les polices minuscules sont normalisées entre les deux polices

Avec le lancement de font-size-adjust dans Chrome, cette fonctionnalité devient Baseline. Consultez les détails dans CSS font-size-adjust est désormais inclus dans Baseline.

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.

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

Les activations effectuées par l'utilisateur dans une fenêtre Picture-in-picture d'un document peuvent ainsi être utilisées dans la fenêtre d'ouverture et inversement. Cette modification rend l'utilisation des API dont l'activation est contrôlée par l'utilisateur, car les gestionnaires d'événements dans la fenêtre Picture-in-picture du document sont souvent exécutés dans le contexte de l'ouverture. Le contexte de l'ouverture doit donc avoir accès au geste de l'utilisateur.

Consultez Picture-in-picture pour tous les éléments, pas seulement <video> pour en savoir plus.

Conteneurs de défilement sélectionnables au clavier.

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

À partir de maintenant, les curseurs peuvent être sélectionnés par un clic et programmatiquement par défaut. Avant cette modification, un élément de défilement ne pouvait être sélectionné que si l'index de tabulation était explicitement défini sur 0 ou plus.

Notez que ce comportement ne se produit que si le conteneur de défilement n'a pas d'enfants sélectionnables. Par exemple, si le conteneur de défilement contient déjà un bouton, le curseur de la touche Tabulation ignore la zone de défilement et se concentre directement sur le bouton.

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

Pour en savoir plus, consultez Défilements sélectionnables au clavier

Et bien plus !

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

  • Les transitions simultanées d'affichage du même document dans un frame principal et dans un iFrame de même origine sont désormais disponibles.

  • Le texte alternatif généré à partir du contenu CSS accepte désormais plusieurs arguments.

  • Le panneau "Performances" de DevTools capture désormais les événements de message WebSocket et les affiche dans la trace des performances.

Lisez les notes de version complètes.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens suivants pour modifications supplémentaires dans Chrome 127.

S'abonner

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

Salut Adriana Jara ! Dès la sortie de Chrome 127, je serai là pour vous présenter les nouveautés de Chrome.