Nouveaux utilisateurs sur la plate-forme Web en mars

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

Versions stables du navigateur

En mars 2024, Firefox 124, Safari 17.4 et Chrome 123 sont devenus stables. Cet article présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Adapter les jeux de couleurs avec light-dark()

La fonction de couleur light-dark() est disponible dans Chrome 123 et permet d'adapter plus facilement les jeux de couleurs aux préférences des utilisateurs. Dans l'exemple suivant, color-scheme est défini sur light dark sur root. Les propriétés personnalisées utilisent la fonction de couleur light-dark() pour définir les couleurs à basculer en fonction des préférences de l'utilisateur en mode clair ou sombre.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Pour plus d'exemples et d'informations, consultez la section Couleurs dépendantes de color-scheme CSS avec light-dark().

Meilleur contrôle des entrées avec field-sizing

Dans Chrome 123, la propriété field-sizing permet également d'augmenter automatiquement la taille des champs de saisie de texte.

Prise en main de la ponctuation CJK avec text-spacing-trim

Dans Chrome 123, la propriété text-spacing-trim applique le crénage aux caractères de ponctuation chinois, japonais et coréen (CJK) afin d'ajuster les espaces excessifs. Pour en savoir plus, consultez Présentation de quatre nouvelles fonctionnalités internationales pour CSS.

Règle CSS @scope

Safari 17.4 inclut @scope, qui vous permet de sélectionner des éléments dans des sous-arbres DOM spécifiques, en ciblant précisément les éléments sans écrire de sélecteurs trop spécifiques difficiles à remplacer, et sans associer vos sélecteurs trop étroitement à la structure DOM.

Pour en savoir plus, consultez Limiter la couverture de vos sélecteurs avec la règle CSS @scope.

Améliorations apportées au mode Picture-in-picture

Chrome 123 inclut deux fonctionnalités pour améliorer l'expérience Picture-in-picture. Le premier est le mode d'affichage CSS picture-in-picture. Vous pouvez ainsi écrire des règles CSS spécifiques qui ne s'appliquent que lorsque (une partie) de l'application Web est affichée en mode Picture-in-picture.

La deuxième fonctionnalité vous permet d'utiliser opener.focus à partir d'une fenêtre Picture-in-picture de document pour mettre en surbrillance l'onglet propriétaire de la fenêtre Picture-in-picture du document au niveau du système.

Vous pouvez ainsi ramener l'onglet d'origine au premier plan si nécessaire. Par exemple, lorsque l'utilisateur doit accéder à une expérience d'interface utilisateur qui ne tient pas dans la petite fenêtre Picture-in-picture.

Compatibilité avec align-content dans la mise en page en bloc et en table

Chrome 123 et Safari 17.4 sont compatibles avec align-content dans la mise en page en bloc et en tableau. Découvrez les modifications apportées à la prise en charge de align-content.

API Service Worker Static Routing

À partir de Chrome 123, l'API de routage statique de service workers est disponible. Cette API vous permet d'indiquer de manière déclarative comment certains chemins de ressources doivent être récupérés. Cela signifie que le navigateur n'a pas besoin d'exécuter un service worker uniquement pour récupérer des réponses à partir d'un cache ou directement à partir du réseau.

Pour en savoir plus, consultez la section Utiliser l'API de routage statique de service worker pour contourner le service worker pour des chemins spécifiques.

API Long Animation Frames

Chrome 123 inclut également l'API Long Animation Frames, qui est une mise à jour de l'API Long Tasks pour mieux comprendre les mises à jour lentes de l'interface utilisateur (UI). Cela peut être utile pour identifier les frames d'animation lents susceptibles d'affecter la métrique Core Web Vitals Interaction to Next Paint (INP), qui mesure la réactivité, ou pour identifier d'autres à-coups de l'interface utilisateur qui affectent la fluidité.

Propriété content-visibility

Firefox 124 est compatible avec la propriété CSS content-visibility. Cette propriété contrôle si un élément affiche son contenu, ce qui permet aux navigateurs d'omettre l'affichage du contenu jusqu'à ce qu'il soit nécessaire.

Ajouts à ArrayBuffer et regroupement de tableaux

Dans Safari 17.4, JavaScript bénéficie de nouvelles fonctionnalités avec la prise en charge de la propriété detached et des méthodes transfer() et transferToFixedLength() de ArrayBuffer.

Safari 17.4 inclut également les méthodes de regroupement de tableaux Object.groupBy et Map.groupBy. Pour en savoir plus sur le regroupement de tableaux, consultez JavaScript obtient des méthodes de regroupement de tableaux.

Ces fonctionnalités sont désormais interopérables et rejoignent la catégorie "Nouveautés de référence".

setHTMLUnsafe et parseHTMLUnsafe

Les méthodes setHTMLUnsafe et parseHTMLUnsafe fournies dans Safari 17.4 permettent d'utiliser le DOM fantôme déclaratif à partir de JavaScript. Ces méthodes offrent également un moyen plus simple d'analyser de manière impérative le code HTML dans le DOM, par rapport à innerHTML ou DOMParser.

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 125 et Chrome 124. 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.

Firefox 125 s'annonce comme une version passionnante. Elle inclut align-content sur les blocs, ce qui rend cette fonctionnalité interopérable. L'API Popover est également incluse et fait donc partie de la version de référence "Nouveau disponible". La propriété transition-behavior sera également acceptée. Les pop-ups et transition-behavior font partie de Interop 2024.

Chrome 124 inclut les méthodes setHTMLUnsafe et parseHTMLUnsafe pour permettre l'utilisation du Shadow DOM déclaratif à partir de JavaScript, ce qui rend ces fonctionnalités interopérables. L'API WebSocketStream et l'attribut writingsuggestions sont également inclus.