Nouveaux utilisateurs sur la plate-forme Web en juin

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

Rachel Andrew

Versions stables du navigateur

En juin 2024, Firefox 127 et Chrome 126 sont devenus stables. Cet article présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Méthodes JavaScript Set

Les ensembles sont une structure de données essentielle dans n'importe quel langage de programmation. Vous pouvez maintenant utiliser les méthodes intégrées de JavaScript pour effectuer des opérations de mise en ensemble. Les méthodes de configuration suivantes sont désormais disponibles à partir de Firefox 127 et font partie de la version de référence nouvellement disponible:

• intersection()
• union()
• difference()
• symmetricDifference()
• isSubsetOf()
• isSupersetOf()
• isDisjointFrom()

Pour en savoir plus, consultez Les méthodes JavaScript "set" font désormais partie de la référence.

API Async Clipboard

L'API Clipboard est désormais entièrement compatible avec Firefox 127. Firefox est désormais compatible avec l'interface ClipboardItem, ainsi que les méthodes read() et write() de l'interface Presse-papiers. Pour en savoir plus sur l'API Clipboard, consultez Débloquer l'accès au presse-papiers.

Interpolation de couleurs dans les dégradés CSS

Les dégradés CSS sont spécifiés pour accepter un <color-interpolation-method>, ce qui est désormais compatible avec Firefox, ce qui les rend interopérables avec tous les principaux moteurs. Vous pouvez désormais, par exemple, spécifier un linear-gradient() à l'aide du système de couleurs hsl et d'une interpolation plus longue.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Transitions entre les vues de documents

Auparavant, vous deviez refondre votre site Web en SPA pour utiliser l'API View Transitions. Ce n'est plus le cas. À partir de Chrome 126, 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 de même origine différents.

Pour activer une transition de vue entre les documents, les deux extrémités doivent activer cette fonctionnalité. Pour ce faire, utilisez la règle at-@view-transition et définissez le descripteur de navigation sur auto.

@view-transition {
  navigation: auto;
}

Pour en savoir plus, consultez la documentation sur les transitions de vue entre les documents.

Extension trigger-rumble de l'API Gamepad

Chrome 126 étend l'interface GamepadHapticActuator pour exposer la fonctionnalité trigger-rumble sur le Web pour les manettes de jeu compatibles. Cette extension permettra aux applications Web qui exploitent l'API Gamepad de faire vibrer les déclencheurs des manettes de jeu équipées de cette fonctionnalité.

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 128, Chrome 127, Safari 18 et Safari 17.6. 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.

Safari 17.6 contient des corrections de fonctionnalités existantes. Safari 18 propose de nombreuses nouvelles fonctionnalités intéressantes, y compris les requêtes de conteneur de style, l'API View Transitions pour les applications monopages et la prise en charge du mot clé safe dans les propriétés flexbox.

Chrome 127 inclut la propriété CSS font-size-adjust, la possibilité de spécifier du texte alternatif sur le contenu généré en tant que nombre arbitraire d'éléments et la possibilité d'ajouter des informations sur chaque chapitre dans MediaMetaData.

Firefox 128 inclut les propriétés et valeurs CSS, ce qui rend cette fonctionnalité disponible en tant que référence. Utilisez @property pour définir un type et définir une valeur de remplacement pour les propriétés personnalisées CSS.