Nouveaux utilisateurs sur la plate-forme Web en septembre

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

Rachel Andrew

Versions stables du navigateur

En septembre 2024, Firefox 130, Safari 18 et Chrome 129 sont devenus stables. 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 est compatible avec l'attribut name de l'élément <details>. Cela regroupe 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.

Navigateurs pris en charge

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

Animation automatique (et plus)

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 de 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 une fonction CSS semblable à calc(), mais elle accepte également les opérations sur un seul mot clé de dimensionnement compatible. 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 Animate to height: auto; (and other intrinsic sizing keywords) in CSS (Animer vers "height: auto" (et d'autres mots clés de dimensionnement intrinsèque) en 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 les ordinateurs de bureau dans Firefox 130. Les développeurs Web bénéficient ainsi d'un accès de bas niveau aux images individuelles d'un flux vidéo et aux fragments de l'audio. Les nouvelles interfaces incluent les suivantes : VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame et VideoColorSpace. Cette API ne rend pas Baseline Newly disponible, car elle n'est pas encore compatible avec Firefox pour Android. Toutefois, Firefox Nightly est compatible avec 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 en 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 les requêtes de style CSS

Mêmes transitions de vue de document

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 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 de nouvelles fonctionnalités, ou suppressions, qui pourraient avoir un impact sur votre site avant qu'elle ne soit lancée publiquement. Les nouvelles versions 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-uns des points forts.

Firefox 131 inclut de nouveaux outils d'itération JavaScript et les cookies ayant un état partitionné indépendant (CHIPS) sont désormais activés.

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). Il existe également une meilleure fonctionnalité de création de rapports d'erreurs dans IndexedDB et un nouvel attribut connected pour l'interface Web Serial SerialPort.

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