Découvrez certaines fonctionnalités intéressantes qui ont été disponibles dans les navigateurs Web stables et bêta en mai 2024.
Versions stables du navigateur
En mai 2024, Firefox 126, Safari 17.5 et Chrome 125 sont devenus stables. Cet article porte sur les nouvelles fonctionnalités ajoutées à la plate-forme Web.
Positionnement de l'ancrage CSS
Chrome 125 inclut le positionnement de l'ancrage CSS. Vous pouvez ainsi partager un élément positionné de façon absolue avec un ou plusieurs autres éléments de la page (les ancrages), de manière déclarative, sans utiliser JavaScript. Le positionnement des ancrages fonctionne de manière optimale lorsqu'il est possible de les faire défiler. Un cas d'utilisation courant consiste à positionner un pop-up, tel qu'une info-bulle à côté de l'élément qui l'a appelé, ou un menu de sélection et sa liste d'options.
Pour en savoir plus, consultez Présentation de l'API de positionnement de l'ancrage CSS.
Fonctions de valeur échelonnées CSS : round(), mod() et rem()
Chrome 125 inclut également les fonctions de valeur échelonnées, ce qui signifie qu'elles sont désormais disponibles dans la nouvelle version de référence. Les fonctions de valeurs échelonnées, round(), mod() et rem(), transforment toutes une valeur donnée selon une autre "valeur d'étape".
Pour en savoir plus, consultez la section Les fonctions mathématiques de valeur échelonnée CSS sont désormais disponibles dans Baseline 2024.
La fonction light-dark()
La fonction de couleur CSS light-dark(), qui se trouve dans Safari 17.5, est également jointe à la nouvelle version de référence disponible.
light-dark() est une fonction qui accepte deux arguments, qui doivent tous deux être de type <color>. L'une des deux est sélectionnée en fonction du jeu de couleurs utilisé.
- Si le jeu de couleurs utilisé est
lightou inconnu, la valeur calculée de la première valeur est renvoyée. - Si le jeu de couleurs utilisé est
dark, la valeur calculée de la deuxième couleur est renvoyée.
Pour en savoir plus, consultez la section Couleurs dépendantes d'un jeu de couleurs CSS avec light-dark() .
API Screen Wake Lock
Dans Firefox 126, l'API Screen Wake Lock est une autre fonctionnalité qui fait désormais partie de la nouvelle fonctionnalité Baseline disponible. Cette API permet d'empêcher l'appareil de s'assombrir et de verrouiller l'écran.
Découvrez comment utiliser cette fonctionnalité dans Rester activé avec l'API Screen Wake Lock.
API Compute Pressure
L'API Compute Pressure propose des états généraux qui représentent la charge du processeur sur le système. Cela permet à l'implémentation d'utiliser les bonnes métriques matérielles sous-jacentes pour s'assurer que les utilisateurs peuvent profiter de toute la puissance de traitement à leur disposition tant que le système n'est pas soumis à un stress ingérable.
Cette fonctionnalité est disponible dans Chrome 125. Intel a dirigé le travail de conception et d'implémentation de cette API, qui permettra aux applications de visioconférence d'équilibrer dynamiquement les fonctionnalités et les performances.
Consultez la documentation de l'API Compute Pressure.
Règle @starting-style
Safari 17.5 inclut la règle @starting-style. Cette règle at CSS vous permet d'appliquer un style que le navigateur peut rechercher avant que l'élément ne soit ouvert sur la page, si nécessaire pour les animations d'entrée.
La règle @starting-style est l'une des fonctionnalités abordées dans Quatre nouvelles fonctionnalités CSS pour des animations d'entrée et de sortie fluides.
Versions bêta des navigateurs
Les versions bêta 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 de nouvelles fonctionnalités, ou suppressions, qui pourraient avoir un impact sur votre site avant que le reste du monde ne soit publié. Les nouvelles versions bêta sont Firefox 127 et Chrome 126. Ces versions apportent de nombreuses fonctionnalités intéressantes à la plate-forme. Consultez les notes de version pour en savoir plus. Voici quelques-unes des principales nouveautés.
Chrome 126 inclut des transitions de vue inter-document pour les navigations à la même origine. Auparavant, pour pouvoir utiliser l'API View Transitions, vous deviez repenser l'architecture de votre site Web vers une application monopage. Ce n'est plus le cas. Les transitions de vue sont désormais activées par défaut pour les navigations de même origine. Vous pouvez créer une transition de vue entre deux documents différents de la même origine.
Firefox 127 inclut des méthodes JavaScript Set supplémentaires : intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() et isDisjointFrom().