Nouveautés sur la plate-forme Web en novembre

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

En novembre, Firefox 107 et Chrome 108 sont devenus stables. Voyons ce que cela signifie pour la plate-forme Web.

Le comportement du viewport de mise en page a changé à partir de Chrome 108 sur Android lorsque le clavier à l'écran s'affiche. Pour en savoir plus, consultez Préparation aux modifications de comportement de redimensionnement de la vue dans Chrome sur Android.

Nouvelles unités de fenêtre d'affichage

Chrome 108 inclut é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, ce qui signifie que nous disposons désormais d'une interopérabilité entre les trois principaux moteurs de navigateur pour ces unités.

Consultez Unités de fenêtre d'affichage grandes, petites et dynamiques.

Navigateurs pris en charge

  • Chrome: 108
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

La propriété CSS abrégée contain-intrinsic-size est compatible avec Firefox 107, ainsi que les propriétés contain-intrinsic-width et contain-intrinsic-height à longue écriture, ainsi que les propriétés logiques contain-intrinsic-block-size et contain-intrinsic-inline-size.

Ils sont appliqués pour spécifier la taille d'un élément d'interface utilisateur soumis à la structuration de la taille. Cela permet à un user-agent de déterminer la taille d'un élément sans avoir à afficher ses éléments enfants. Ils sont utiles lorsqu'un élément est soumis à une contenante de taille.

Navigateurs pris en charge

  • Chrome: 83.
  • Edge: 83.
  • Firefox: 107.
  • Safari: 17.

Source

Prise en charge du mot clé avoid de fragmentation CSS

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;
}

Cette fonctionnalité a été ajoutée en raison de l'ajout de la compatibilité avec l'impression à l'aide de LayoutNG. Elle offre une expérience moderne et moins buguée. En savoir plus sur LayoutNG

API Federated Credential Management

L'API Federated Credential Management (FedCM) fournit une abstraction pour les flux d'identité fédérée sur le Web. Il expose une boîte de dialogue gérée par le navigateur qui permet aux utilisateurs de choisir des comptes auprès de fournisseurs d'identité pour se connecter à des sites Web. FedCM est disponible dans Chrome 108. Pour en savoir plus, consultez cet article de blog.

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. En raison des dates de sortie, la seule nouvelle version bêta de ce mois est Firefox 108, tandis que la version bêta de Safari 16.2 est toujours en cours.

Firefox 108 accepte les attributs height et width pour l'élément <source> lorsqu'il est enfant d'un élément <picture>. Ces attributs acceptent la hauteur ou la largeur de l'image, en pixels, sous la forme d'un entier sans unité.

L'implémentation des requêtes de conteneur est en cours dans Firefox. Derrière l'indicateur layout.css.container-queries.enabled dans la version bêta de Firefox 108, vous trouverez les unités de longueur de requête de conteneur : cqw, cqh, cqi, cqb, cqmin et cqmax. Il s'agit d'unités de longueur par rapport à la taille d'un conteneur de requêtes.

Partie de la série Nouveau sur le Web