Découvrez certaines des fonctionnalités intéressantes qui ont été intégrées aux navigateurs Web stables et bêta en octobre 2022.
Versions stables du navigateur
En octobre, Firefox 106, Chrome 107 et Safari 16.1 sont devenus stables. Voyons ce que cela signifie pour la plate-forme Web.
Animation des pistes de la grille
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.
Navigateurs pris en charge
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