Nouveautés sur la plate-forme Web en novembre

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

Rachel Andrew

Versions stables des navigateurs

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

Modification du comportement de la fenêtre d'affichage de la mise en page dans Chrome sur Android

Le comportement de la fenêtre d'affichage de la mise en page a été modifié à partir de Chrome 108 sur Android lorsque le clavier à l'écran est affiché. Pour en savoir plus, consultez Se préparer aux changements de comportement de redimensionnement de la fenêtre d'affichage à venir dans Chrome sur Android.

Nouvelles unités de fenêtre d'affichage

Chrome 108 contient également les nouvelles unités de fenêtre d'affichage 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. Cela signifie que nous disposons désormais d'une interopérabilité entre les trois principaux moteurs de navigateur pour ces unités.

Consultez l'article Blocs de fenêtre d'affichage dynamiques, petits et grands.

La propriété CSS abrégée contain-intrinsic-size est compatible avec Firefox 107, tout comme les contain-intrinsic-width, contain-intrinsic-height et 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.

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 de planter avant, après ou à l'intérieur de l'élément auquel elle est appliquée. Par exemple, le CSS suivant évite qu'une figure ne soit rompue lors d'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 affiche une boîte de dialogue de médiation du navigateur qui permet aux utilisateurs de choisir des comptes à partir de fournisseurs d'identification pour se connecter à des sites Web. FedCM est disponible dans Chrome 108. Pour en savoir plus, consultez l'article de blog annonçant FedCM.

Versions bêta des navigateurs

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é. 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 du 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