Découvrez certaines des fonctionnalités intéressantes qui ont été disponibles dans les 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 implique pour la plate-forme Web.
Modification du comportement de la fenêtre d'affichage de mise en page dans Chrome sous Android
Le comportement de la fenêtre d'affichage de mise en page a été modifié à partir de Chrome 108 sur Android lorsque le clavier à l'écran est affiché. Pour en savoir plus, consultez Préparez-vous aux changements de comportement de redimensionnement de la fenêtre d'affichage dans Chrome sur Android.
Nouvelles unités de fenêtre d'affichage
Chrome 108 comprend é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 blocs sont déjà implémentés dans Firefox et Safari, ce qui signifie que nous pouvons désormais interagir avec les trois principaux moteurs de navigateur pour ces blocs.
Consultez l'article Petits, grands et blocs de fenêtre d'affichage dynamiques.
Navigateurs pris en charge
- 108
- 108
- 101
- 15,4
La propriété CSS abrégée contain-intrinsic-size est compatible avec Firefox 107, ainsi que les propriétés longues contain-intrinsic-width, contain-intrinsic-height et les propriétés logiques contain-intrinsic-block-size et contain-intrinsic-inline-size.
Elles sont appliquées pour spécifier la taille d'un élément d'interface utilisateur soumis à un confinement de taille. Cela permet à un user-agent de déterminer la taille d'un élément sans avoir à afficher ses éléments enfants. Elles sont utiles lorsqu'un élément est soumis à un confinement de taille.
Compatibilité avec le 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 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;
}
Cet ajout est dû à l'inclusion d'une prise en charge de l'impression via LayoutNG, qui offre une expérience moderne avec moins de bugs. 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 navigateur qui permet aux utilisateurs de choisir des comptes à partir de fournisseurs d'identité pour se connecter à des sites Web. FedCM sera disponible dans Chrome 108. Pour en savoir plus, consultez l'article de blog sur l'annonce FedCM.
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. En raison de leur date de sortie, la seule nouvelle version bêta ce mois-ci est Firefox 108, et 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 un 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 se trouvent les unités de longueur de requête du conteneur : cqw, cqh, cqi, cqb, cqmin, cqmax. Il s'agit d'unités de longueur par rapport à la taille d'un conteneur de requêtes.
Fait partie de la série Web "New to the Web Series"