Versionshinweise zur Microsoft Edge 150-Webplattform (Juli 2026)

Im Folgenden finden Sie die neuen Webplattformfeatures und -updates in Microsoft Edge 150, die am 2. Juli 2026 veröffentlicht werden.

Um auf dem neuesten Stand zu bleiben und die neuesten Webplattformfeatures zu erhalten, laden Sie einen Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary) herunter. wechseln Sie zu Microsoft Edge-Insider werden.

Ausführlicher Inhalt:

Microsoft Edge DevTools

Weitere Informationen finden Sie unter Neuerungen in Microsoft Edge DevTools.

WebView2

Weitere Informationen finden Sie unter Versionshinweise für das WebView2 SDK.

CSS-Features

Die folgenden neuen CSS-Features (Cascading StyleSheets) sind in Microsoft Edge enthalten.

AccentColor und AccentColorText Systemfarben

Die AccentColor Systemfarben und AccentColorText können jetzt als CSS-Farbwerte verwendet werden, um auf die auf dem Gerät des Benutzers angegebene Systemakzentfarbe zuzugreifen.

Siehe auch:

Optionaler Rundungsparameter zulassen für polygon()

Ermöglicht einen optionalen round Parameter in der polygon() CSS-Shape-Funktion. Sie können einen Längenwert angeben, um Polygonecke zu runden, ohne Bézierkurven manuell zu berechnen.

So erstellen Sie beispielsweise ein abgerundetes Dreieck: polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)

Siehe auch:

Animierbarer Zoom

Die CSS-Eigenschaft zoom kann animiert werden und interpoliert als .<number> Sie können den Zoom übergehen und animieren, um Elemente und deren Layout reibungslos zu skalieren und die vorhandene transformationsbasierte Skalierung zu ergänzen.

Siehe auch:

CSS-URL-Anforderungsmodifizierer

Die folgenden CSS-Funktionen können mit der CSS-Funktion url() verwendet werden, um das Abrufverhalten der referenzierten Ressource zu steuern:

  • cross-origin()
  • integrity()
  • referrer-policy()

background-image: url("image.png" cross-origin(anonymous)) Beispielsweise ruft das Bild im anonymen CORS-Modus ab.

Dadurch erhalten Sie eine differenzierte Kontrolle über den ursprungsübergreifenden Zugriff, die Integrität von Unterressourcen und die Verweisrichtlinie für CSS-geladene Ressourcen, einschließlich:

  • Bilder.
  • Schriftarten.
  • SVG-Verweise.
  • Importierte Stylesheets.

Siehe auch:

CSS-Eigenschaft text-fit

Die CSS-Eigenschaft text-fit skaliert den Schriftgrad eines Textknotens an die Breite des enthaltenden Felds.

Mit dieser Eigenschaft können Sie sicherstellen, dass Überschriften oder dynamische Inhalte den verfügbaren horizontalen Bereich ausfüllen, ohne manuelle Berechnungen des Schriftgrads oder komplexe JavaScript-Problemumgehungen.

Diese Eigenschaft bietet eine robuste, CSS-native Lösung für reaktionsfähige Typografie, die die visuelle Ausrichtung über verschiedene Bildschirmgrößen und unterschiedliche Textlängen hinweg beibehält.

Siehe auch:

CSS background-clip: border-area

Die CSS-Eigenschaft background-clip: border-area schneidet den Hintergrund eines Elements auf den Bereich ab, der durch seine Rahmenstriche gezeichnet wurde, wobei border-width und border-style berücksichtigt wird, während die Transparenz von ignoriert wird border-color.

Dadurch werden Farbverlaufsrahmen ohne border-imageaktiviert.

Siehe auch:

CSS-Funktion image(<color>)

Mit der CSS-Funktion image() können Sie ganz einfach ein Volltonbild aus einer beliebigen Farbe generieren.

Verwenden Sie beispielsweise , um ein durchgezogenes rotes Hintergrundbild zu erstellen background: image(red);.

Siehe auch:

CSS light-dark() mit Bildwerten

Die CSS-Funktion light-dark() akzeptiert jetzt Bildwerte (url(), image-set(), none).

Dadurch ist es möglich, basierend auf dem bevorzugten Farbschema des Benutzers automatisch zwischen Bildern zu wechseln.

Sie können die light-dark() Funktion mit Bildwerten in den folgenden Eigenschaften verwenden:

  • background-image
  • list-style-image
  • border-image-source
  • cursor
  • content

Siehe auch:

Durch Trennzeichen getrennte Containerabfragen

Die @container Regel unterstützt jetzt mehrere Containerabfragen, die durch Kommas getrennt sind. Die @container Regel gilt, wenn mindestens eine der Abfragen übereinstimmt.

Dies ermöglicht Fallbackabfragen für Features, die nicht in allen Browsern unterstützt werden.

Beispiel:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

Siehe auch:

Verfügbarmachen von nicht druckbaren Bereichen über CSS

Verwenden Sie die CSS-Eigenschaft page-margin-safety , um den Versuch zu vermeiden, in nicht druckbaren Bereichen eines Blatts Papier zu drucken.

Ein Drucker verfügt in der Regel über einen kleinen Bereich an jeder der vier Kanten eines Blatts Papier, den der Drucker nicht zuverlässig markieren kann, normalerweise aufgrund des Papierverarbeitungsmechanismus des Druckers.

Es wird erwartet, dass die Standardseitenränder größer als diese Papierrandbereiche sind. Wenn Sie jedoch in Ihrer App Ränder festlegen und Randfelder hinzufügen @page möchten (z. B. für benutzerdefinierte Kopf- und Fußzeilen), bietet die page-margin-safety -Eigenschaft eine Möglichkeit, zu erkennen, wo das Drucken sicher ist.

Siehe auch:

Medienelement-Pseudoklassen

Die folgenden CSS-Pseudoklassen stimmen <audio> und <video> -Elemente basierend auf ihrem Zustand ab:

  • :playing
  • :paused
  • :seeking
  • :buffering
  • :stalled
  • :muted
  • :volume-locked

Siehe auch:

CSS-Funktion alpha()

Die CSS-Funktion alpha() erstellt eine neue Farbe, indem ein angegebener Alphawert auf eine vorhandene Farbe angewendet wird.

Erstellt beispielsweise alpha(from red / 0.5) eine halbtransparente rote Farbe mit einer Deckkraft von 50 %.

Siehe auch:

named-feature() Funktion für CSS @supports

Die named-feature() -Funktion ermöglicht ES CSS-Regeln @supports , eine kleine Gruppe von bestimmten benannten Features abzufragen, die nicht mithilfe anderer @supports Mechanismen getestet werden können, aber für die ein Test nützlich ist.

Siehe auch:

overscroll-behavior: chain

Die overscroll-behavior CSS-Eigenschaft unterstützt jetzt den chain -Wert.

Diese Eigenschaft wirkt sich auf zwei unabhängige Effekte aus:

  • Bildlaufweitergabe.
  • Lokaler Rahmeneffekt (z. B. overscroll stretch).

Zuvor hatte drei overscroll-behavior Werte:

  • none: Keine Weitergabe, kein lokaler Effekt.
  • auto: Weitergabe, lokaler Effekt.
  • contain: Keine Weitergabe, lokaler Effekt.

Dieses Feature fügt einen neuen Wert hinzu, um den Satz abzuschließen:

  • chain: Weitergabe, kein lokaler Effekt.

Siehe auch:

flex-wrap:balance

flex-wrap:balance ermöglicht das Verteilen von Inhalten zwischen den einzelnen flex-line, sodass das Layout ausgeglichener erscheint.

Dies ähnelt text-wrap:balance.

Siehe auch:

HTML-Features

Die folgenden neuen HTML-Features sind in Microsoft Edge enthalten.

focusgroup Attribut

Das HTML-Attribut focusgroup standardisiert die Tastaturnavigation für zusammengesetzte Widgets wie Symbolleisten, Registerkarten, Menüs und Optionsfeldgruppen.

Das focusgroup -Attribut behandelt automatisch Folgendes, ohne dass benutzerdefinierter JavaScript-Code erforderlich ist:

  • Das Verhalten des genehmigenden Tabindex .
  • Navigation über Pfeiltasten.
  • Fokusspeicher; stellt das zuletzt fokussierte Element beim erneuten Eintritt in die Fokusgruppe wieder her.

Beispiel:

<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

Siehe auch:

popover="hint" Änderungen des Attributverhaltens

Das Verhalten von Elementen mit dem popover="hint" -Attribut hat sich geändert, um die Interaktionen mit popover="auto" Elementen zu verbessern: Beim Öffnen eines popover="hint" Elements werden nicht mehr versehentlich nicht verwandte popover="auto" Elemente geschlossen.

Bisher konnten die Interaktionen zwischen diesen beiden Arten von Popoverelementen in einigen Situationen komplex sein, z. B. beim Schachteln von popover="auto" Elementen innerhalb von popover="hint" Elementen.

popover="hint" -Elemente werden jetzt nur ausgeblendet, wenn ihr ancester-Element popover="auto" ausgeblendet ist oder wenn ein neues, nicht verwandtes popover="auto" geöffnet wird.

Darüber hinaus können Sie jetzt ein popover="auto" Element sicher in einem popover="hint" -Element schachteln. Das geschachtelte popover="auto" Element verhält sich wie ein popover="hint" -Element. Dies ermöglicht Anwendungsfälle wie das Platzieren eines anpassbaren <select> Elements innerhalb eines popover="hint" Elements.

Siehe auch:

Aktualisieren aller <selectedcontent> Elemente in einem anpassbaren <select>

Wenn mehrere <selectedcontent> Elemente in einem anpassbaren <select> Element definiert sind, werden alle elemente jetzt mit der aktuell ausgewählten Option auf dem neuesten Stand gehalten, anstatt nur das erste Element in DOM-Reihenfolge.

Siehe auch:

Streamen von HTML-Code in nicht ordnungsgemäßer Reihenfolge

Verwenden Sie das <template for> HTML-Element und die <?start> Verarbeitungsanweisungsbereiche und <?end> , um vorhandene Teile des Dokuments zu aktualisieren, ohne JavaScript verwenden zu müssen.

Dieses Feature ist Teil einer größeren Initiative, integrierte Unterstützung für Aktualisierungen desselben Dokuments im Web hinzuzufügen.

Siehe auch:

Web-APIs

Die folgenden neuen Web-API-Features sind in Microsoft Edge enthalten.

Globales Verfügbarmachen der FontFaceSet Schnittstelle

Zuvor wurde die FontFaceSet Schnittstelle nicht als globale Eigenschaft verfügbar gemacht. Chromium Interface Definition Language (IDL) für FontFaceSet zuvor fälschlicherweise auf angewendet LegacyNoInterfaceObjectFontFaceSetund als globale Eigenschaft ausgeblendet.

Diese Änderung richtet sich Chromium an der CSS-Spezifikation zum Laden von Schriftarten sowie an Safari und Firefox.

Siehe auch:

Deaktivieren von SVG-Filtern für ursprungsübergreifende iFrames und Plug-Ins

SVG-Filter werden nicht mehr auf Folgendes angewendet:

  • Ursprungsübergreifende oder eingeschränkte iFrames (z. B. Sandkasten-iFrames).
  • Eingebettete Plug-Ins (z. B. PDFs).

Dadurch wird verhindert, dass potenzielle Sicherheitsprobleme durch ursprungsübergreifende Inhalte über SVG-Filtereffekte verarbeitet werden.

Siehe auch:

MediaStreamTrackProcessor Rahmenzähler

Die discardedFrames Attribute und totalFrames sind jetzt auf der MediaStreamTrackProcessor -Schnittstelle verfügbar.

Mit diesen Leistungsindikatoren können Sie die Integrität Ihrer Medienverarbeitungspipeline überwachen, indem Sie Folgendes nachverfolgen:

  • Die Anzahl der empfangenen Frames.
  • Die Anzahl der Frames, die aufgrund von Systemressourceneinschränkungen verworfen wurden.

Siehe auch:

Nicht transparenter Ursprung für data: URLs

Dedizierte Worker und freigegebene Worker, die aus data: URLs erstellt werden, erhalten jetzt einen eindeutigen undurchsichtigen Ursprung, anstatt den Ursprung des Erstellers zu erben.

Dadurch wird Edge an der HTML-Standard ausgerichtet und verbessert die Sicherheit, indem diese Worker aus demselben Ursprungszustand wie BroadcastChannel, localStorageund IndexedDBisolieren.

Um Isolationsgrenzen beizubehalten, verbleiben diese Worker in derselben Speicherpartition wie ihr Ersteller (z. B. durch Website der obersten Ebene oder Nonce).

Siehe auch:

Migration des PWA-Ursprungs

Die Migration des Web-App-Ursprungs ermöglicht es einer progressiven Web-App (PWA), zu einem neuen Ursprung zu migrieren, wobei die Vertrauensstellung, der Installationsstatus und die anwendbaren Berechtigungen beibehalten werden.

Dies hilft Teams dabei, Apps sicher domänenübergreifend zu verschieben, ohne benutzer zur Neuinstallation zu zwingen.

Siehe auch:

Benachrichtigungen erhalten, wenn die scrollBy Methoden und scrollTo abgeschlossen sind

Programmgesteuerte Bildlaufmethoden wie scrollBy und scrollTogeben jetzt ein Promise -Objekt zurück, das aufgelöst wird, wenn der Bildlauf abgeschlossen ist. Verwenden Sie diese Zusage, um Code auszuführen, nachdem ein reibungsloser Bildlauf abgeschlossen ist, ohne sich auf einen Timer oder einen Bildlaufereignis-Abruf zu verlassen.

Siehe auch:

Web Speech-API: Qualität der Geräteerkennung

Die SpeechRecognition -Schnittstelle unterstützt jetzt die quality -Eigenschaft.

Mit quality der -Eigenschaft können Sie die semantische Funktion angeben, die für die Erkennung erforderlich ist, wobei verwendet wird processLocally: true, auch als Erkennung auf dem Gerät bezeichnet.

Die werte, die von der quality -Eigenschaft unterstützt werden, sind einer zunehmenden Komplexität von Aufgaben und Hardwareanforderungen zugeordnet:

  • command
  • dictation
  • conversation

Mithilfe der quality -Eigenschaft können Sie ermitteln, ob das Gerät Ihren Anwendungsfall mithilfe der Erkennung auf dem Gerät verarbeiten kann, oder ob Sie ein Fallback auf einen Clouderkennungsdienst durchführen sollten.

Siehe auch:

WebGPU: Direktvorgänge

WebGPU unterstützt jetzt Sofortvorgänge.

Dieses Feature fügt einen immediate Adressraum in WGSL und setImmediateData() Methoden für Renderdurchlauf-, Computepass- und Renderbundlecoder hinzu. Sie können diese APIs verwenden, um kleine, häufig aktualisierte Werte an Shader zu übergeben, ohne GPU-Puffer oder Bindungsgruppen zu erstellen.

Dies ist nützlich für Daten pro Zeichnen, z. B. Objektindizes, Materialindizes und Transformationswerte.

Siehe auch:

Ursprungstests

Im Folgenden finden Sie Ursprungstests für neue experimentelle APIs, die in Microsoft Edge verfügbar sind.

Mit Origin-Testversionen können Sie experimentelle APIs auf Ihrer eigenen Livewebsite für einen begrenzten Zeitraum ausprobieren. Weitere Informationen zu Ursprungstests finden Sie unter Verwenden von Ursprungstests in Microsoft Edge.

Eine vollständige Liste der verfügbaren Ursprungstests finden Sie unter Microsoft Edge Origin-Testversionen.

Name Beschreibung Registrieren
Eingabeaufforderungs-API Prompts ein integriertes Sprachmodell aus Ihrem Website- oder Erweiterungs-JavaScript-Code. Siehe auch Eingabeaufforderungs-API. Registrieren
Benutzerdefinierte WebAssembly-Deskriptoren Speichert Daten, die Typen auf Quellebene zugeordnet sind, effizienter in benutzerdefinierten Deskriptorobjekten. Registrieren
Heuristik der soften Navigation Macht heuristische Heuristiken für die softe Navigation zum Sammeln von Leistungsmetriken in Single-Page-Apps verfügbar. Registrieren
WebNN Erstellen und ausführen Sie hardwarebeschleunigte Machine Learning-Modelle direkt in Ihrer Web-App. Registrieren
URL- und eval-Hashes in CSP script-src Führt url- und eval-Hashes für script-src CSP-Direktiven ein und ersetzt hostnamenbasierte Zulassungslisten und unsafe-eval. Registrieren
Webinstallations-API Ermöglicht einer Website die Installation einer anderen Website als Web-App mithilfe navigator.install()von . Registrieren
OpaqueRange Ermöglicht das Erstellen von Livebereichen über Text in <input> - und <textarea> -Elementen, die automatisch aktualisiert werden, während der Benutzer bearbeitet. Diese Bereiche unterstützen Geometriemethoden wie getBoundingClientRect() und die benutzerdefinierte CSS-Hervorhebungs-API, die Anwendungsfälle wie Popups mit Caretposition und Inline-Rechtschreibprüfung direkt in Formularsteuerelementen ermöglicht, ohne Elemente klonen oder interne DOM-Struktur verfügbar zu lassen. Registrieren
HTML im Zeichenbereich Ermöglicht das Rendern von HTML im Zeichenbereich mit neuen Zeichnungsmethoden und dem paint -Ereignis. Registrieren
API für digitale Anmeldeinformationen – Unterstützung für die Ausstellung Löst die Ausstellung von Benutzeranmeldeinformationen von einem Server für den Anmeldeinformationsaussteller an eine digitale Wallet-Anwendung aus. Registrieren
prerender_until_script API-Aktion für Spekulationsregeln Eine API-Aktion mit Spekulationsregeln, die eine Seite vorab rendert, aber zum Vorabruf wechselt, wenn ein Skript ausgeführt wird. Registrieren
WebAudio Konfigurierbares Render quantum Hiermit können Sie beim Erstellen eines oder OfflineAudioContexteine AudioContext benutzerdefinierte Render quantum-Größe angeben. Registrieren
Vorabrendern der Aktivierung durch Formularübermittlung Ermöglicht die Aktivierung von Prerenderregeln in der Spekulationsregeln-API durch Formularübermittlungen. Registrieren
CPU-Leistungs-API Macht Informationen zu den Gerätefunktionen des Benutzers für die Verwendung mit der Compute Pressure-API verfügbar. Registrieren
Positivliste für Verbindungen Schränkt Verbindungen von einem Dokument oder Worker auf eine vom Server verteilte Positivliste von Endpunkten ein. Registrieren
focus-without-user-activation Berechtigungsrichtlinie Ermöglicht einem Einbettungssteuerelement den programmgesteuerten Fokus von eingebetteten Inhalten über die Berechtigungsrichtlinie focus-without-user-activation . Wenn die Richtlinie für einen Frame verweigert wird, werden programmgesteuerte Fokusaufrufe (element.focus(), , autofocuswindow.focus(), dialog.showModal(), und Popoverfokus) blockiert, es sei denn, sie werden durch die Benutzeraktivierung ausgelöst oder der Fokus delegiert. Registrieren
Erweiterte Canvas-TextMetriken Erweitert die TextMetrics Canvas-API mit Auswahlrechtecken, Begrenzungsrahmenabfragen und glyphencluster-Vorgängen. Registrieren
<usermedia> HTML-Element Ein browsergesteuertes HTML-Element zum Anfordern des Kamera- oder Mikrofonzugriffs, das JavaScript-basierte Berechtigungsanforderungen ersetzt. Registrieren
Vorabrendern von ursprungsübergreifenden iFrames Prerendert ursprungsübergreifende iFrames über einen Opt-In-Antwortheader, anstatt sie bis zur Seitenaktivierung zu verzögern. Registrieren
Containerzeitsteuerung Überwacht, wenn ein mit Anmerkungen versehener DOM-Container angezeigt wird und seine anfängliche Strichfarbe abgeschlossen wurde. Registrieren
Separate Stil- und Layoutdauern in der API für lange Animationsframes Fügt styleDurationdie Eigenschaften , forcedStyleDuration, layoutDurationund forcedLayoutDuration für eine tiefergehende CSS-Leistungsanalyse hinzu. Registrieren
Eingabeaufforderungs-API-Samplingparameter Mit den topK Samplingparametern und temperature können Sie das Modellverhalten pro Sprachmodellsitzung optimieren. Registrieren
<install> HTML-Element Installieren Sie andere Websites deklarativ als Web-Apps, indem Sie das <install> -Element verwenden. Registrieren
Skripts für deklarative CSS-Module Gibt deklarative Stylesheets mit Schattenwurzeln einschließlich deklarativer Schattenwurzeln mithilfe von Inlineformatmodulen frei. Registrieren
Gamepad-Roheingabeereignis Anstatt sich auf häufige Abrufe über navigator.getGamepads()zu verlassen, können Webseiten auf gamepadrawinputchanged Ereignisse lauschen. Diese Ereignisse werden ausgelöst, wenn Änderungen zwischen Eingabeframes vom gleichen Gerät erkannt werden. Registrieren
AutoAusfüllen-Ereignis Erkennt, wenn das automatische Ausfüllen im Browser Formularsteuerelemente zum Anpassen der benutzerdefinierten Benutzeroberfläche und Überprüfung aktualisiert. Registrieren
Benutzerdefinierte WebAssembly-Deskriptoren V2 Speichert Daten, die Typen auf Quellebene zugeordnet sind, effizienter in benutzerdefinierten Deskriptorobjekten. Registrieren
WebMCP Ermöglicht Es Ihrer Website, Tools für einen Browser-Agent zu registrieren, um Aufgaben im Namen eines Benutzers auszuführen. Registrieren

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Chromium.org erstellt und freigegeben wurden und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden.

  • Last updated on