Nouveaux utilisateurs sur la plate-forme Web en juin

Découvrez certaines des fonctionnalités intéressantes disponibles dans les navigateurs Web stables et bêta en juin 2022.

En juin, Chrome 103 et Firefox 102 sont devenus stables.

Firefox 102 est compatible avec les flux de transformation. Cela permet de canaliser ReadableStream vers un WritableStream, en exécutant une transformation sur les segments. Nous sommes ravis de voir cette fonctionnalité disponible dans les trois moteurs. C'est donc le moment idéal pour découvrir les flux.

Navigateurs pris en charge

  • Chrome: 67
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Source

Les flux d'octets lisibles sont désormais également compatibles avec Firefox 102, ce qui permet d'utiliser un lecteur BYOB (Bring Your Own Buffer) avec l'interface ReadableStreamBYOBReader. Il peut être utilisé pour diffuser en continu les données fournies par le développeur.

Navigateurs pris en charge

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: non compatible.

Source

Accéder aux polices installées localement

Chrome 103 inclut l'API Local Font Access, qui permet d'accéder aux polices installées localement par l'utilisateur. Après avoir demandé l'accès aux polices installées sur l'appareil, appelez window.queryLocalFonts() pour obtenir un tableau des polices installées.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Fonctionnalité multimédia update

Firefox 102 inclut la fonctionnalité multimédia update. Permet de savoir si l'appareil de sortie peut modifier l'apparence du contenu une fois qu'il a été affiché.

Navigateurs pris en charge

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

Nouveau code d'état HTTP : 103 hints précoces

Chrome 103 ajoute un nouveau code d'état HTTP 103 "Early Hints" (Premiers indices). Si le serveur ou le CDN sait qu'un certain ensemble de sous-ressources est nécessaire pour charger une page, il peut conseiller au navigateur de préconnecter les origines ou même de précharger les ressources lorsque la page qui les nécessite arrive. Pour profiter de cette fonctionnalité, vous devez mettre à jour votre serveur ou votre CDN. En savoir plus sur les premiers indices

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 d'avril étaient Chrome 104, Firefox 103 et Safari 16.

Nouvelle syntaxe pour les requêtes multimédias de plage

Chrome 104 inclut la nouvelle syntaxe des requêtes multimédias de plage, issue de la spécification de niveau 4 des requêtes multimédias. Par exemple, une requête multimédia qui était auparavant écrite comme suit:

@media (min-width: 400px) {  }

peut désormais être écrit comme suit:

@media (width >= 400px) {  }

Navigateurs pris en charge

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Source

API Region Capture

Chrome 104 sur ordinateur comprend également l'API Region Capture. Vous pouvez ainsi recadrer et supprimer du contenu de la vidéo capturée avant de la partager.

Safari 16 apporte plusieurs fonctionnalités clés au navigateur

Safari 16 s'annonce comme une autre version passionnante de la part de l'équipe Safari. Cette version ajoute de nombreuses fonctionnalités incluses dans Interop 2022. Nous sommes ravis de voir autant de nouveautés à mi-année. Je mets en avant quelques-unes de mes fonctionnalités préférées, mais consultez les notes de version pour en savoir plus.

Comme de nombreux développeurs, je suis ravi de voir que les requêtes de taille sont compatibles avec les requêtes de conteneur, une fonctionnalité qui est également associée à un indicateur dans Chrome.

Safari 16 est également compatible avec la valeur subgrid pour grid-template-columns et grid-template-rows. Cette fonctionnalité est déjà disponible dans Firefox et en cours de développement dans Chrome. Elle permet d'hériter de la taille des canaux de grille par les grilles imbriquées.

Navigateurs pris en charge

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

La mise en page en grille permet également d'animer les canaux de la grille.

Navigateurs pris en charge

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

La méthode showPicker(), qui permet d'afficher un sélecteur de navigateur pour les dates, l'heure, la couleur et les fichiers, est incluse. Pour en savoir plus, consultez Afficher un sélecteur de navigateur pour la date, l'heure, la couleur et les fichiers.

Navigateurs pris en charge

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Source

Les problèmes d'accessibilité pour display: contents ont également été résolus, ce qui permet d'utiliser cette fonctionnalité utile en toute sécurité, sans risque de supprimer des éléments de l'arborescence d'accessibilité.

Ces fonctionnalités bêta seront bientôt disponibles dans les navigateurs stables.

Partie de la série Nouveau sur le Web