Nouveaux utilisateurs sur la plate-forme Web en octobre

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

En octobre, Firefox 106, Chrome 107 et Safari 16.1 sont devenus stables. Voyons ce que cela signifie pour la plate-forme Web.

Grâce au travail de nos contributeurs chez Microsoft, Chrome peut désormais interpoler les valeurs grid-template-columns et grid-template-rows. Cela signifie que les mises en page en grille peuvent passer d'un état à un autre de manière fluide, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.

Pointez sur les avatars pour voir l'animation. Cet exemple est tiré de l'article Mise en page de grille animée CSS, qui vous en dit plus.

Navigateurs pris en charge

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

Ajouts à getDisplayMedia()

Chrome ajoute également des éléments à getDisplayMedia() pour éviter le partage excessif accidentel lors du partage d'écran.

  • L'option displaySurface peut indiquer que l'application Web préfère proposer un type de surface d'affichage spécifique (onglets, fenêtres ou écrans).
  • L'option surfaceSwitching indique si Chrome doit autoriser l'utilisateur à basculer de manière dynamique entre les onglets partagés.
  • L'option selfBrowserSurface permet d'empêcher l'utilisateur de partager l'onglet actuel. Cela évite l'effet "hall d'ombres".
  • L'option systemAudio garantit que Chrome ne propose à l'utilisateur que la capture audio pertinente.

Safari 16.1 est également compatible avec getDisplayMedia, ce qui permet de capturer une fenêtre Safari spécifique.

Tester la prise en charge de la technologie et des fonctionnalités des polices à partir de CSS

Firefox a ajouté les fonctions font-tech() et font-format() aux requêtes de fonctionnalités avec @supports. L'exemple suivant vérifie la compatibilité avec les polices COLRv1.

@supports font-tech(color-COLRv1) {

}

Vous trouverez d'autres exemples sur MDN.

Faire défiler jusqu'à un fragment de texte

Safari 16.1 est compatible avec le défilement jusqu'à un fragment de texte, ce qui permet d'accéder à une URL avec un fragment de texte spécifique spécifié.

Prise en charge d'AVIF

Safari 16 prend en charge les images AVIF fixes, tandis que Safari 16.1 prend en charge les images AVIF animées sur macOS Ventura, iOS 16 et iPadOS 16.

Web push pour Safari

Safari 16.1 est compatible avec les notifications push Web sur macOS Ventura. Pour ce faire, utilisez les API Push et Notifications. Pour en savoir plus, consultez l'article Meet Web Push. La page de destination Web Push dans Safari signifie qu'elle est désormais disponible sur les trois principaux moteurs.

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 de ce mois sont Chrome 108, Firefox 107 et Safari 16.2.

Chrome 108 est compatible avec la valeur avoid des propriétés de fragmentation CSS break-before, break-after et break-inside lors de l'impression. Cette valeur indique au navigateur d'éviter les coupures avant, après ou dans l'élément auquel elle est appliquée. Par exemple, le CSS suivant évite qu'une figure ne soit tronquée à un saut de page.

figure {
    break-inside: avoid;
}

Chrome 108 commence à déployer un changement du comportement de l'overflow sur les éléments remplacés, ce qui peut entraîner des modifications visuelles dans certains cas. Pour en savoir plus et découvrir comment résoudre les problèmes que vous rencontrez, consultez l'article Modification de l'overflow sur les éléments remplacés en CSS.

Le comportement du viewport de mise en page a changé dans Chrome sur Android lorsque le clavier à l'écran s'affiche. Pour en savoir plus et découvrir comment vous préparer à ce déploiement en version stable le mois prochain, consultez Préparation aux modifications de comportement de redimensionnement de la vue dans Chrome sur Android.

Chrome propose également les nouvelles unités de vue CSS. Il s'agit des unités petites (svw, svh, svi, svb, svmin, svmax), grandes (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamiques (dvw, dvh, dvi, dvb, dvmin, dvmax) et logiques (vi, vb). Ces unités sont déjà implémentées dans Firefox et Safari.

Firefox 107 permet d'utiliser les polices COLRv1, comme Chrome. Dans les polices, Chrome 108 prend également en charge les fonctions font-tech() et font-format() pour les requêtes de fonctionnalités avec @supports.

Firefox ajoute également la prise en charge de contain-intrinsic-size, rejoignant Chrome pour faire de ces deux navigateurs les seuls compatibles avec cette fonctionnalité.

La version bêta de Safari 16.2 inclut de nombreux correctifs CSS, y compris pour la mise à l'échelle et l'ancrage du défilement.

Partie de la série Nouveau sur le Web