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.

Rachel Andrew

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 au milieu d'une animation ou d'une transition.

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 à passer d'un onglet partagé à un autre de manière dynamique.
• 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 que la capture audio pertinente à l'utilisateur.

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

Test de la compatibilité avec la technologie de police et les fonctionnalités 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, qui permet d'accéder à une URL contenant un fragment de texte particulier.

Prise en charge d'AVIF

Safari 16 est compatible avec les images fixes AVIF, et Safari 16.1 accepte les images AVIF animées sous macOS Ventura, iOS 16 et iPadOS 16.

Web push pour Safari

Safari 16.1 est compatible avec Web Push dans Safari sur macOS Ventura. Cette fonctionnalité utilise l'API Push et l'API 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 nouveautés de la prochaine version stable du navigateur. C'est le moment idéal pour tester de nouvelles fonctionnalités, ou des suppressions, qui pourraient avoir un impact sur votre site avant que le monde ne soit lancé. 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 été modifié 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éparez-vous aux modifications de comportement du 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 prend en charge les polices COLRv1, tout comme Chrome prend en charge cette technologie de police. 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é.

Safari 16.2 bêta apporte de nombreuses corrections CSS, y compris la taille et l'ancrage du défilement.

Partie de la série Nouveau sur le Web