Experimental features in Firefox

HTML

Layout for input type="search"

Layout for input type="search" has been updated. This causes a search field to have a clear icon once someone starts typing in it, to match other browser implementations. (See Firefox bug 558594 for more details.)

layout.forms.input-type-search.enabled

Set to true to enable.

Toggle password display

HTML password input elements (<input type="password">) include an "eye" icon that can be toggled to display or obscure the password text (Firefox bug 502258).

layout.forms.reveal-password-button.enabled

Set to true to enable.

Time picker for datetime-local input field

HTML datetime-local input elements (<input type="datetime-local">) now includes a time picker (Firefox bug 1726108).

dom.forms.datetime.timepicker

Set to true to enable.

CSS

Hex boxes to display stray control characters

This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hex box when they are not expected. (See Firefox bug 1099557 for more details.)

layout.css.control-characters.visible

Set to true to enable.

initial-letter property

The initial-letter CSS property is part of the CSS Inline Layout specification and allows you to specify how dropped, raised, and sunken initial letters are displayed. (See Firefox bug 1223880 for more details.)

layout.css.initial-letter.enabled

Set to true to enable.

fit-content() function

The fit-content() function as it applies to width and other sizing properties. This function is already well-supported for CSS Grid Layout track sizing. (See Firefox bug 1312588 for more details.)

layout.css.fit-content-function.enabled

Set to true to enable.

Scroll-driven animations

Previously called "scroll-linked animations", a scroll-driven animation depends on the scroll position of a scrollbar instead of time or some other dimension. The scroll-timeline-name and scroll-timeline-axis properties (and the scroll-timeline shorthand property) allow you to specify that a particular scrollbar in a particular named container can be used as the source for a scroll-driven animation. The scroll timeline can then be associated with an animation by setting the animation-timeline property to the name value defined using scroll-timeline-name.

When using the scroll-timeline shorthand property, the order of the property values must be scroll-timeline-name followed by scroll-timeline-axis. The longhand and shorthand properties are both available behind the preference. You can alternatively use the scroll() functional notation with animation-timeline to indicate that a scrollbar axis in an ancestor element will be used for the timeline.

For more information, see Firefox bug 1807685, Firefox bug 1804573, Firefox bug 1809005, Firefox bug 1676791, Firefox bug 1754897, Firefox bug 1817303, and Firefox bug 1737918.

The timeline-scope, animation-range-start and animation-range-end properties (and the animation-range shorthand property) are not yet supported. For more information, see Firefox bug 1676779.

layout.css.scroll-driven-animations.enabled

Set to true to enable.

@scope at-rule

The @scope CSS at-rule allows you to select specific child elements without having to overly increase the specificity of CSS selectors (Firefox bug 1886441).

layout.css.at-scope.enabled

Set to true to enable.

prefers-reduced-transparency media feature

The CSS prefers-reduced-transparency media feature lets you detect if a user has enabled the setting to minimize the amount of transparent or translucent layer effects on their device. See (Firefox bug 1736914) for more details.

layout.css.prefers-reduced-transparency.enabled

Set to true to enable.

inverted-colors media feature

The CSS inverted-colors media feature lets you detect if a user agent or the underlying operating system is inverting colors. See (Firefox bug 1794628) for more details.

layout.css.inverted-colors.enabled

Set to true to enable.

Named view progress timelines property

The CSS view-timeline-name property lets you give a name to particular element, identifying that its ancestor scroller element is the source of a view progress timeline. The name can then be assigned to the animation-timeline, which then animates the associated element as it moves through the visible area of its ancestor scroller. See (Firefox bug 1737920) for more details.

layout.css.scroll-driven-animations.enabled

Set to true to enable.

Anonymous view progress timelines function

The CSS view() function lets you specify that the animation-timeline for an element is a view progress timeline, which will animate the element as it moves through the visible area of its ancestor scroller. The function defines the axis of the parent element that supplies the timeline, along with the inset within the visible area at which the animation starts and begins. See (Firefox bug 1808410) for more details.

layout.css.scroll-driven-animations.enabled

Set to true to enable.

Vendor-prefixed transform properties

The -moz- prefixed CSS transform properties can be disabled by setting the layout.css.prefixes.transforms preference to false. The intent is to disable these once the standard CSS zoom properties are well supported. (Firefox bug 1886134, Firefox bug 1855763).

Specifically, this preference will disable the following prefixed properties:

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

layout.css.prefixes.transforms

Set to true to enable.

shape() function

The CSS shape() function is a <basic-shape> data type that enables you to define a shape in the clip-path and offset-path properties using one or more "shape commands". These commands are very similar to the SVG path commands. The shape() function is similar in some respects to the path() function, but unlike path(), which uses the SVG path syntax, shape() uses standard CSS syntax. This enables you to easily create and edit shapes and also allows the use of CSS math functions. For more details, see Firefox bug 1823463 for the shape() function support in clip-path, Firefox bug 1884424 for the function's support in offset-path, and Firefox bug 1884425 for its interpolation support.

layout.css.basic-shape-shape.enabled

Set to true to enable.

Symmetrical letter-spacing

The CSS letter-spacing property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side. This approach can improve text spacing, especially in mixed-directional text Firefox bug 1891446.

layout.css.letter-spacing.model

Set to true to enable.

calc() color channel support in relative colors

The CSS calc() function can now parse color channels in relative colors, allowing you to correctly calculate changes to colors in different color spaces or while using different functional notations Firefox bug 1889561.

layout.css.relative-color-syntax.enabled

Set to true to enable.

CSS Anchor Positioning

The CSS Anchor Positioning module defines a number of features that allow elements to be defined as anchor elements, and for other elements to be positioned relative to anchor elements. This allows, for example, tooltips to be displayed alongside associated content as it scrolls through the viewport, moving as needed when it would overflow the viewport, and disappearing when the anchor moves offscreen. The set of features are being progressively rolled out behind a preference (Firefox bug 1838746).

The parts that have been implemented include CSSPositionTryRule and CSSPositionTryDescriptors (Firefox 131).

layout.css.anchor-positioning.enabled

Set to true to enable.

Allow pseudo-elements after element-backed pseudo-elements

Work has started on allowing pseudo-elements such as ::first-letter and ::before to be appended to element-backed pseudo-elements such as ::details-content and ::file-selector-button.

This will allow users to, for example, style the first letter of the <details> element by using the CSS selector ::details-content::first-letter or add content before an <input> of type="file" using the CSS selector ::file-selector-button::before.

Currently, only support for ::details-content::first-letter can be parsed using @supports(::details-content::first-letter). The ::file-selector-button pseudo-element is not yet marked as an element-based pseudo-element, so there is no way to test this. (Firefox bug 1953557, Firefox bug 1941406).

anchor-size() function

The CSS anchor-size() function enables setting anchor-positioned element's size, position, and margins relative to the dimensions of anchor elements. (Firefox bug 1972610).

layout.css.anchor-positioning.enabled

Set to true to enable.

:heading and :heading() pseudo-classes

The :heading pseudo-class allows you to style all heading elements (<h1>-<h6>) at once, rather than targeting them individually. The :heading() functional pseudo-class allows you to style heading elements that match the <An+B> notation. (Firefox bug 1974386).

layout.css.heading-selector.enabled

Set to true to enable.

SVG

No experimental features in this release cycle.

JavaScript

No experimental features in this release cycle.

APIs

CloseWatcher Interface

Built-in web components with "open" and "close" semantics, such as modal dialogs and popovers, can be closed using device-native mechanisms. For example, on Android you can close a dialog using the back button. The CloseWatcher interface allows developers to implement UI components, such as custom sidebars, that can similarly be closed using native mechanisms. (Firefox bug 1888729).

dom.closewatcher.enabled

Set to true to enable.

Trusted Types API

The Trusted Types API provides mechanisms to ensure that functions that can potentially be used as vectors for XSS attacks are only able to be called with data that has been validated or sanitized.

This subset of the API has been implemented:

• TrustedTypePolicyFactory:
  • getAttributeType() and getPropertyType() (Firefox bug 1917783, Firefox bug 1917784).
• The write() and writeln() methods of the Document interface now accept TrustedHTML objects as parameters, in addition to strings. (Firefox bug 1906301).
• The text, innerText, and textContent properties of the HTMLScriptElement interface now accept TrustedScript objects a value, while src accepts TrustedScriptURL values. (Firefox bug 1905706).
• The Window.setInterval() and Window.setTimeout() methods can be called with a TrustedScript. (Firefox bug 1931290).
• The global trustedTypes property is available for accessing the Trusted Types API.
• The properties Element.innerHTML and ShadowRoot.innerHTML can be called with trusted types.

dom.security.trusted_types.enabled

Set to true to enable.

HTML Sanitizer API

The HTML Sanitizer API allow developers to take untrusted strings of HTML and sanitize them for safe insertion into a document's DOM.

dom.security.sanitizer.enabled

Set to true to enable.

Removal of beforescriptexecute and afterscriptexecute events

The non-standard events beforescriptexecute and afterscriptexecute on the Document interface, and afterscriptexecute and beforescriptexecute on the Element interface are on the path to removal. They have been disabled in Nightly. (Firefox bug 1954685).

dom.events.script_execute.enable

Set to true to enable.

Notification actions and maxActions properties

The actions read-only property and the maxActions static read-only property of the Notification interface are supported in Nightly on desktop. These contain the notification actions set with ServiceWorkerRegistration.showNotification(), and the maximum number of actions that can be set, respectively. (Firefox bug 1225110, Firefox bug 1963263).

dom.webnotifications.actions.enabled

Set to true to enable.

Graphics: Canvas, WebGL, and WebGPU

WebGL: Draft extensions

When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.

WebGPU API

The WebGPU API provides low-level support for performing computation and graphics rendering using the Graphics Processing Unit (GPU) of the user's device or computer. From version 142 this is enabled in on Windows in all contexts except service workers. For other platforms it is enabled in nightly. See Firefox bug 1602129 for our progress on this API.

dom.webgpu.enabled

Set to true to enable (enabled in Nightly and on Windows in all releases)

dom.webgpu.service-workers.enabled

Set to true to enable (enabled in Nightly)

Reporting API support for CSP Violations

The Reporting API now has support for reporting Content Security Policy (CSP) violations.

Report instances returned by the ReportingObserver interface can now have a type value of "csp-violation" and a body property that contains an instance of the CSPViolationReportBody interface. This allows CSP violations to be reported within a web page.

CSP violation reports can also be sent to remote endpoints that are specified by name in the CSP report-to directive — endpoints names and corresponding URLs must first be defined in the Reporting-Endpoints or Report-To HTTP response headers. The report is a serialization of the Report object described above, with a body property that is a serialization of an CSPViolationReportBody instance.

This violation report replaces a similar CSP-specific mechanism for sending violation reports, which uses the CSP report-uri directive to set the URL of the reporting endpoint, and has a CSP-specific JSON violation report format. (Firefox bug 1391243).

dom.reporting.enabled

Set to true to enable.

WebRTC and media

The following experimental features include those found in the WebRTC API, the Web Audio API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

Asynchronous SourceBuffer add and remove

This adds the promise-based methods appendBufferAsync() and removeAsync() for adding and removing media source buffers to the SourceBuffer interface. See Firefox bug 1280613 and Firefox bug 778617 for more information.

media.mediasource.experimental.enabled

Set to true to enable.

AVIF compliance strictness

The image.avif.compliance_strictness preference can be used to control the strictness applied when processing AVIF images. This allows Firefox users to display images that render on some other browsers, even if they are not strictly compliant.

image.avif.compliance_strictness

Numeric value indicating a strictness level. Permitted values are:

• 0: Permissive. Accept images with specification violations in both recommendations ("should" language) and requirements ("shall" language), provided they can be safely or unambiguously interpreted.
• 1 (default): Mixed. Reject violations of requirements ("shall"), but allow violations of recommendations ("should").
• 2: Strict. Reject any violations of specified requirements or recommendations.

JPEG XL support

Firefox supports JPEG XL images if this feature is enabled. See Firefox bug 1539075 for more details.

Note that, as shown below, the feature is only available on Nightly builds (irrespective of whether the preference is set).

image.jxl.enabled

Set to true to enable.

WebVR API

WebVR API (Disabled)

The deprecated WebVR API is on the path for removal. It is disabled by default on all builds Firefox bug 1750902.

dom.vr.enabled

Set to true to enable.

HTMLMediaElement properties: audioTracks and videoTracks

Enabling this feature adds the HTMLMediaElement.audioTracks and HTMLMediaElement.videoTracks properties to all HTML media elements. However, because Firefox doesn't currently support multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See Firefox bug 1057233 for more details.

media.track.enabled

Set to true to enable.

GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()

The GeometryUtils methods convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode() map the given point, rectangle, or quadruple from the Node on which they're called to another node. (See Firefox bug 918189 for more details.)

layout.css.convertFromNode.enable

Set to true to enable.

GeometryUtils method: getBoxQuads()

The GeometryUtils method getBoxQuads() returns the CSS boxes for a Node relative to any other node or viewport. (See Firefox bug 917755 for more details.)

layout.css.getBoxQuads.enabled

Set to true to enable.

Payment Request API

Primary payment handling

The Payment Request API provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. (See Firefox bug 1318984 for more details.)

dom.payments.request.enabled

Set to true to enable.

dom.payments.request.supportedRegions

Country codes as a comma-separated allowlist of regions (e.g., US,CA).

WebShare API

The Web Share API allows sharing of files, URLs and other data from a site. This feature is enabled on Android in all builds, but behind a preference on Desktop (unless specified below).

dom.webshare.enabled

Set to true to enable.

Screen Orientation API

ScreenOrientation.lock()

The ScreenOrientation.lock() method allows a device to be locked to a particular orientation, if supported by the device and allowed by browser pre-lock requirements. Typically locking the orientation is only allowed on mobile devices when the document is being displayed full screen. See Firefox bug 1697647 for more details.

dom.screenorientation.allow-lock

Set to true to enable.

Notifications API

Notifications have the requireInteraction property set to true by default on Windows systems and in the Nightly release (Firefox bug 1794475).

dom.webnotifications.requireinteraction.enabled

Set to true to enable.

Security and privacy

Insecure page labeling

The two security.insecure_connection_text_* preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using HTTP rather than HTTPS). The browser.urlbar.trimHttps preference trims the https: prefix from address bar URLs. See Firefox bug 1853418 for more details.

security.insecure_connection_text.enabled

Set to true to enable the text label for normal browsing mode.

security.insecure_connection_text.pbmode.enabled

Set to true to enable the text label for private browsing mode.

browser.urlbar.trimHttps

Set to true to trim the https: prefix from address bar URLs.

Permissions Policy / Feature policy

Permissions Policy allows web developers to selectively enable, disable, and modify the behavior of certain features and APIs in the browser. It is similar to CSP but controls features instead of security behavior. This is implemented in Firefox as Feature Policy, the name used in an earlier version of the specification.

Note that supported policies can be set through the allow attribute on <iframe> elements even if the user preference is not set.

dom.security.featurePolicy.header.enabled

Set to true to enable.

Privacy Preserving Attribution API (PPA)

PPA API provides an alternative to user tracking for ad attribution using the new navigator.privateAttribution object with saveImpression() and measureConversion() methods. Read more about PPA in the original explainer and the proposed spec. This experiment can be enabled for websites via origin trial or in the browser by setting the preference to 1. (Firefox bug 1900929).

dom.origin-trials.private-attribution.state

Set to true to enable.

HTTP

Integrity policy for stylesheet resources

The Integrity-Policy and Integrity-Policy-Report-Only HTTP headers are now supported for style resources. These allow websites to either enforce subresource integrity guarantees for styles or only report violations of the policy, respectively. Note that Firefox ignores reporting endpoints, and logs violations to the developer console. When Integrity-Policy is used, the browser blocks the loading of styles referenced in a <link> element with rel="stylesheet" that either lack the integrity attribute or have an integrity hash that doesn't match the resource on the server. (Firefox bug 1976656).

security.integrity_policy.stylesheet.enabled

Set to true to enable.

Accept header with MIME type image/jxl

The HTTP Accept header in default requests and image requests can be configured via a preference to indicate support for the image/jxl MIME type.

image.jxl.enabled

Set to true to enable.

SameSite=Lax by default

SameSite cookies have a default value of Lax. With this setting, cookies are only sent when a user is navigating to the origin site, not for cross-site subrequests to load images or frames into a third party site and so on. For more details see Firefox bug 1617609.

network.cookie.sameSite.laxByDefault

Set to true to enable.

Access-Control-Allow-Headers wildcard does not cover Authorization

The Access-Control-Allow-Headers is a response header to a CORS preflight request, that indicates which request headers may be included in the final request. The response directive can contain a wildcard (*), which indicates that the final request may include all headers except the Authorization header.

By default, Firefox includes the Authorization header in the final request after receiving a response with Access-Control-Allow-Headers: *. Set the preference to false to ensure Firefox does not include the Authorization header. For more details see Firefox bug 1687364.

network.cors_preflight.authorization_covered_by_wildcard

Set to true to enable.

Developer tools

Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.

No experimental features in this release cycle.

See also

• Firefox developer release notes
• Firefox Nightly
• Firefox Developer Edition