Nouveaux utilisateurs sur la plate-forme Web en octobre

Découvrez certaines 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 implique pour la plate-forme Web.

Animation des pistes de grille

Grâce au travail de nos contributeurs de 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 à l'autre de manière fluide, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.

Passez la souris sur les avatars pour voir l'animation. Cet exemple est tiré de l'article Mises en page de la grille animée CSS pour en savoir plus.

Navigateurs pris en charge

• 107
• 107
• 66
• 16

Ajouts à getDisplayMedia()

Chrome propose également des ajouts à getDisplayMedia() visant à éviter les partages d'écran accidentels 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 dynamiquement d'un onglet partagé à un autre.
• L'option selfBrowserSurface permet d'empêcher l'utilisateur de partager l'onglet actuel. Cela permet d'éviter l'effet "hall des miroirs".
• L'option systemAudio garantit que Chrome ne propose à l'utilisateur que la capture audio pertinente.

Safari 16.1 prend également en charge getDisplayMedia et permet de capturer une fenêtre Safari spécifique.

Test de la compatibilité de la technologie de police et des fonctionnalités CSS

Firefox a ajouté les fonctions font-tech() et font-format() aux requêtes de caractéristiques avec @supports. L'exemple suivant teste la compatibilité des 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 prend en charge le défilement vers un fragment de texte, ce qui permet d'accéder à une URL dont un fragment de texte spécifique est spécifié.

Compatibilité avec le format AVIF

Safari 16 incluait la prise en charge des images AVIF fixes, tandis que Safari 16.1 est compatible avec les images AVIF animées sous macOS Ventura, iOS 16 et iPadOS 16.

Web Push pour Safari

Safari 16.1 est compatible avec le push Web dans Safari sur macOS Ventura. Cette fonctionnalité utilise les API Push et Notifications. Pour en savoir plus, consultez l'article Meet Web Push. La fonction Web Push dans Safari signifie qu'elle est maintenant disponible sur les trois principaux moteurs.

Versions bêta des navigateurs

Les versions bêta vous donnent un aperçu de ce qui sera disponible dans 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 qu'elles soient publiées. Les nouvelles versions bêta ce mois-ci 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 de ne plus fonctionner avant, après ou à l'intérieur de l'élément auquel il est appliqué. Par exemple, le code CSS suivant permet d'éviter qu'une figure ne soit endommagée lors d'un saut de page.

figure {
    break-inside: avoid;
}

Chrome 108 commence à déployer une modification du comportement du dépassement sur les éléments remplacés, ce qui peut entraîner des changements visuels dans certains cas. Pour en savoir plus et découvrir comment résoudre les problèmes que vous constatez, consultez l'article Dépassement du nombre d'éléments remplacés dans le CSS.

Le comportement de la fenêtre d'affichage de la mise en page dans Chrome sur Android a été modifié lorsque le clavier à l'écran est affiché. Consultez l'article Se préparer aux changements de comportement de redimensionnement de la fenêtre d'affichage à venir dans Chrome sur Android pour en savoir plus et découvrir comment vous préparer à ce lancement stable le mois prochain.

Chrome propose également de nouvelles unités de fenêtre d'affichage CSS. Il s'agit des unités suivantes : 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, ajoutant ainsi la compatibilité de Chrome avec cette technologie de police. Également dans les polices, Chrome 108 est compatible avec les fonctions font-tech() et font-format() pour afficher les requêtes avec @supports.

Firefox prend également en charge contain-intrinsic-size, rejoignant Chrome pour créer deux navigateurs compatibles avec cette fonctionnalité.

Safari 16.2 bêta inclut de nombreuses corrections CSS, y compris le dimensionnement et l'ancrage du défilement.

Fait partie de la série Web "New to the Web Series"