Partager via


Notes de publication de la plateforme web Microsoft Edge 137 (mai 2025)

Voici les nouvelles fonctionnalités et mises à jour de la plateforme web dans Microsoft Edge 137, qui sera publié le 29 mai 2025.

Pour rester à jour et obtenir les dernières fonctionnalités de la plateforme web, téléchargez un canal en préversion de Microsoft Edge (bêta, dev ou canary) ; accédez à Devenir un Microsoft Edge Insider.

Contenu détaillé :

Edge DevTools

Consultez Nouveautés de DevTools (Microsoft Edge 137).

WebView2

Consultez 1.0.3296.44 dans notes de publication du Kit de développement logiciel (SDK) WebView2 (juin 2025).

Fonctionnalités de la plateforme web

Fonctionnalités CSS

Fonction CSS if()

La fonction CSS if() fournit un moyen simple et concis d’exprimer des valeurs logiques conditionnelles.

La if() fonction accepte une série de paires condition-valeur, délimitées par des points-virgules. La fonction évalue chaque condition de manière séquentielle et retourne la valeur associée à la première true condition. Si aucune des conditions n’a la truevaleur , la fonction retourne un flux de jeton vide.

Dans l’exemple suivant, la if() fonction est utilisée pour définir la couleur d’arrière-plan d’un div élément en fonction de la valeur d’une propriété --colorpersonnalisée :

<style>
  div {
    color: var(--color);
    background-color: if(style(--color: white): black; else: white);
  }
  .dark {
    --color: black;
  }
  .light {
    --color: white;
  }
</style>
<div class="dark">dark</div>
<div class="light">light</div>

Consultez Sélection de valeurs conditionnelles : notation if() dans CSS Values and Units Module Level 5.

CSS reading-flow et reading-order propriétés

La reading-flow propriété CSS contrôle les éléments suivants :

  • Ordre dans lequel les éléments d’une disposition flexible, de grille ou de bloc sont exposés aux outils d’accessibilité.
  • L’ordre dans lequel les éléments d’une disposition flexible, de grille ou de bloc sont mis au point lors de l’utilisation de la touche Tab .

La reading-flow propriété prend en charge les valeurs suivantes :

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

La reading-order propriété CSS vous permet de remplacer manuellement l’ordre dans un conteneur de flux de lecture. La reading-order valeur est un entier dont la valeur par défaut est 0.

Voir aussi :

Prise en charge de shape() dans offset-path

La shape() fonction CSS, qui est déjà prise en charge par la clip-path propriété CSS, est désormais également prise en charge par la offset-path propriété CSS.

Cela permet de réutiliser la même forme dans plusieurs propriétés CSS.

Consultez offset-path sur MDN.

Couleur d’accentuation du système pour accent-color la propriété

La accent-color propriété CSS vous permet de personnaliser la couleur des éléments de formulaire, tels que les cases à cocher, les cases d’option ou les barres de progression.

À présent, la couleur par défaut de la accent-color propriété correspond à la couleur d’accentuation du système d’exploitation./g/blink-dev/c/WwYkLjbGhoA

Voir couleur d’accentuation sur MDN.

Noms de transition d’affichage générés automatiquement

La view-transition-name propriété CSS prend en charge deux nouvelles valeurs, afin d’éviter d’avoir à inventer des noms uniques pour les éléments qui participent à une transition d’affichage :

  • match-element - Génère un ID unique basé sur l’identité de l’élément. Cette valeur est utile dans les applications monopages où l’élément animé avec une transition d’affichage est déplacé dans le DOM.

  • auto - Génère un ID unique basé sur l’attribut de l’élément id . Cette valeur prend uniquement en compte l’attribut id et ignore le type d’élément. Cette approche permet une transition d’affichage pour fonctionner sur plusieurs pages d’une application, où les éléments avec le même id attribut peuvent être de types différents.

Consultez Détermination automatique de view-transition-name.

Prise en charge de l’attribut transform sur <svg>

Les propriétés de transformation, telles que la mise à l’échelle, la rotation, la traduction et l’inclinaison, sont désormais prises en charge directement sur l’élément <svg> , à l’aide de l’attribut transform .

Cela vous permet de manipuler l’ensemble du système de coordonnées SVG ou son contenu dans son ensemble, ce qui offre une plus grande flexibilité dans la création de graphiques vectoriels dynamiques, réactifs et interactifs.

En prenant en charge l’attribut transform , un <svg> élément peut être transformé sans nécessiter d’éléments wrapper supplémentaires ou de solutions CSS complexes.

Consultez transformation sur MDN.

Ignorer letter-spacing dans les scripts cursifs

En fonction de la spécification, le navigateur ignore désormais la letter-spacing propriété CSS lors du rendu des scripts cursifs, afin d’éviter de casser les mots.

Si possible, le navigateur peut appliquer l’espacement des lettres en traduisant l’espace supplémentaire en allongement ou compression cursive. Si le texte ne peut pas être développé sans rompre les connexions cursives, le navigateur traite chaque mot comme une seule unité typographique pour l’espacement des lettres.

L’élongation ou la compression cursive appropriée varient en fonction des points suivants :

  • Script.
  • Fonte de caractères.
  • Langue.
  • Word emplacement.
  • Emplacement de la ligne.
  • Complexité de l’implémentation.
  • Fonctionnalités de police.
  • Préférences calligraphiques.

L’élongation ou la compression cursive appropriée peut impliquer un raccourcissement :

  • Ligatures.
  • Variantes de Swash.
  • Formulaires contextuels.
  • Glyphes d’élongation.

Évitez d’appliquer la letter-spacing propriété à des scripts cursifs, sauf si vous pouvez accepter des résultats non interopérables.

Consultez Espacement des lettres sur MDN.

API web

Modifiez le type d’erreur levée pour payment la création des informations d’identification de l’authentification web de SecurityError à NotAllowedError

Auparavant, lors de la création d’informations payment d’identification dans un iframe cross-origin sans activation par l’utilisateur, une SecurityError exception était levée.

Le type d’erreur a maintenant été remplacé par NotAllowedError, pour correspondre au type d’erreurs levées pour les informations d’identification de non-paiement.

Consultez API de demande de paiement sur MDN.

Autoriser l’élément SVG <use> à référencer des documents externes sans nécessiter d’ID de fragment d’URL

Les éléments SVG <use> peuvent désormais être liés à des documents SVG externes sans avoir à spécifier d’identificateur de fragment.

Auparavant, vous deviez référencer explicitement des fragments dans des documents SVG. Par exemple :

<svg>
  <use xlink:href="myshape.svg#icon"></use>
</svg>

Dans l’exemple ci-dessus, #icon est l’identificateur de fragment pointant vers un élément avec l’attribut id="icon" dans le myshape.svg document. Si aucun identificateur n’a été fourni, l’élément <use> n’a pas pu résoudre la cible et rien n’a été rendu.

Vous pouvez désormais omettre les identificateurs de fragments et fournir uniquement le nom de fichier de document SVG externe. Cela fait automatiquement référence à l’élément racine avec le document SVG. Par exemple :

<svg>
  <use xlink:href="myshape.svg"></use>
</svg>

Voir <use> à MDN.

Partitionnement d’URL d’objet blob

L’accès à l’URL d’objet blob est désormais partitionné par clé de stockage. Les clés de stockage sont des sites de niveau supérieur, des origines de frame et des has-cross-site-ancestor valeurs booléennes. Les navigations de niveau supérieur restent partitionnés uniquement par origine de trame.

Le partitionnement de l’accès à l’URL des objets blob par clé de stockage est similaire à ce qui est actuellement implémenté par Firefox et Safari. Cela aligne l’utilisation de l’URL d’objet blob avec le schéma de partitionnement utilisé par d’autres API de stockage dans le cadre du partitionnement du stockage.

Parallèlement à cette modification, Microsoft Edge applique désormais les navigations de niveau supérieur lancées noopener par le renderer vers les URL d’objets blob, où le site correspondant est intersite vers le site de niveau supérieur qui effectue la navigation. Cela s’aligne sur un comportement similaire dans Safari et sur les spécifications correspondantes.

Le partitionnement d’URL d’objet blob peut être temporairement rétabli en définissant la PartitionedBlobUrlUsage stratégie :

  • Si cette stratégie est définie Enabled sur ou n’est pas définie, les URL d’objets blob sont partitionnée.
  • Si cette stratégie est définie sur Disabled, les URL d’objets blob ne sont pas partitionnée.

Consultez Restrictions d’accès sur les URL d’objets blob dans la spécification de l’API de fichier.

Piles d’appels dans les rapports d’incident à partir de pages web qui ne répondent pas

Lorsqu’une page web ne répond plus en raison du code JavaScript exécutant un calcul très long, tel qu’une boucle infinie, la pile des appels Javascript est enregistrée et incluse dans le rapport d’incident envoyé au point de terminaison du serveur d’API de création de rapports configuré par le site web.

Consultez API de création de rapports sur MDN.

Types de couleurs à virgule flottante dans <canvas>

CanvasRenderingContext2DLes objets , OffscreenCanvasRenderingContext2Det ImageData prennent désormais en charge les formats de pixels à virgule flottante, en plus des formats à virgule fixe 8 bits.

Cette modification permet d’utiliser des applications de haute précision, telles que :

  • Visualisations médicales.
  • Contenu de plage dynamique élevée.
  • Espaces de couleurs de travail linéaires.

Consultez Valeurs de couleur à virgule flottante du canevas.

Stratégies d’isolation des documents

Les stratégies d’isolation de document permettent à un document d’activer l’isolation cross-origin pour lui-même, sans avoir à utiliser les en-têtes de réponse Cross-Origin-Opener-Policy (COOP) ou Cross-Origin-Embedder-Policy (COEP), et quelle que soit la status d’isolation cross-origin de la page.

Voir aussi :

Prise en charge des algorithmes de signature Ed25519 dans l’API de chiffrement web

L’API de chiffrement web prend désormais en charge l’algorithme de signature Ed25519.

Consultez Courbes sécurisées dans WebCrypto.

JavaScript Promise Integration (JSPI) dans WebAssembly

JavaScript Promise Integration (JSPI) est une API qui permet aux applications WebAssembly de s’intégrer à JavaScript Promises.

JSPI permet à un programme WebAssembly d’agir en tant que générateur d’une promesse, et il permet au programme WebAssembly d’interagir avec les API promises.

Lorsqu’une application utilise JSPI pour appeler une API Promise-bearing (JavaScript) :

  • Le code WebAssembly est suspendu.
  • L’appelant d’origine du programme WebAssembly reçoit une promesse qui sera remplie une fois le programme WebAssembly terminé.

Consultez js-promise-integration.

Indicateur de branche WebAssembly

Pour améliorer les performances du code WebAssembly compilé, les indicateurs de branche sont utilisés pour informer le moteur qu’une instruction de branche particulière est très susceptible d’emprunter un chemin spécifique.

Cela permet au moteur de prendre de meilleures décisions pour la disposition du code et l’allocation d’inscription.

Consultez Indication de branche.

Restreindre les types d’attributs et d’arguments acceptés par SVGMatrix, SVGRect et SVGPoint

La définition des attributs et des arguments de SVGMatrix, SVGRect et SVGPoint sur Infinity ou NaN est désormais interdite.

Les attributs ou arguments de paramètres de ces valeurs lèvent désormais une exception JavaScript.

Consultez API SVG sur MDN.

API getComposedRanges de sélection et direction

L’API Selection prend désormais en charge la propriété et la méthode suivantes :

  • Selection.direction retourne la direction de la sélection en tant que none, forwardou backward.
  • Selection.getComposedRanges() retourne une liste de 0 ou 1 objets composésStaticRange .

Un composé StaticRange peut traverser les limites du DOM de l’ombre, contrairement aux Range objets .

Par exemple :

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Pour vous assurer que les arborescences d’ombres inconnues ne sont pas exposées par accident, si la sélection de texte franchit une limite de racine d’ombre qui n’est pas fournie dans la shadowRoots propriété, les points de terminaison du retour StaticRangese trouvent en dehors de cet arbre d’ombre.

Consultez Selection : méthode getComposedRanges() sur MDN.

WebGPU API

Lier externalTexture à GPUTextureView

Lors de la création d’un GPUBindGroup lors de l’utilisation de WepGPU, vous pouvez maintenant lier externalTexture à un GPUTextureView.

Cela est utile dans des scénarios tels que lors de l’utilisation de l’API WebGPU pour les pipelines d’effets vidéo. En autorisant l’utilisation d’un compatible GPUTextureView à la place d’un GPUExternalTexture, la logique de nuanceur est simplifiée.

Consultez GPUExternalTexture sur MDN.

Copier des mémoires tampons entières avec copyBufferToBuffer()

La GPUCommandEncoder.copyBufferToBuffer() méthode facilite la copie de mémoires tampons entières en vous permettant d’omettre les offsets paramètres et size .

Consultez GPUCommandEncoder : méthode copyBufferToBuffer() sur MDN.

Essais d’origine

Vous trouverez ci-dessous de nouvelles API expérimentales que vous pouvez essayer sur votre propre site web en direct pendant une durée limitée.

Pour en savoir plus sur les essais d’origine, consultez Utiliser les essais d’origine dans Microsoft Edge.

Pour afficher la liste complète des essais d’origine disponibles, consultez Microsoft Edge Origin Trials.

Nouveaux essais Chromium d’origine

Suspendre la lecture multimédia sur les iframes non rendus

Expire le 27 janvier 2026.

La media-playback-while-not-visible stratégie d’autorisation interrompt la lecture de tout média par des iframes qui ne sont actuellement pas rendus sur des images non autorisées. Cela s’applique chaque fois que la propriété CSS de l’iframe display est définie sur none ou lorsque la propriété a la visibility valeur hidden ou collapse.

Actuellement, et AudioContexts les HTMLMediaElements éléments multimédias sont pris en charge.

Versions d’évaluation d’origine de Microsoft Edge uniquement

Extensions d’étendue d’application web

Expire le 31 août 2025

scope_extensions est un nouveau membre de manifeste d’application web qui permet aux applications web d’étendre leur étendue à d’autres origines.

Les extensions d’étendue permettent aux applications web qui reposent sur plusieurs sous-domaines et domaines de niveau supérieur d’être présentées sous la forme d’une seule application web.

{
  "name": "Example app",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {
      "type": "type",
      "origin": "https://example.com"
    }
  ]
}

Les origines répertoriées dans le scope_extensions membre doivent confirmer qu’elles sont associées à l’application web en hébergeant un fichier de configuration nommé .well-known/web-app-origin-association. Le fichier doit répertorier l’origine de l’application web :

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}
API d’informations d’acquisition

Expire le 30 juin 2025.

L’API Informations sur l’acquisition prend en charge l’attribution d’acquisition 3P pour les PWA qui ont été acquises via un magasin d’applications ou directement à partir du navigateur.

Dépréciation de MS à contraste élevé

Expire le 9 septembre 2025.

Active la requête de média CSS -ms-high-contrast hérité et la propriété héritée -ms-high-contrast-adjust .

Consultez Prise en charge déconseillée pour -ms-high-contrast et -ms-high-contrast-adjust.

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Chromium.org et utilisées selon les termes décrits dans la licence internationale Creative Commons Attribution 4.0.