Nouveaux utilisateurs sur la plate-forme Web en mars

Découvrez certaines des fonctionnalités intéressantes qui ont été disponibles dans les 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 porte sur les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Adapter les jeux de couleurs avec light-dark()

La fonction de couleur light-dark() a été ajoutée à Chrome 123 et permet d'adapter plus facilement les jeux de couleurs aux préférences de l'utilisateur. Dans l'exemple suivant, color-scheme est défini sur light dark pour root. Les propriétés personnalisées utilisent la fonction de couleur light-dark() pour définir les couleurs qui seront basculées 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);
}

Vous trouverez plus d'exemples et de détails dans les couleurs dépendantes du color-scheme CSS avec light-dark().

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

Toujours dans Chrome 123, la propriété field-sizing permet d'agrandir automatiquement les champs de saisie de texte.

Crénage de la ponctuation CJK avec text-spacing-trim

Dans Chrome 123, la propriété text-spacing-trim applique un 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 les CSS.

Règle du CSS @scope

Safari 17.4 inclut @scope, qui vous permet de sélectionner des éléments dans des sous-arborescences DOM spécifiques. Vous pouvez ainsi cibler des éléments avec précision sans écrire de sélecteurs trop spécifiques qui sont difficiles à remplacer, et sans associer vos sélecteurs de manière trop étroite à la structure DOM.

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

Améliorations 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. Cela vous permet d'écrire des règles CSS spécifiques qui ne sont appliquées que lorsqu'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 du document pour placer le curseur au niveau du système sur l'onglet contenant la fenêtre Picture-in-picture du document.

Cela vous permet de remettre l'onglet d'origine au premier plan si nécessaire. (par exemple, lorsque l'utilisateur doit accéder à une interface utilisateur qui ne rentre pas dans la fenêtre Picture-in-picture plus petite).

Prise en charge de align-content dans la mise en page des blocs et des tableaux

Chrome 123 et Safari 17.4 sont compatibles avec align-content dans la mise en page sous forme de blocs et de tableaux. Découvrez la modification apportée à la compatibilité avec align-content.

API Service Worker Static Routing

L'API Service Worker Static Routing est disponible dans Chrome 123. Cette API vous permet d'indiquer de manière déclarative comment certains chemins de ressources doivent être récupérés, ce qui signifie que le navigateur n'a pas besoin d'exécuter un service worker uniquement pour extraire les réponses d'un cache ou directement du réseau.

Pour en savoir plus, consultez la section Utiliser l'API Service Worker Static Routing 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 visant à mieux comprendre les mises à jour lentes de l'interface utilisateur (UI). Cela peut être utile pour identifier les images d'animation lentes susceptibles d'affecter la métrique Interaction to Next Paint (INP), qui mesure la réactivité, ou d'autres à-coups dans 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é détermine si un élément affiche son contenu, ce qui permet aux navigateurs d'ignorer 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, qui prennent en charge la propriété detached et les 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 la page JavaScript obtient des méthodes de regroupement de tableaux.

Ces caractéristiques sont désormais interopérables et rejoignent donc les nouvelles fonctionnalités de référence disponibles.

setHTMLUnsafe et parseHTMLUnsafe

Les méthodes setHTMLUnsafe et parseHTMLUnsafe fournies dans Safari 17.4 permettent d'utiliser le Shadow DOM déclaratif à partir de JavaScript. Ces méthodes permettent également d'analyser systématiquement le code HTML dans le DOM, par rapport à innerHTML ou DOMParser.

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 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 prometteur. 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 Baseline Newly Available. La propriété transition-behavior sera également acceptée. Popover et transition-behavior font partie de Interop 2024.

Chrome 124 inclut les méthodes setHTMLUnsafe et parseHTMLUnsafe pour permettre d'utiliser le 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.