Nouveaux utilisateurs sur la plate-forme Web en août

Découvrez certaines des fonctionnalités intéressantes qui ont été intégrées aux navigateurs Web stables et bêta en août 2024.

En août 2024, Firefox 129 et Chrome 128 sont devenus stables. Cet article présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Modifications apportées à la mise en forme du ruby

L'élément HTML <ruby> est un outil puissant pour améliorer la présentation du texte, en particulier pour les langues d'Asie de l'Est. Cet élément vous permet d'afficher des annotations phonétiques ou d'autres informations supplémentaires au-dessus ou à côté du texte de base. À partir de Chrome 128, l'annotation Ruby peut être mise en page sur plusieurs lignes, et vous pouvez styliser le texte Ruby avec la propriété CSS ruby-align.

Pour en savoir plus, consultez <ruby> pouvant être interrompu et propriété CSS ruby-align.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties pour l'encrage multistyle

Cette modification, disponible dans Chrome 128, permet d'identifier de manière sécurisée et fiable les différents stylets (pointeurs) qui interagissent avec l'écran afin de définir des couleurs ou des formes de stylet spécifiques pour chaque appareil qui interagit avec le numériseur. Il étend l'interface PointerEvent pour inclure un nouvel attribut, deviceProperties. Il contient l'attribut uniqueId, qui représente un identifiant unique persistant au niveau de la session et isolé du document que vous pouvez utiliser de manière fiable pour identifier les différents stylos qui interagissent avec la page.

Promise.try

Dans Chrome 128, Promise.try permet également de gérer plus facilement les erreurs avec les promesses. Il existe un modèle dans lequel vous avez une fonction, f. Cette fonction peut être asynchrone et renvoyer une promesse, ou non. Pour utiliser la sémantique des promesses pour gérer les erreurs dans les deux cas, encapsulez la fonction dans une promesse. Pour ce faire, utilisez généralement new Promise(resolve => resolve(f())).

Promise.try est un moyen plus simple d'y parvenir. Il vous permet de démarrer une chaîne de promesses qui intercepte toutes les erreurs dans les gestionnaires .catch au lieu d'avoir à gérer à la fois les flux d'exception synchrones et asynchrones.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

Animer les effets d'entrée

Firefox 129 inclut deux fonctionnalités CSS utilisées pour animer les effets de saisie. Ces fonctionnalités sont désormais disponibles en tant que référence.

La règle @starting-style définit les styles initiaux d'un élément avant son affichage sur la page. Cela est nécessaire pour les éléments qui s'animent à partir de display: none, car ils ont besoin d'un état à partir duquel s'animer.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Les effets d'entrée nécessitent également l'animation de propriétés discrètes, celles qui ne peuvent pas être interpolées entre les valeurs. Vous pouvez désormais utiliser transition-behavior: allow-discrete ou la valeur allow-discrete dans votre raccourci de transition. Cette fonctionnalité est désormais également compatible avec Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

Pour en savoir plus, consultez Nouveau dans la version de référence: animer les effets d'entrée.

Ajouts à PerformanceResourceTiming

Firefox 129 ajoute les propriétés contentType et responseStatus de l'interface PerformanceResourceTiming. Ils indiquent respectivement le type de contenu de la ressource extraite et le code d'état de la réponse HTTP renvoyé lors de l'extraction de la ressource.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Méthodes toJSON() de géolocalisation

GeolocationCoordinates.toJSON() et GeolocationPosition.toJSON() sont également disponibles dans Firefox 129.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 est désormais compatible avec WebDriver BiDi. Cela signifie que vous pouvez utiliser Puppeteer avec Chrome ou Firefox pour les automatisations. Pour en savoir plus, consultez WebDriver BiDi prêt à la production dans Firefox, Chrome et Puppeteer et Annonce de la prise en charge officielle de Puppeteer pour Firefox.

Versions bêta du navigateur

Les versions bêta du navigateur vous donnent un aperçu des éléments qui seront disponibles dans la prochaine version stable du navigateur. C'est le moment idéal pour tester les nouvelles fonctionnalités ou les suppressions qui pourraient avoir un impact sur votre site avant que tout le monde ne les ait. Les nouvelles versions bêta sont Firefox 130 et Chrome 129. La version bêta de Safari 18 est toujours en cours. Ces versions apportent de nombreuses fonctionnalités intéressantes à la plate-forme. Consultez les notes de version pour en savoir plus. Voici quelques-unes des principales nouveautés.

Firefox 130 prend en charge l'attribut name de l'élément <details> regroupant les éléments <details>, où un seul élément d'un groupe peut être ouvert à la fois. Vous pouvez ainsi créer un accordéon exclusif sans utiliser JavaScript.

Chrome 129 ajoute la propriété CSS interpolate-size et la fonction calc-size().

La propriété CSS interpolate-size permet à une page d'activer les animations et les transitions des mots clés de dimensionnement intrinsèque CSS tels que auto, min-content et fit-content, dans les cas où ces mots clés peuvent être animés.

La fonction CSS calc-size() est une fonction CSS semblable à calc(). Toutefois, elle accepte également les opérations sur un seul mot clé de dimensionnement compatible. Les mots clés de dimensionnement actuellement acceptés sont auto, min-content, max-content et fit-content.

Chrome 129 inclut également Intl.DurationFormat, qui permet de mettre en forme des durées (par exemple, "1 h 40 min 30 s") et est compatible avec plusieurs paramètres régionaux.