Experimental features in Firefox

This page lists Firefox's experimental and partially-implemented features, including evolving or proposed web platform standards. Each entry below includes information about the builds in which a feature is included (Nightly, Beta, Developer Edition, or Release), whether it is activated by default or not, and the name of the preference you can use to activate or configure the feature. The description of each feature also includes links to relevant Bugzilla bugs that implement or enable the feature. This information allows you to try out experimental features and provide feedback before they are officially released.

In terms of lifecycle, new features usually appear first in Nightly, where they are often enabled by default for early feedback and testing. If no major problems are found, they are included in Beta and Developer Edition pre-release builds. Finally, approved features ship in the stable Release channel. When a feature is enabled by default in a release, it is no longer considered experimental and is removed from this page.

To enable these features, enter about:config in the Firefox address bar, search for the associated preference and change its value, which is usually a toggle between true and false. Depending on the feature, you might need to restart the browser for the change to take effect. Check the Firefox Configuration Editor support article for more information about managing preferences 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 in datetime-local and time input elements

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

• dom.forms.datetime.timepicker
  • : Set to true to enable.

alpha and colorspace attributes in color input elements

The HTML <input type="color"> element supports alpha & colorspace attributes. (Firefox bug 1919718).

• dom.forms.html_color_picker.enabled
  • : 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 {{cssxref("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 {{cssxref("fit-content()")}} function as it applies to {{cssxref("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 {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties (and the {{cssxref('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 {{cssxref('animation-timeline')}} property to the name value defined using scroll-timeline-name.

When using the {{cssxref('scroll-timeline')}} shorthand property, the order of the property values must be {{cssxref('scroll-timeline-name')}} followed by {{cssxref('scroll-timeline-axis')}}. The longhand and shorthand properties are both available behind the preference. You can alternatively use the {{cssxref("animation-timeline/scroll")}} functional notation with {{cssxref('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 {{cssxref('timeline-scope')}}, {{cssxref('animation-range-start')}} and {{cssxref('animation-range-end')}} properties (and the {{cssxref('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.

prefers-reduced-transparency media feature

The CSS {{cssxref("@media/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 {{cssxref("@media/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 {{cssxref("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 {{cssxref("animation-timeline/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.

Relative control points in CSS shape() curve commands

You can use <relative-control-point> values when specifying a <curve-command> or <smooth-command> in a CSS shape() function. These values let you specify control points that are positioned relative to the start or end point of the current command, or relative to the origin (top-left) of the container the shape is being drawn inside. (Firefox bug 1921501).

• layout.css.basic-shape-shape.enabled
  • : Set to true to enable.

Symmetrical letter-spacing

The CSS {{cssxref("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 {{cssxref("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.

Allow pseudo-elements after element-backed pseudo-elements

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

This will allow users to, for example, style the first letter of the {{htmlElement("details")}} element by using the CSS selector ::details-content::first-letter or add content before an {{HTMLElement("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).

:heading and :heading() pseudo-classes

The {{cssxref(":heading")}} pseudo-class allows you to style all heading elements (<h1>-<h6>) at once, rather than targeting them individually. The {{cssxref(":heading()")}} functional pseudo-class allows you to style heading elements that match a comma-separated list of integers that match the heading levels. (Firefox bug 1974386 & Firefox bug 1984310).

• layout.css.heading-selector.enabled
  • : Set to true to enable.

text-decoration-trim

The CSS text-decoration-trim property allows you to specify {{cssxref("text-decoration")}} start and end offsets to shorten, lengthen, or shift the position of text decorations with respect to the text (Firefox bug 1979915).

• layout.css.text-decoration-trim.enabled
  • : Set to true to enable.

@custom-media at-rule

The {{cssxref("@custom-media")}} CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded <media-query-list> in multiple @media at-rules, it can be defined once in a @custom-media at-rule and referenced throughout the stylesheet whenever needed. (Firefox bug 1744292).

• layout.css.custom-media.enabled
  • : Set to true to enable.

<attr-type> values in attr() CSS function

The {{cssxref("attr")}} CSS function now supports <attr-type> values. This allows you to specify how an attribute value is parsed into a CSS value and take those values directly from data-*. (Firefox bug 1986631, Firefox bug 1998245)

• layout.css.attr.enabled
  • : Set to true to enable.

color-mix() accepts multiple color arguments

The color-mix() CSS function now supports multiple <color> values, rather than just two. This allows you to mix many colors and set the percentages of each. (Firefox bug 2007772).

• layout.css.color-mix-multi-color.enabled
  • : Set to true to enable.

Media-based pseudo-classes

The media-based pseudo-classes {{cssxref(":buffering")}}, {{cssxref(":muted")}}, {{cssxref(":paused")}}, {{cssxref(":playing")}}, {{cssxref(":seeking")}}, {{cssxref(":stalled")}}, and {{cssxref(":volume-locked")}} allow you to style {{htmlelement("audio")}} and {{htmlelement("video")}} elements based on their current state, such as playing or paused. (Firefox bug 1707584, Firefox bug 2014512).

• dom.media.pseudo-classes.enabled
  • : Set to true to enable.

@container style() queries

The @container CSS at-rule supports style() queries. This allows you to check if a container has a valid CSS declaration, a CSS property, or a custom property, and apply styles to its children accordingly. (Firefox bug 2014404).

• layout.css.style-queries.enabled
  • : Set to true to enable.

SVG

No experimental features in this release cycle.

JavaScript

No experimental features in this release cycle.

APIs

Notification actions and maxActions properties

The {{domxref("Notification/actions","actions")}} read-only property and the maxActions static read-only property of the {{domxref("Notification")}} interface are supported in Nightly on desktop. These contain the notification actions set with {{domxref("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. From version 147 this is enabled in on macOS on Apple Silicon in all browsing contexts except service workers. For other platforms such as Linux and macOS on Intel Silicon 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.

{{domxref('Report')}} instances returned by the {{domxref('ReportingObserver')}} interface can now have a type value of "csp-violation" and a body property that contains an instance of the {{domxref('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 {{CSP("report-to")}} directive — endpoints names and corresponding URLs must first be defined in the {{httpheader('Reporting-Endpoints')}} or {{httpheader('Report-To')}} HTTP response headers. The report is a serialization of the {{domxref('Report')}} object described above, with a body property that is a serialization of a {{domxref('CSPViolationReportBody')}} instance.

This violation report replaces a similar CSP-specific mechanism for sending violation reports, which uses the CSP {{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 media APIs such as the WebRTC API, the Web Audio API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

HTMLMediaElement properties: audioTracks and videoTracks

Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("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.

Asynchronous SourceBuffer add and remove

This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("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.

Document Picture-in-Picture API

The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content such as a video with custom controls or a set of streams showing the participants of a video conference call. See Firefox bug 1858562 for more details.

• dom.documentpip.enabled
  • : Set to true to enable.

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.

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

The GeometryUtils methods convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode() map the given point, rectangle, or quadruple from the {{domxref("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 {{domxref("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.

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 {{Glossary("HTTP")}} rather than {{Glossary("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.

Restricting adult content with <meta name="rating">

The non-standard <meta name="rating"> element can be included on a webpage to denote the page's content as restricted/adult. At the time of writing, there are two possible content values, adult (defined by Google) and RTA-5042-1996-1400-1577-RTA (defined by ASACP), which have the same effect (more options may be added in future).

The following <meta> elements are equivalent:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

Browsers that recognize this element can then take steps to restrict users from viewing the content. Firefox's implementation replaces the page with the content found at about:restricted, which explains to the user that they are trying to view restricted content, explains why they cannot view it, and gives them a back button to return from whence they came.

See Firefox bug 1991135 for more details.

• security.restrict_to_adults.always
  • : Set to true to restrict access to webpages that self-identify as adult by including a <meta name="rating"> element.
• security.restrict_to_adults.respect_platform
  • : Set to true to restrict access to webpages that self-identify as adult by including a <meta name="rating"> element only when appropriate parental controls are set on the underlying operating system (for example, the macOS Content & Privacy settings are set to restrict explicit web content).

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 {{httpheader("Integrity-Policy")}} and {{httpheader("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 {{HTMLElement("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.

Storage Access headers

The {{httpheader("Sec-Fetch-Storage-Access")}} and {{httpheader("Activate-Storage-Access")}} HTTP headers are now supported, enabling a more efficient Storage Access API workflow. (Firefox bug 1991688).

In the JavaScript-only workflow, a third-party resource must be requested and loaded to activate a storage-access permission for a particular context (such as a new browser tab). This is required even if the permission has already been granted. The storage access headers allow the browser to advertise the permission state for the particular context, so the server can request activation of an already-granted permission. This avoids the overhead of unnecessarily fetching and loading the resource.

• dom.storage_access.headers.enabled
  • : Set to true to enable.

Idempotency-Key

The {{httpheader("Idempotency-Key")}} HTTP request header can be used by website client code to make a {{HTTPMethod("POST")}} or {{HTTPMethod("PATCH")}} requests {{glossary("idempotent")}} when used with a server that supports it. The specification indicates that the server should document and advertise which endpoints require this header, the format of the key, and expected error responses.

Firefox automatically adds the header with a unique key for each new POST request if it has not already been added by the page client-side code. This simplifies the client-side code required to work with servers that support the feature.

(Firefox bug 1830022).

• network.http.idempotencyKey.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