Nouveaux utilisateurs sur la plate-forme Web en février

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

Rachel Andrew

Publié le 28 février 2025

Versions stables du navigateur

En février 2025, Firefox 135 et Chrome 133 sont devenus stables. Cet article présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Vérifier les fonctionnalités WebAuthn

Firefox 135 et Chrome 133 prennent tous deux en charge la méthode statique PublicKeyCredential.getClientCapabilities(). Cela vous permet de vérifier si un navigateur est compatible avec les fonctionnalités de l'API Web Authentication, sans avoir à recourir à l'analyse du trafic du navigateur.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 inclut également des fonctionnalités de l'analyse JSON avec proposition de source : l'argument context du paramètre reviver JSON.parse, JSON.isRawJSON() et JSON.rawJSON().

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 135.
  • Safari: not supported.

Source

Valeur d'indice de l'attribut popover

Chrome 133 ajoute une troisième valeur pour l'attribut popover : popover="hint". Les indices, qui sont le plus souvent associés à des comportements de type "info-bulle", ont des comportements légèrement différents. Il est désormais possible d'ouvrir un popover d'indice sans rapport alors qu'une pile existante de popovers automatiques reste ouverte.

L'exemple canonique est un sélecteur <select> ouvert (popover="auto") et une info-bulle déclenchée par le survol (popover="hint"). Cette action ne ferme pas le sélecteur <select>.

Browser Support

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

Pour en savoir plus, consultez Pop-up = indice.

Fonction attr() CSS avancée

Chrome 133 propose une belle collection d'ajouts CSS. Cette version de Chrome inclut l'augmentation de attr() spécifiée dans le niveau 5 du CSS, qui permet d'utiliser des types autres que <string> dans toutes les propriétés CSS (en plus de la prise en charge existante du contenu du pseudo-élément).

Browser Support

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

Pour en savoir plus, consultez Mise à niveau de CSS attr().

Requêtes de conteneur d'état de défilement CSS

Dans Chrome 133, utilisez également des requêtes de conteneur pour styliser les descendants de conteneurs en fonction de leur état de défilement.

Le conteneur de requête est un conteneur de défilement ou un élément affecté par la position de défilement d'un conteneur de défilement. Vous pouvez interroger les états suivants:

  • stuck: un conteneur positionné de manière fixe est collé à l'un des bords de la zone de défilement.
  • snapped: un conteneur aligné sur le point d'ancrage de défilement est actuellement ancré horizontalement ou verticalement.
  • scrollable: indique si un conteneur de défilement peut être défilé dans la direction de la requête.

Une nouvelle valeur pour container-type est également disponible: scroll-state, qui permet d'interroger les conteneurs.

Browser Support

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

Pour en savoir plus, consultez scroll-state() CSS.

CSS text-box, text-box-trim et text-box-edge

Les propriétés text-box-trim et text-box-edge, ainsi que la propriété abrégée text-box, sont également disponibles dans le CSS pour Chrome 133. Elles permettent de contrôler plus précisément l'alignement vertical du texte.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Découvrez comment fonctionne cette propriété utile dans CSS text-box-trim.

Déplacement préservant l'état DOM

Chrome 133 ajoute une primitive DOM (Node.prototype.moveBefore) qui vous permet de déplacer des éléments dans un arbre DOM, sans réinitialiser leur état.

Lorsque vous déplacez un élément au lieu de le supprimer et de l'insérer, l'état suivant est conservé:

  • Les éléments <iframe> restent chargés.
  • L'élément actif reste sélectionné.
  • Les pop-ups, les boîtes de dialogue en plein écran et les boîtes de dialogue modales restent ouverts.
  • Les transitions et les animations CSS continuent.

Browser Support

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

Interface FileSystemObserver

L'interface FileSystemObserver ajoutée dans Chrome 133 informe les sites Web des modifications apportées au système de fichiers. Les sites observent les modifications apportées aux fichiers et aux répertoires auxquels l'utilisateur a précédemment accordé une autorisation, sur son appareil local ou dans le système de fichiers Bucket (également appelé système de fichiers privé d'origine). Ils sont informés des informations de modification de base, telles que le type de modification.

Browser Support

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

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 136, Safari 18.4 et Chrome 134. 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.

La dernière version bêta de Safari apporte une longue liste d'ajouts et d'améliorations, y compris certaines fonctionnalités qui devraient devenir disponibles en tant que référence une fois que ce navigateur sera stable. Par exemple, writing-mode: sideways-rl et writing-mode: sideways-lr, la méthode statique supports() pour ClipboardItem et une liste complète d'éléments de la proposition d'aides d'itérateur.

La version bêta de Safari 18.4 et Firefox 136 incluent l'API Cookie Store, qui devrait être disponible en tant que référence une fois les deux navigateurs commercialisés.

Firefox 136 inclut les pseudo-classes :open et :has-slotted, cette dernière étant également disponible dans Chrome 134. Il inclut également Intl.DurationFormat, qui doit alors être défini sur "Nouvelle référence disponible".

Chrome 134 inclut des éléments <select> personnalisables, la propriété CSS dynamic-range-limit et la fonctionnalité de fermeture légère pour les éléments <dialog>.