Experimentelle Funktionen in Firefox

Das Layout für input type="search" wurde aktualisiert. Dies führt dazu, dass ein Suchfeld ein Löschsymbol hat, sobald jemand anfängt, darin zu tippen, um andere Browserimplementierungen abzugleichen. (Siehe Firefox Bug 558594 für weitere Details.)

HTML-Passwort-Eingabeelemente (<input type="password">) enthalten ein „Auge“-Symbol, das umgeschaltet werden kann, um den Passworttext anzuzeigen oder zu verbergen (Firefox Bug 502258).

Diese Funktion rendert Steuerzeichen (Unicode-Kategorie Cc), außer Tab (U+0009), Zeilenumbruch (U+000A), Formfeed (U+000C) und Wagenrücklauf (U+000D), als eine Hex-Box, wenn sie nicht erwartet werden. (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 herabfallsende, 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ößen-Eigenschaften angewandt wird. Diese Funktion wird bereits gut für CSS Grid Layout-Schienenmaßen unterstützt. (Siehe Firefox Bug 1312588 für weitere Details.)

Früher als „scroll-linked animations“ bezeichnet, hängt eine scroll-gesteuerte Animation von der Scrollposition eines Scrollbalkens ab, anstatt von der Zeit oder einer anderen Dimension. Die scroll-timeline-name und scroll-timeline-axis Eigenschaften (und die scroll-timeline Kurzschreibweise) 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. Der Scroll-Zeitstrahl kann dann mit einer Animation verbunden werden, indem die animation-timeline Eigenschaft auf den mit scroll-timeline-name definierten Namen gesetzt wird.

Wenn die scroll-timeline Kurzschreibweise verwendet wird, muss die Reihenfolge der Eigenschaftswerte scroll-timeline-name gefolgt von scroll-timeline-axis sein. Die Langform- und Kurzforms-Eigenschaften stehen beide hinter der Präferenz zur Verfügung.

Alternativ können Sie die scroll() funktionale Notation mit animation-timeline verwenden, um anzugeben, dass eine Scroll-Leiste in einem übergeordneten Element für die Zeitleiste verwendet wird.

Weitere Informationen finden Sie unter 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 Kurzschreibweise) werden noch nicht unterstützt. Weitere Informationen finden Sie unter 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 erlaubt 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 durchsichtigen Schichteneffekten 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 Benutzer-Agent oder das zugrunde liegende Betriebssystem Farben umkehrt. 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, wodurch festgestellt wird, dass sein übergeordnetes Scroller-Element die Quelle einer „view progress timeline“ ist. Der Name kann dann der animation-timeline zugewiesen werden, die das zugeordnete Element animiert, während es sich durch den sichtbaren Bereich seines übergeordneten Scrollers bewegt. Siehe (Firefox Bug 1737920) für weitere Details.

Die CSS view() Funktion ermöglicht es Ihnen, anzugeben, dass die animation-timeline für ein Element eine „view progress timeline“ ist, die das Element animiert, während es sich durch den sichtbaren Bereich seines übergeordneten Scrollers bewegt. Die Funktion definiert die Achse des übergeordneten Elements, das die Zeitleiste liefert, zusammen mit dem Versatz innerhalb des sichtbaren Bereichs, an dem die Animation beginnt und startet. Siehe (Firefox Bug 1808410) für weitere Details.

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

Speziell diese Präferenz wird 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 die Schriftgröße nun nicht mehr, wenn sie innerhalb von Abschnittselementen <article>, <aside>, <nav> und <section> verschachtelt ist. Die UA Styles für <h1>, die in Abschnittselementen verschachtelt sind, sind nicht mehr relevant, seit der Outline-Algorithmus aus der HTML Spezifikation entfernt wurde. (Firefox Bug 1883896).

Die CSS shape() Funktion ist ein <basic-shape> Datentyp, der es ermöglicht, eine Form in den clip-path und offset-path Eigenschaften mithilfe eines oder mehrerer „shape commands“ zu definieren. Diese Befehle sind den SVG-Pfadbefehlen sehr ähnlich. Die shape() Funktion ähnelt in gewisser Hinsicht der path() Funktion, aber im Gegensatz zu path(), die die SVG-Pfad Syntax verwendet, benutzt shape() die Standard-CSS-Syntax. Dies ermöglicht es Ihnen, Formen leicht 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 Unterstützung der Funktion in offset-path, und Firefox Bug 1884425 für ihre Interpolationsunterstützung.

Die CSS letter-spacing Eigenschaft teilt jetzt den angegebenen Buchstabensabstand gleichmäßig auf beide Seiten jedes Zeichens auf. Dies unterscheidet sich vom aktuellen Verhalten, bei dem der Abstand hauptsächlich auf eine Seite hinzugefügt wird. Dieser Ansatz kann den Textabstand verbessern, insbesondere bei gemischt-direktionalem Text Firefox Bug 1891446.

Die CSS calc() Funktion kann jetzt Farbkanäle in relativen Farben analysieren, sodass Sie Änderungen an Farben in verschiedenen Farbräumen oder bei der Verwendung verschiedener Funktionsnotationen korrekt berechnen können Firefox Bug 1889561.

Das CSS-Ankerpositionierungsmodul definiert eine Reihe von Funktionen, die es ermöglichen, Elemente als Ankerelemente zu definieren, und andere Elemente relativ zu Ankerelementen zu positionieren. Dies ermöglicht es beispielsweise, Tooltipps zusammen mit zugehörigem Inhalt anzuzeigen, während dieser durch das Sichtfenster scrollt, sich bei Bedarf bewegt, wenn er das Sichtfenster überschreiten würde, und verschwindet, wenn der Anker das Sichtfenster verlässt. Die Funktionen werden schrittweise hinter einer Präferenz eingeführt (Firefox Bug 1838746).

Die implementierten Teile umfassen:

• CSSPositionTryRule und CSSPositionTryDescriptors (Firefox 131).

Keine.

Das Temporal-Objekt zielt darauf ab, die Arbeit mit Datums- und Zeitangaben in verschiedenen Szenarien zu vereinfachen, mit integrierten Zeitzonen- und Kalenderdarstellungen (Firefox Bug 1912511). Dazu gehören:

• Eine Dauer (Unterschied zwischen zwei Zeitpunkten): Temporal.Duration
• Zeitpunkte:
  • Als ein einzigartiger Moment in der Geschichte:
    • Ein Zeitstempel: Temporal.Instant
    • Ein Datum-Uhrzeit mit Zeitzone: Temporal.ZonedDateTime
  • **Zeitzonenunabhä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 Zeit) als verschiedene Klasseninstanzen oder in einem bestimmten Format: Temporal.Now

Die Error.captureStackTrace() statische Methode installiert die Stack-Trace-Informationen auf einem bereitgestellten Objekt als Error.stack Eigenschaft. Ihr Hauptanwendungsfall besteht darin, einen Stack-Trace auf einem benutzerdefinierten Fehlerobjekt zu installieren, das nicht von der Error-Schnittstelle abgeleitet ist. (Firefox Bug 1886820).

Eingebaute Webkomponenten mit „open“- und „close“-Semantik, wie modale Dialoge und Popovers, können durch gerätenative 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 Sidebars zu implementieren, die ähnlich über native Mechanismen geschlossen werden können. (Firefox bug 1888729).

Die Trusted Types API bietet Mechanismen, um sicherzustellen, dass Funktionen, die potenziell als Vektoren für XSS-Angriffe verwendet werden können, nur mit Daten aufgerufen werden können, die validiert oder bereinigt wurden.

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 zusätzlich zu Zeichenfolgen 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 auf die Trusted Types API zuzugreifen.
• Die Eigenschaften Element.innerHTML und ShadowRoot.innerHTML können mit trusted types aufgerufen werden.

WebGL: Entwurfserweiterungen

Wenn diese Präferenz aktiviert ist, sind alle WebGL-Erweiterungen, die sich derzeit im "Entwurfs"-Status befinden und getestet werden, für die Nutzung freigeschaltet. Derzeit werden von Firefox keine WebGL-Erweiterungen getestet.

WebGPU API

Die WebGPU API bietet Unterstützung auf niedriger Ebene für die Durchführung von Berechnungen und Grafikwiedergaben unter Verwendung der Grafikprozessor-Einheit (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 das Melden von Verstößen gegen die Content Security Policy (CSP).

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

Berichte über CSP-Verstöße können auch an entfernte Endpunkte gesendet werden, die namentlich in der CSP-report-to-Direktive angegeben sind — die Endpunktnamen und die entsprechenden URLs müssen zuerst in den Reporting-Endpoints- oder Report-To-HTTP-Antwort-Headern 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 Berichts-Endpunkts festzulegen, und ein CSP-spezifisches JSON-Verstoßberichtformat 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 enthalten sind.

Asynchrones Hinzufügen und Entfernen von SourceBuffer

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

AVIF-Konformitätsstrenge

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

Erlaubte Werte sind:

• 0: Akzeptiere Bilder mit Spezifikationsverletzungen sowohl in Empfehlungen („sollte“-Sprache) als auch in Anforderungen („muss“-Sprache), vorausgesetzt, sie können sicher oder unzweideutig interpretiert werden.
• 1 (Standard): Weisen Sie Verstöße gegen Anforderungen zurück, erlauben aber Verstöße gegen Empfehlungen.
• 2: Streng. Weist alle Verstöße gegen Anforderungen oder Empfehlungen zurück.

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, wie unten gezeigt, die Funktion nur in Nightly-Builds verfügbar ist (unabhängig davon, ob die Präferenz gesetzt ist).

Die CSS Custom Highlight API bietet einen Mechanismus zum Styling beliebiger Textranges in einem Dokument (und generalisiert das Verhalten anderer Highlight-Pseudoelemente wie ::selection, ::spelling-error, ::grammar-error, und ::target-text). Die Bereiche werden in JavaScript unter Verwendung von Range-Instanzen definiert, die in einem Highlight gruppiert sind, und dann über HighlightRegistry mit einem Namen registriert. Das CSS ::highlight-Pseudoelement wird verwendet, um Styles auf ein registriertes Highlight anzuwenden. 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.

Selektionen über Shadow-DOM-Grenzen hinweg

Die Methode Selection.getComposedRanges() kann verwendet werden, um ein Array von StaticRange-Objekten zu erhalten, die den aktuellen ausgewählten Bereich oder Bereiche repräsentieren. Im Gegensatz zu Selection.getRangeAt() kann diese Methode Bereiche mit Anker- oder Fokusknoten innerhalb eines Shadow-DOMs zurückgeben, aber nur, wenn die ShadowRoot-Objekte, die diese Knoten enthalten, übergeben werden. Andernfalls wird ein Bereich zurückgegeben, der neu ausgerichtet wurde, um den Host-Knoten des Shadow-Root zu umfassen, das den Knoten enthält. Die Selection-Methoden setBaseAndExtent(), collapse() und extend() wurden ebenfalls modifiziert, um Knoten innerhalb eines Shadow-Root zu akzeptieren.

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

HTMLMediaElement-Eigenschaften: audioTracks und videoTracks

Durch Aktivieren dieser Funktion 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() bestimmen den Punkt, das Rechteck oder das Viereck von dem Node, auf dem sie aufgerufen werden, zu einem anderen Knoten. (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 Viewport zurück. (Siehe Firefox bug 917755 für weitere Details.)

Primäre Zahlungsabwicklung

Die Payment Request API unterstützt die Abwicklung von webbasierten Zahlungen innerhalb von Webinhalten oder Apps. Aufgrund eines Fehlers, der während des Testens der Benutzeroberfläche auftrat, haben wir beschlossen, den Versand dieser API zu verschieben, während Diskussionen über potenzielle Änderungen an der API geführt werden. Die Arbeit geht weiter. (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 aus. Diese Funktion ist auf Android in allen Builds aktiviert, bleibt aber auf dem Desktop hinter einer Präferenz (es sei denn, unten angegeben).

ScreenOrientation.lock()

Die Methode ScreenOrientation.lock() ermöglicht es, ein Gerät auf eine bestimmte Ausrichtung zu sperren, wenn dies vom Gerät unterstützt und durch die browserseitigen Anforderungen vor der Sperrung erlaubt wird. Normalerweise ist das Sperren der Ausrichtung nur auf Mobilgeräten erlaubt, wenn das Dokument im Vollbildmodus angezeigt wird. Siehe Firefox bug 1697647 für weitere Details.

Die Priorisierte Task-Scheduling API bietet eine standardisierte Möglichkeit, alle Aufgaben einer Anwendung zu priorisieren, unabhängig davon, ob sie im Code eines Webseiten-Entwicklers oder in Drittanbieter-Bibliotheken 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 Schäden in the Wild zu vermeiden.

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

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

Die zwei Präferenzen security.insecure_connection_text_* fügen neben dem traditionellen Schloss-Symbol im Adressfeld eine "Nicht sicher"-Textmarkierung hinzu, wenn eine Seite unsicher geladen wird (das heißt mit HTTP anstelle von HTTPS). Die Präferenz browser.urlbar.trimHttps kürzt das https:-Präfix in den URLs der Adressleiste. Siehe Firefox bug 1853418 für weitere Details.

Permissions Policy ermöglicht es Webentwicklern, bestimmte Funktionen und APIs im Browser selektiv zu aktivieren, zu deaktivieren und deren Verhalten zu ändern. Sie ähnelt CSP, kontrolliert jedoch Funktionen anstelle des Sicherheitsverhaltens. Dies wird in Firefox als Feature Policy implementiert, der Name, der in einer früheren Version der Spezifikation verwendet wurde.

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

PPA API bietet eine Alternative zur Benutzerverfolgung für Anzeigenattribuierung unter Verwendung des neuen navigator.privateAttribution-Objekts mit den Methoden saveImpression() und measureConversion(). Lesen Sie mehr über PPA im Erklärungsdokument. Dieses Experiment kann für Websites über Origin Trial oder im Browser durch Einstellen der Präferenz auf 1 aktiviert werden. (Firefox bug 1900929).

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

SameSite-Cookies haben einen Standardwert von Lax. Mit dieser Einstellung werden Cookies nur gesendet, wenn ein Benutzer zur Ursprungsseite navigiert, nicht für plattformübergreifende Unteranfragen, um Bilder oder Frames in eine Drittpartei-Seite zu laden und so weiter. Für weitere Details siehe Firefox bug 1617609.

Der Access-Control-Allow-Headers ist ein Antwort-Header auf eine Vorauswahl-Anfrage von CORS, die angibt, welche Anfrage-Header im endgültigen Request enthalten sein dürfen. Die Antwortdirektive kann ein Wildcard (*) enthalten, das angibt, dass der endgültige Request alle Header außer dem Authorization-Header einschließen darf.

Standardmäßig enthält Firefox den Authorization-Header im endgültigen Request nach Erhalt einer Antwort mit Access-Control-Allow-Headers: *. Setzen Sie die Präferenz auf false, um sicherzustellen, dass Firefox den Authorization-Header nicht einschließt. Für weitere Details siehe Firefox bug 1687364.

Die Clear-Site-Data kann mit der cache- oder *-Direktive verwendet werden, um den lokalen Browser-Cache zu leeren. Für weitere Details siehe Firefox bug 1942272.

Mozillas Entwickler-Tools entwickeln sich ständig weiter. Wir experimentieren mit neuen Ideen, fügen neue Funktionen hinzu und testen sie in den Kanälen Nightly und Developer Edition, bevor sie in die Beta und die Freigabe gelangen. Die unten aufgeführten Funktionen sind die derzeitige Ernte experimenteller Entwickler-Tool-Funktionen.

• Release Notes für Firefox-Entwickler
• Firefox Nightly
• Firefox Developer Edition