Experimentelle Funktionen in Firefox

Das Layout für input type="search" wurde aktualisiert. Dies führt dazu, dass ein Suchfeld ein Löschsymbol erhält, sobald jemand darin zu tippen beginnt, um den Implementierungen anderer Browser zu entsprechen. (Siehe Firefox-Bug 558594 für weitere Details.)

HTML-Passworteingabeelemente (<input type="password">) beinhalten ein "Augen"-Symbol, das umgeschaltet werden kann, um den Passworttext anzuzeigen oder zu verbergen (Firefox-Bug 502258).

Diese Funktion stellt Steuerzeichen (Unicode-Kategorie Cc) außer Tab (U+0009), Lf (U+000A), Ff (U+000C) und Cr (U+000D) als Hex-Box dar, wenn sie unerwartet sind. (Siehe Firefox-Bug 1099557 für weitere Details.)

Die initial-letter CSS-Eigenschaft ist Teil der CSS Inline Layout Spezifikation und ermöglicht es Ihnen, festzulegen, wie abgesenkte, angehobene und versenkte Anfangsbuchstaben angezeigt werden. (Siehe Firefox-Bug 1223880 für weitere Details.)

Die fit-content() Funktion, wie sie auf width und andere Größenangabeneigenschaften angewendet wird. Diese Funktion wird bereits gut für die Größenanpassung von CSS-Grid-Layout-Spuren unterstützt. (Siehe Firefox-Bug 1312588 für weitere Details.)

Früher als "scroll-verknüpfte Animationen" bezeichnet, hängt eine scroll-gesteuerte Animation von der Scrollposition eines Scrollbalkens statt von Zeit oder einer anderen Dimension ab. Die scroll-timeline-name und scroll-timeline-axis Eigenschaften (und die scroll-timeline Kurzschreibeigenschaft) ermöglichen es Ihnen, anzugeben, dass ein bestimmter Scrollbalken in einem bestimmten benannten Container als Quelle für eine scroll-gesteuerte Animation verwendet werden kann. Die Scroll-Timeline kann dann mit einer Animation verknüpft werden, indem die animation-timeline Eigenschaft auf den Namenwert gesetzt wird, der mit scroll-timeline-name definiert ist.

Wenn Sie die scroll-timeline Kurzschreibeigenschaft verwenden, muss die Reihenfolge der Eigenschaftswerte scroll-timeline-name gefolgt von scroll-timeline-axis sein. Die Langform- und Kurzform-Eigenschaften sind beide hinter der Präferenz verfügbar.

Alternativ können Sie die scroll() Funktionsschreibweise mit animation-timeline verwenden, um anzugeben, dass eine Scrollbalkenachse in einem Vorfahrenelement für die Timeline verwendet wird.

Für weitere Informationen siehe Firefox-Bug 1807685, Firefox-Bug 1804573, Firefox-Bug 1809005, Firefox-Bug 1676791, Firefox-Bug 1754897, Firefox-Bug 1817303 und Firefox-Bug 1737918.

Die timeline-scope, animation-range-start und animation-range-end Eigenschaften (und die animation-range Kurzschreibeigenschaft) werden noch nicht unterstützt. Für weitere Informationen siehe Firefox-Bug 1676779.

Die @scope CSS At-Regel ermöglicht es Ihnen, spezifische Kindelemente auszuwählen, ohne die Spezifität von CSS-Selektoren übermäßig zu erhöhen (Firefox-Bug 1886441).

Die CSS font-variant-emoji Eigenschaft ermöglicht es Ihnen, einen Standarddarstellungsstil für die Anzeige von Emojis festzulegen. Siehe Firefox-Bug 1461589 für weitere Details.

Die CSS prefers-reduced-transparency Medienfunktion ermöglicht es Ihnen, zu erkennen, ob ein Benutzer die Einstellung aktiviert hat, um die Menge an transparenten oder transluzenten Layer-Effekten auf seinem Gerät zu minimieren. Siehe Firefox-Bug 1736914 für weitere Details.

Die CSS inverted-colors Medienfunktion ermöglicht es Ihnen zu erkennen, ob ein Benutzeragent oder das zugrunde liegende Betriebssystem Farben invertiert. Siehe Firefox-Bug 1794628 für weitere Details.

Die CSS view-timeline-name Eigenschaft ermöglicht es Ihnen, einem bestimmten Element einen Namen zu geben, indem identifiziert wird, dass das Vorfahren-Scroller-Element die Quelle einer View Progress Timeline ist. Der Name kann dann der animation-timeline zugewiesen werden, die dann das zugehörige Element animiert, während es durch den sichtbaren Bereich seines Vorfahren-Scrollers bewegt wird. Siehe Firefox-Bug 1737920 für weitere Details.

Die CSS view() Funktion ermöglicht es Ihnen, festzulegen, dass die animation-timeline für ein Element eine View Progress Timeline ist, die das Element animiert, während es durch den sichtbaren Bereich seines Vorfahren-Scrollers bewegt wird. Die Funktion definiert die Achse des Elternelements, das die Timeline liefert, zusammen mit dem Einschub innerhalb des sichtbaren Bereichs, an dem die Animation startet und endet. Siehe Firefox-Bug 1808410 für weitere Details.

Die -moz- präfixierten CSS transform Eigenschaften können deaktiviert werden, indem die Präferenz layout.css.prefixes.transforms auf false gesetzt wird. Die Absicht ist, diese zu deaktivieren, sobald die standardmäßigen CSS-Zoom-Eigenschaften gut unterstützt werden. (Firefox-Bug 1886134, Firefox-Bug 1855763).

Konkret wird diese Präferenz die folgenden präfixierten Eigenschaften deaktivieren:

• -moz-backface-visibility
• -moz-perspective
• -moz-perspective-origin
• -moz-transform
• -moz-transform-origin
• -moz-transform-style

Die <h1> Überschrift verringert jetzt nicht mehr ihre Schriftgröße, wenn sie innerhalb von gliedernden Elementen <article>, <aside>, <nav> und <section> verschachtelt ist. Die UA-Stile für <h1>, die in gliedernden Elementen verschachtelt sind, sind nicht mehr relevant, da der Outline-Algorithmus aus der HTML-Spezifikation entfernt wurde. (Firefox-Bug 1883896).

Die CSS shape() Funktion ist ein <basic-shape> Datentyp, der es Ihnen ermöglicht, eine Form in den clip-path und offset-path Eigenschaften unter Verwendung eines oder mehrerer "Formenbefehle" zu definieren. Diese Befehle sind dem SVG-Pfadbefehlen sehr ähnlich. Die shape()-Funktion ähnelt in gewisser Weise der path()-Funktion, aber im Gegensatz zu path(), die die SVG-Pfad Syntax verwendet, verwendet shape() die standardmäßige CSS-Syntax. Dies ermöglicht es Ihnen, Formen einfach zu erstellen und zu bearbeiten und ermöglicht auch die Verwendung von CSS-Mathematikfunktionen. Für weitere Details siehe Firefox-Bug 1823463 für die shape()-Funktion Unterstützung in clip-path, Firefox-Bug 1884424 für die Funktion Unterstützung in offset-path und Firefox-Bug 1884425 für die Interpolation Unterstützung.

Die CSS letter-spacing Eigenschaft verteilt jetzt den angegebenen Zeichenabstand gleichmäßig auf beide Seiten jedes Zeichens. Dies ist im Gegensatz zum aktuellen Verhalten, bei dem der Abstand hauptsächlich auf eine Seite hinzugefügt wird. Dieser Ansatz kann die Zeichenabstände verbessern, insbesondere in gemischt-direktionalem Text Firefox-Bug 1891446.

Die CSS calc() Funktion kann jetzt Farbkanäle in relativen Farben analysieren, was es Ihnen ermöglicht, Änderungen an Farben in verschiedenen Farbräumen oder bei Verwendung unterschiedlicher funktioneller Schreibweisen korrekt zu berechnen Firefox-Bug 1889561.

Das CSS Anchor Positioning Modul definiert eine Reihe von Funktionen, die es ermöglichen, Elemente als Anker-Elemente zu definieren, und andere Elemente im Verhältnis zu diesen Ankern zu positionieren. Dadurch können z.B. Tooltips zusammen mit zugehörigen Inhalten angezeigt werden, während sie durch das Sichtfenster scrollen, sich bei Bedarf bewegen, wenn sie das Sichtfenster überschreiten würden, und verschwinden, wenn der Anker aus dem Bildschirm verschwindet. Die Funktionalitäten werden schrittweise hinter einer Präferenz eingeführt (Firefox-Bug 1838746).

Die implementierten Teile umfassen:

• CSSPositionTryRule und CSSPositionTryDescriptors (Firefox 131).

Keine.

Das Temporal-Objekt soll die Arbeit mit Daten und Zeiten in verschiedenen Szenarien vereinfachen, mit eingebauten Zeitzonen- und Kalenderdarstellungen (Firefox-Bug 1912511). Dies umfasst:

• Eine Dauer (Unterschied zwischen zwei Zeitpunkten): Temporal.Duration
• Zeitpunkte:
  • Als einzigartiger Moment in der Geschichte:
    • Ein Zeitstempel: Temporal.Instant
    • Ein Datum-Uhrzeit mit einer Zeitzone: Temporal.ZonedDateTime
  • Zeitzonenerunabhängiges Datum/Uhrzeit ("Plain"):
    • Datum (Jahr, Monat, Tag) + Uhrzeit (Stunde, Minute, Sekunde, Millisekunde, Nanosekunde): Temporal.PlainDateTime
      • Datum (Jahr, Monat, Tag): Temporal.PlainDate
        • Jahr, Monat: Temporal.PlainYearMonth
        • Monat, Tag: Temporal.PlainMonthDay
      • Uhrzeit (Stunde, Minute, Sekunde, Millisekunde, Nanosekunde): Temporal.PlainTime
• Jetzt (aktuelle Uhrzeit) als verschiedene Klasseninstanzen oder in einem bestimmten Format: Temporal.Now

Die Error.captureStackTrace() statische Methode installiert Stapelverfolgungsinformationen auf einem bereitgestellten Objekt als Error.stack Eigenschaft. Ihr Hauptverwendungszweck besteht darin, eine Stapelverfolgung auf einem benutzerdefinierten Fehlerobjekt zu installieren, das nicht von der Error Schnittstelle abgeleitet wurde. (Firefox-Bug 1886820).

Eingebaute Web-Komponenten mit "öffnen" und "schließen" Semantik, wie modale Dialoge und Popover, können mit geräteeigenen Mechanismen geschlossen werden. Zum Beispiel können Sie auf Android einen Dialog mit der Zurück-Taste schließen. Die CloseWatcher Schnittstelle ermöglicht es Entwicklern, UI-Komponenten, wie benutzerdefinierte Seitenleisten, zu implementieren, die ähnlich mit nativen Mechanismen geschlossen werden können. (Firefox Bug 1888729).

Die Trusted Types API bietet Mechanismen, um sicherzustellen, dass Funktionen, die potenziell für XSS-Angriffe genutzt werden können, nur mit validierten oder bereinigten Daten aufgerufen werden können.

Dieser Teil der API wurde implementiert:

• TrustedTypePolicyFactory:
  • getAttributeType() und getPropertyType() (Firefox Bug 1917783, Firefox Bug 1917784).
• Die Methoden write() und writeln() der Document Schnittstelle akzeptieren jetzt neben Zeichenketten auch TrustedHTML-Objekte als Parameter. (Firefox Bug 1906301).
• Die Eigenschaften text, innerText und textContent der HTMLScriptElement Schnittstelle akzeptieren jetzt TrustedScript-Objekte als Wert, während src TrustedScriptURL-Werte akzeptiert. (Firefox Bug 1905706).
• Die Methoden Window.setInterval() und Window.setTimeout() können mit einem TrustedScript aufgerufen werden. (Firefox Bug 1931290).
• Die globale Eigenschaft trustedTypes ist verfügbar, um Zugriff auf die Trusted Types API zu erhalten.
• Die Eigenschaften Element.innerHTML und ShadowRoot.innerHTML können mit trusted types aufgerufen werden.

WebGL: Entwurfserweiterungen

Wenn diese Einstellung aktiviert ist, werden alle WebGL-Erweiterungen, die sich derzeit im Status "Entwurf" befinden und getestet werden, zur Nutzung aktiviert. Derzeit werden keine WebGL-Erweiterungen von Firefox getestet.

WebGPU API

Die WebGPU API bietet Unterstützung auf niedriger Ebene für die Durchführung von Berechnungen und Grafikrendering unter Verwendung der Graphics Processing Unit (GPU) des Geräts oder Computers des Benutzers. Siehe Firefox Bug 1602129 für unseren Fortschritt bei dieser API.

Die Reporting API unterstützt jetzt die Berichterstattung von Content Security Policy (CSP)-Verstößen.

Report-Instanzen, die von der ReportingObserver-Schnittstelle zurückgegeben werden, können jetzt einen type-Wert von "csp-violation" und eine body-Eigenschaft haben, die eine Instanz der CSPViolationReportBody-Schnittstelle enthält. Dies ermöglicht die Meldung von CSP-Verstößen innerhalb einer Webseite.

CSP-Verstoßmeldungen können auch an entfernte Endpunkte gesendet werden, die namentlich in der CSP report-to-Direktive angegeben sind – Endpunktnamen und entsprechende URLs müssen zunächst in den Reporting-Endpoints oder Report-To HTTP-Antwortkopfzeilen definiert werden. Der Bericht ist eine Serialisierung des oben beschriebenen Report-Objekts, mit einer body-Eigenschaft, die eine Serialisierung einer CSPViolationReportBody-Instanz ist.

Dieser Verstoßbericht ersetzt einen ähnlichen CSP-spezifischen Mechanismus zum Senden von Verstoßberichten, der die CSP report-uri-Direktive verwendet, um die URL des Berichtsendpunkts festzulegen, und ein CSP-spezifisches JSON-Verstoßberichtsformat hat. (Firefox Bug 1391243).

Die folgenden experimentellen Funktionen umfassen diejenigen, die in der WebRTC API, der Web Audio API, der Media Source Extensions API, der Encrypted Media Extensions API und der Media Capture and Streams API gefunden werden.

Asynchrones Hinzufügen und Entfernen von SourceBuffer

Dies fügt die auf Promise basierenden Methoden appendBufferAsync() und removeAsync() zum Hinzufügen und Entfernen von Mediensource-Puffern zur SourceBuffer Schnittstelle hinzu. Siehe Firefox Bug 1280613 und Firefox Bug 778617 für weitere Informationen.

AVIF Konformitätsstrenge

Die Präferenz image.avif.compliance_strictness kann verwendet werden, um die Strenge zu steuern, die beim Verarbeiten von AVIF-Bildern angewendet wird. Dies ermöglicht es Firefox-Benutzern, Bilder anzuzeigen, die in einigen anderen Browsern gerendert werden, auch wenn sie nicht strikt konform sind.

Erlaubte Werte sind:

• 0: Akzeptiere Bilder mit Verstößen gegen die Spezifikation sowohl in Empfehlungen ("sollte" Sprache) als auch in Anforderungen ("muss" Sprache), vorausgesetzt, sie können sicher oder eindeutig interpretiert werden.
• 1 (Standard): Verwerfe Verstöße gegen Anforderungen, erlaube aber Verstöße gegen Empfehlungen.
• 2: Streng. Verwerfe jegliche Verstöße in Anforderungen oder Empfehlungen.

JPEG XL-Unterstützung

Firefox unterstützt JPEG XL-Bilder, wenn diese Funktion aktiviert ist. Siehe Firefox Bug 1539075 für weitere Details.

Beachten Sie, dass die Funktion, wie unten gezeigt, nur in Nightly-Builds verfügbar ist (unabhängig davon, ob die Präferenz gesetzt ist oder nicht).

Die CSS Custom Highlight API bietet einen Mechanismus zur Gestaltung beliebiger Textranges in einem Dokument (Verallgemeinerung des Verhaltens anderer Pseudo-Elemente wie ::selection, ::spelling-error, ::grammar-error, und ::target-text). Die Ranges werden in JavaScript mithilfe von Range-Instanzen definiert, die in einem Highlight gruppiert und dann mit einem Namen mithilfe von HighlightRegistry registriert werden. Das CSS ::highlight Pseudo-Element wird verwendet, um einem registrierten Highlight Stile zuzuweisen. Siehe Firefox Bug 1703961 für weitere Details.

WebVR API (Deaktiviert)

Die veraltete WebVR API befindet sich auf dem Weg zur Entfernung. Sie ist standardmäßig in allen Builds deaktiviert Firefox Bug 1750902.

Auswahlen über die Shadow-DOM-Grenze hinweg

Die Methode Selection.getComposedRanges() kann verwendet werden, um ein Array von StaticRange-Objekten zu erhalten, die den aktuellen ausgewählten Bereich oder die Bereiche darstellen. Im Gegensatz zu Selection.getRangeAt() kann diese Methode Bereiche mit Anker- oder Fokus-Knoten innerhalb eines Shadow DOM zurückgeben, jedoch nur, wenn sie die ShadowRoot-Objekte erhält, die diese Knoten enthalten. Andernfalls gibt sie einen Bereich zurück, der neu festgelegt wurde, um den Hostknoten der Shadow-Root einzuschließen, die den Knoten enthält. Die Selection-Methoden setBaseAndExtent(), collapse(), und extend() wurden ebenfalls modifiziert, um Knoten innerhalb einer Shadow-Root zu akzeptieren.

Benutzerauswahl über Maus, Tastatur usw. kann überall im Dokument beginnen und enden, einschließlich innerhalb offener oder geschlossener Shadow-Bäume. (Firefox Bug 1867058).

HTMLMediaElement-Eigenschaften: audioTracks und videoTracks

Wenn diese Funktion aktiviert ist, werden die Eigenschaften HTMLMediaElement.audioTracks und HTMLMediaElement.videoTracks zu allen HTML-Medienelementen hinzugefügt. Da Firefox jedoch derzeit keine Unterstützung für mehrere Audio- und Videospuren bietet, funktionieren die häufigsten Anwendungsfälle für diese Eigenschaften nicht, sodass sie beide standardmäßig deaktiviert sind. Siehe Firefox Bug 1057233 für weitere Details.

GeometryUtils-Methoden: convertPointFromNode(), convertRectFromNode(), und convertQuadFromNode()

Die GeometryUtils-Methoden convertPointFromNode(), convertRectFromNode(), und convertQuadFromNode() ordnen den angegebenen Punkt, das Rechteck oder das Viereck vom Node, auf dem sie aufgerufen werden, zu einem anderen Knoten zu. (Siehe Firefox Bug 918189 für weitere Details.)

GeometryUtils-Methode: getBoxQuads()

Die GeometryUtils-Methode getBoxQuads() gibt die CSS-Boxen für einen Node relativ zu einem anderen Knoten oder dem Viewport zurück. (Siehe Firefox Bug 917755 für weitere Details.)

Primäre Abwicklung von Zahlungen

Die Payment Request API bietet Unterstützung für die Abwicklung von webbasierten Zahlungen innerhalb von Webinhalten oder Apps. Aufgrund eines Fehlers, der während der Tests der Benutzeroberfläche auftrat, haben wir beschlossen, den Versand dieser API zu verschieben, während über mögliche Änderungen an der API diskutiert wird. Die Arbeit daran ist im Gange. (Siehe Firefox Bug 1318984 für weitere Details.)

Die Web Share API ermöglicht das Teilen von Dateien, URLs und anderen Daten von einer Seite. Diese Funktion ist auf Android in allen Builds aktiviert, jedoch auf Desktop hinter einer Präferenz (außer es ist anders angegeben).

ScreenOrientation.lock()

Die Methode ScreenOrientation.lock() erlaubt es, ein Gerät auf eine bestimmte Ausrichtung zu sperren, wenn dies vom Gerät unterstützt wird und die Anforderungen des Browsers zur Sperrung erfüllt. Normalerweise ist das Sperren der Ausrichtung nur auf mobilen Geräten erlaubt, wenn das Dokument im Vollbildmodus angezeigt wird. Siehe Firefox Bug 1697647 für weitere Details.

Die Priorisierte Aufgaben-Scheduling-API bietet eine standardisierte Möglichkeit, alle Aufgaben einer Anwendung zu priorisieren, egal ob sie im Code eines Webseitenentwicklers oder in Drittanbieterbibliotheken und -frameworks definiert sind. (Firefox Bug 1734997)

Diese Funktion wurde in Firefox Nightly in Firefox 101 aktiviert. Die Unterstützung in Firefox Nightly 135 wurde vorübergehend deaktiviert, um Beschädigung im laufenden Betrieb zu vermeiden.

Benachrichtigungen haben die Eigenschaft requireInteraction standardmäßig auf Windows-Systemen und in der Nightly-Version auf true gesetzt (Firefox Bug 1794475).

Um Man-in-the-Middle (MitM)-Angriffe durch Flash-Inhalte auf verschlüsselten Seiten zu mildern, wurde eine Präferenz hinzugefügt, um OBJECT_SUBREQUESTs wie aktiven Inhalt zu behandeln. Siehe Firefox Bug 1190623 für weitere Details.

Die zwei security.insecure_connection_text_*-Präferenzen fügen neben dem traditionellen Sperrsymbol im Adressfeld einen Text "Nicht sicher" ein, wenn eine Seite unsicher geladen wird (also unter Verwendung von HTTP anstelle von HTTPS). Die Präferenz browser.urlbar.trimHttps kürzt das https:-Präfix aus den URLs in der Adressleiste. Siehe Firefox Bug 1853418 für weitere Details.

Permissions Policy ermöglicht es Web-Entwicklern, das Verhalten bestimmter Funktionen und APIs im Browser selektiv zu aktivieren, zu deaktivieren und zu ändern. Es ist ähnlich wie CSP, kontrolliert jedoch Funktionen statt Sicherheitsverhalten.

Dies ist in Firefox als Feature-Policy implementiert, der Name, der in einer früheren Version der Spezifikation verwendet wurde.

Bitte beachten Sie, dass unterstützte Richtlinien über das allow-Attribut auf <iframe>-Elementen gesetzt werden können, auch wenn die Benutzerpräferenz nicht gesetzt ist.

Die PPA API bietet eine Alternative zur Benutzerverfolgung für die Attributierung von Anzeigen mit dem neuen navigator.privateAttribution-Objekt mit den Methoden saveImpression() und measureConversion(). Lesen Sie mehr über PPA im Explainer. Dieses Experiment kann für Webseiten über Origin Trials oder im Browser durch Setzen der Präferenz auf 1 aktiviert werden. (Firefox Bug 1900929).

Der HTTP Accept-Header in Standardanfragen und Bilderanfragen kann über eine Präferenz konfiguriert werden, um Unterstützung für den image/jxl MIME-Typ anzuzeigen.

SameSite Cookies haben standardmäßig den Wert Lax. Mit dieser Einstellung werden Cookies nur gesendet, wenn ein Benutzer zur Ursprungsseite navigiert, nicht für Subanfragen von Drittanbietern zum Laden von Bildern oder Frames auf einer Drittanbieter-Seite und so weiter. Weitere Details finden Sie unter Firefox Bug 1617609.

Der Access-Control-Allow-Headers ist ein Antwortheader auf eine CORS-Vorabfrage, die angibt, welche Anforderungsheader in der endgültigen Anfrage enthalten sein dürfen. Die Antwortdirektive kann ein Wildcard-Zeichen (*) enthalten, das anzeigt, dass die endgültige Anfrage alle Header außer dem Authorization-Header enthalten darf.

Standardmäßig fügt Firefox den Authorization-Header in die endgültige Anfrage ein, nachdem er eine Antwort mit Access-Control-Allow-Headers: * erhalten hat. Setzen Sie die Präferenz auf false, um sicherzustellen, dass Firefox den Authorization-Header nicht einschließt. Weitere Details finden Sie unter Firefox Bug 1687364.

Der Clear-Site-Data kann zusammen mit den Direktiven cache oder * verwendet werden, um den lokalen Browsercache zu leeren. Weitere Details finden Sie unter Firefox Bug 1942272.

Die Entwicklerwerkzeuge von Mozilla entwickeln sich ständig weiter. Wir experimentieren mit neuen Ideen, fügen neue Funktionen hinzu und testen sie auf den Nightly- und Developer Edition-Kanälen, bevor wir sie in die Beta- und Release-Versionen übergehen lassen. Die unten stehenden Funktionen sind die derzeitige Auswahl an experimentellen Entwicklerwerkzeugfunktionen.

• Firefox-Entwickler-Release-Notizen
• Firefox Nightly
• Firefox Developer Edition