Découvrez certaines des fonctionnalités intéressantes qui ont été ajoutées aux navigateurs Web stables et bêta en novembre 2022.
Versions stables du navigateur
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 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
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.
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