Nouveaux utilisateurs sur la plate-forme Web en septembre

Découvrez quelques-unes des fonctionnalités intéressantes qui sont disponibles en version stable et bêta. les navigateurs Web pendant septembre 2024.

Rachel Andrew

Versions stables des navigateurs

En septembre 2024, Firefox 130, Safari 18 et Chrome 129 est devenu stable. Cet article présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Accordéons exclusifs avec l'attribut name pour <details>

Firefox 130 accepte l'attribut name de l'élément <details>. Ce groupe regroupe Les éléments <details>, où un seul élément d'un groupe peut être ouvert au niveau en temps réel. Vous pouvez ainsi créer un accordéon exclusif sans utiliser JavaScript.

Navigateurs pris en charge

  • Chrome: 120
  • Edge : 120.
  • Firefox: 130
  • Safari : 17.2

Animer en mode automatique (et plus encore)

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.

Navigateurs pris en charge

  • Chrome: 129
  • Edge : non compatible.
  • Firefox: non compatible.
  • Safari : non compatible.

Source

La fonction CSS calc-size() est semblable à calc(), mais elle prend également en charge les opérations sur un seul mot clé de dimensionnement pris en charge. Les mots clés de dimensionnement acceptés sont auto, min-content, max-content et fit-content.

Navigateurs pris en charge

  • Chrome: 129
  • Edge: 129
  • Firefox : non compatible.
  • Safari : non compatible.

Source

Pour en savoir plus, consultez Animer à la hauteur: auto; (et d'autres mots clés associés à la taille intrinsèque) dans CSS.

Mettre en forme les durées en JavaScript

Chrome 129 inclut également Intl.DurationFormat, qui fournit une méthode de mise en forme des durées (par exemple, "1 h 40 min 30 s"), compatible avec plusieurs paramètres régionaux.

Navigateurs pris en charge

  • Chrome : 129.
  • Edge : 129.
  • Firefox : non compatible.
  • Safari: 16.4.

Source

API WebCodecs

L'API Web Codecs est désormais compatible avec Firefox 130 sur ordinateur, ce qui permet aux développeurs Web d'accéder à un niveau bas aux images individuelles d'un flux vidéo et aux segments audio. Les nouvelles interfaces incluent: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame et VideoColorSpace. Cette API n'est pas tout à fait rendre Baseline Newly disponible, car il n'est pas encore pris en charge dans Firefox pour Android. Toutefois, il est compatible avec Firefox (Nuit) pour Android.

Navigateurs pris en charge

  • Chrome : 94.
  • Edge: 94
  • Firefox : 130.
  • Safari : 16.4.

Source

Requêtes de style CSS pour les propriétés personnalisées

Safari 18 est compatible avec plusieurs nouvelles fonctionnalités, y compris les requêtes de style CSS. Les requêtes de style permettent de créer des styles réutilisables et de les appliquer groupe. (par exemple, lorsque vous disposez d'un composant réutilisable avec plusieurs variantes).

Navigateurs pris en charge

  • Chrome : 111.
  • Edge: 111
  • Firefox: non compatible.
  • Safari : 18.

Source

En savoir plus sur Requêtes de style CSS :

Transitions d'affichage des documents identiques

Safari 18 est également compatible avec les transitions de vue de document identiques pour les SPA, ce qui vous permet de créer des transitions visuelles entre les différents états d'une application.

Navigateurs pris en charge

  • Chrome : 111.
  • Edge : 111.
  • Firefox: non compatible.
  • Safari: 18.

Source

En savoir plus sur les transitions entre les vues du même document

Versions bêta des navigateurs

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 de nouvelles fonctionnalités, ou susceptibles d'avoir un impact sur votre site avant qu'il ne soit mis en ligne. Nouveau bêta sont Firefox 131, Chrome 130, et Safari 18.1. Ces versions apportent de nombreuses fonctionnalités intéressantes à la plate-forme. Pour en savoir plus, consultez les notes de version. Voici quelques exemples les points forts.

Firefox 131 inclut de nouveaux outils d'aide pour les itérateurs JavaScript et La fonctionnalité CHIPS (Cookies With Independent Partitioned State) est désormais activée.

Chrome 130 est compatible avec box-decoration-break: clone à la fois pour la fragmentation en ligne (mise en page en ligne) et la fragmentation par bloc (fragments créés pour l'impression et la multicolonne). Les rapports d'erreurs dans IndexedDB sont également améliorés, et un nouvel attribut connected est disponible pour l'interface SerialPort Web Serial.

Safari 18.1 est une version qui corrige des bugs liés aux fonctionnalités existantes.