Découvrez certaines des fonctionnalités intéressantes qui ont été intégrées aux 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 présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.
Positionnement des ancres CSS
Chrome 125 inclut le positionnement des ancres CSS. Vous pouvez ainsi associer de manière déclarative un élément positionné de manière absolue à un ou plusieurs autres éléments de la page (les ancres), sans utiliser JavaScript. Le positionnement des ancres est efficace lorsque les ancres sont à 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 d'un menu de sélection et de sa liste d'options de pop-up.
Pour en savoir plus, consultez Présentation de l'API CSS Positioning Anchor.
Fonctions de valeur par incréments CSS : round()
, mod()
et rem()
mod()
et rem()
Chrome 125 inclut également les fonctions de valeur par incréments, ce qui signifie qu'elles sont désormais disponibles en tant que référence. Les fonctions de valeur par incréments, round()
, mod()
et rem()
, transforment toutes une valeur donnée en fonction d'une autre "valeur par incréments".
Pour en savoir plus, consultez Les fonctions mathématiques de valeur incrémentielle CSS sont désormais disponibles dans la version de référence 2024.
Fonction light-dark()
La fonction de couleur CSS light-dark()
, qui se trouve dans Safari 17.5, rejoint également la version de référence "Nouveau disponible".
light-dark()
est une fonction qui accepte deux arguments, qui doivent tous deux être des <color>
. L'un des deux est sélectionné en fonction du jeu de couleurs utilisé.
- Si le jeu de couleurs utilisé est
light
ou 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 Couleurs dépendant du jeu de couleurs CSS avec light-dark() .
API Screen Wake Lock
L'API Screen Wake Lock est disponible dans Firefox 126. Il s'agit d'une autre fonctionnalité qui fait désormais partie de la version de référence "Nouveau disponible". Cette API permet d'empêcher l'appareil de réduire la luminosité et de verrouiller l'écran.
Découvrez comment utiliser cette fonctionnalité dans Rester allumé avec l'API Screen Wake Lock.
API Compute Pressure
L'API Compute Pressure propose des états de haut niveau qui représentent la charge du processeur sur le système. Il permet à l'implémentation d'utiliser les bonnes métriques matérielles sous-jacentes pour s'assurer que les utilisateurs peuvent exploiter toute la puissance de traitement à leur disposition tant que le système n'est pas soumis à un stress incontrôlable.
Cette fonctionnalité est disponible dans Chrome 125. Intel a dirigé la conception et l'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.
La règle @starting-style
Safari 17.5 inclut la règle @starting-style
. Cette règle CSS vous permet d'appliquer un style que le navigateur peut rechercher avant que l'élément ne s'ouvre sur la page, si nécessaire pour les animations de saisie.
La règle @starting-style
est l'une des fonctionnalités abordées dans Quatre nouvelles fonctionnalités CSS pour des animations de début et de fin fluides.
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. 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 entre les documents pour les navigations de même origine. Auparavant, vous deviez refondre votre site Web en une application SPA pour utiliser l'API View Transitions. Ce n'est plus le cas. Les transitions de vue sont désormais activées par défaut pour les navigations du même domaine. Vous pouvez créer une transition de vue entre deux documents différents de même origine.
Firefox 127 inclut des méthodes JavaScript Set supplémentaires : intersection()
, union()
, difference()
, symmetricDifference()
, isSubsetOf()
, isSupersetOf()
et isDisjointFrom()
.