Experimental features in Firefox
This page lists Firefox's experimental and partially implemented features, including those for proposed or cutting-edge web platform standards, along with information on the builds in which they are present, whether or not they are activated "by default", and which preference can be used to activate or deactivate them. This allows you to test the features before they are released.
New features appear first in the Firefox Nightly build, where they are often enabled by default. They later propagate though to Firefox Developer Edition and eventually to the release build. Once a feature is enabled by default in a release build it is no longer experimental, and should be removed from the topic.
Experimental features can be enabled or disabled using the Firefox Configuration Editor (enter about:config
in the Firefox address bar) by modifying the associated preference listed below.
Note: For editors - when adding features to these tables, please try to include a link to the relevant bug or bugs using the bug
macro: {{bug(bug-number)}}
.
HTML
inert attribute
The HTMLElement
property HTMLElement.inert
is a Boolean
, when present, may make the browser "ignore" the element from assistive technologies, page search and text selection. For more details on the status of this feature see bug 1655722.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 81 | No |
Developer Edition | 81 | No |
Beta | 81 | No |
Release | 81 | No |
Preference name | html5.inert.enabled |
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 bug 558594 for more details)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 81 | No |
Developer Edition | 81 | No |
Beta | 81 | No |
Release | 81 | No |
Preference name | layout.forms.input-type-search.enabled |
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 (bug 502258).
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 96 | No |
Developer Edition | 96 | No |
Beta | 96 | No |
Release | 96 | No |
Preference name | layout.forms.input-type-show-password-button.enabled |
CSS
Display stray control characters in CSS as hex boxes
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 hexbox when they are not expected. (See bug 1099557 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 43 | Yes |
Developer Edition | 43 | No |
Beta | 43 | No |
Release | 43 | No |
Preference name |
layout.css.control-characters.enabled or
layout.css.control-characters.visible
|
Property: initial-letter
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 bug 1223880 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 50 | No |
Developer Edition | 50 | No |
Beta | 50 | No |
Release | 50 | No |
Preference name | layout.css.initial-letter.enabled |
Single numbers as aspect ratio in media queries
Support for using a single <number>
as a <ratio>
when specifying the aspect ratio for a media query. (See bug 1565562 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 70 | No |
Developer Edition | 70 | No |
Beta | 70 | No |
Release | 70 | No |
Preference name | layout.css.aspect-ratio-number.enabled |
Property: backdrop-filter
The backdrop-filter
property applies filter effects to the area behind an element. (See bug 1178765 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 70 | No |
Developer Edition | 70 | No |
Beta | 70 | No |
Release | 70 | No |
Preference name | layout.css.backdrop-filter.enabled |
The fit-content() function for width and other sizing properties
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 bug 1312588 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 91 | No |
Developer Edition | 91 | No |
Beta | 91 | No |
Release | 91 | No |
Preference name | layout.css.fit-content-function.enabled |
Grid: Masonry layout
Adds support for a masonry-style layout based on grid layout where one axis has a masonry layout and the other has a normal grid layout. This allows developers to easily create gallery style layouts like on Pinterest. See bug 1607954 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 77 | Yes |
Developer Edition | 77 | No |
Beta | 77 | No |
Release | 77 | No |
Preference name | layout.css.grid-template-masonry-value.enabled |
Media feature: prefers-contrast
The prefers-contrast
media feature is used to detect whether the user has specified a preference for higher (or lower) contrast in the presentation of web content. Refer to bug 1506364 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 80 | No |
Developer Edition | 80 | No |
Beta | 80 | No |
Release | 80 | No |
Preference name |
|
Property: math-style
The math-style
property indicates whether MathML equations should render with normal or compact height. (See bug 1665975 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 83 | No |
Developer Edition | 83 | No |
Beta | 83 | No |
Release | 83 | No |
Preference name | layout.css.math-style.enabled |
Scroll-linked animations
The @scroll-timeline
at-rule and animation-timeline
property allow you to define animations that are linked to container scroll progress (rather than time).
Once specified, a scroll timeline is associated with a CSS Animation by using the animation-timeline
property.
For more information see bug 1676791 and bug 1676782
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 97 | No |
Developer Edition | 97 | No |
Beta | 97 | No |
Release | 97 | No |
Preference name | layout.css.scroll-linked-animations.enabled |
SVG
SVGPathSeg APIs
The SVGPathSeg APIs are being unshipped, and have been placed behind a preference.
This includes: SVGPathSegList
, SVGPathElement.getPathSegAtLength(), SVGAnimatedPathData
.
(See bug 1388931 for more details.)
Release channel | Version removed | Enabled by default? |
---|---|---|
Nightly | 97 | No |
Developer Edition | 97 | No |
Beta | 97 | No |
Release | 97 | No |
Preference name | dom.svg.pathSeg.enabled |
JavaScript
Array grouping methods
The Array.prototype.groupBy()
and Array.prototype.groupByToMap()
methods are used to group the elements of an array using a string or value, respectively, returned by a test function.
The groupBy
method should be used when strings can be used to represent element groups, while groupByToMap()
should be used in cases where it makes sense to use a value as the key.
(See bug 1739648 for more details.)
Release channel | Version removed | Enabled by default? |
---|---|---|
Nightly | 98 | Yes |
Developer Edition | 98 | No |
Beta | 98 | No |
Release | 98 | No |
Preference name | None |
APIs
Graphics: Canvas, WebGL, and WebGPU
Interface: OffscreenCanvas
The OffscreenCanvas
interface provides a canvas that can be rendered offscreen. It is available in both the window and worker contexts. (See bug 1390089 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 44 | No |
Developer Edition | 44 | No |
Beta | 44 | No |
Release | 44 | No |
Preference name | gfx.offscreencanvas.enabled |
Hit regions
Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 30 | No |
Developer Edition | 30 | No |
Beta | 30 | No |
Release | 30 | No |
Preference name | canvas.hitregions.enabled |
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
This new API provides low-level support for performing computation and graphics rendering using the Graphics Processing Unit (GPU) of the user's device or computer. The specification is still a work-in-progress. See bug 1602129 for our progress on this API.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 73 | No |
Developer Edition | 73 | No |
Beta | 73 | No |
Release | 73 | No |
Preference name | dom.webgpu.enabled |
Audio Output API
MediaDevices.selectAudioOutput()
MediaDevices.selectAudioOutput()
displays a prompt from which users can select their desired audio output. See bug 1699026.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 88 | No |
Developer Edition | 88 | No |
Beta | 88 | No |
Release | 88 | No |
Preference name | media.setsinkid.enabled |
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 bug 1280613 and bug 778617 for more information.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 62 | No |
Developer Edition | 62 | No |
Beta | 62 | No |
Release | 62 | No |
Preference name | media.mediasource.experimental.enabled |
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.
Permitted values are:
0
: Accept images with specification violations in both recommendations ("should" language) and requirements ("shall" language), provided they can be safely or unambiguously interpreted.1
(default): Reject violations of requirements, but allow violations of recommendations.2
: Strict. Reject any violations in requirements or recommendations.
Release channel | Version added | Default value |
---|---|---|
Nightly | 92 | 1 |
Developer Edition | 92 | 1 |
Beta | 92 | 1 |
Release | 92 | 1 |
Preference name | image.avif.compliance_strictness |
AV1 support for Firefox on Android
This feature allows Firefox on Android to use AV1 format media. This feature is available in nightly builds effective in Firefox for Android 81 or later. It is enabled by default.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 81 | Yes |
Developer Edition | — | — |
Beta | — | — |
Release | — | — |
Preference name | — |
JPEG XL support
With this feature enabled, Firefox supports JPEG XL images, see bug 1539075 for more details. This feature is available in nightly builds effective in Firefox 90 or later.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 90 | No |
Developer Edition | 90 | No |
Beta | 90 | No |
Release | — | — |
Preference name | image.jxl.enabled |
Service Workers
Preloading of service worker resources on navigation
The NavigationPreloadManager
interface can be used to enable preloading of resources when navigating to a page.
Preloading occurs in parallel with worker bootup, reducing the total time from start of navigation until resources are fetched.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 99 | yes |
Developer Edition | 97 | No |
Beta | 97 | No |
Release | 97 | No |
Preference name | dom.serviceWorkers.navigationPreload.enabled |
WebVR API
WebVR API (Disabled)
The deprecated WebVR API is on the path for removal. It is disabled by default on all builds bug 1750902.
Release channel | Version removed | Enabled by default? |
---|---|---|
Nightly | 98 | No |
Developer Edition | 98 | No |
Beta | 98 | No |
Release | 98 | No |
Preference name | dom.vr.enabled |
HTML DOM API
HTMLMediaElement method: setSinkId()
HTMLMediaElement.setSinkId()
allows you to set the sink ID of an audio output device on an HTMLMediaElement
, thereby changing where the audio is being output. See bug 934425 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 64 | No |
Developer Edition | 64 | No |
Beta | 64 | No |
Release | 64 | No |
Preference name | media.setsinkid.enabled |
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 bug 1057233 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 33 | No |
Developer Edition | 33 | No |
Beta | 33 | No |
Release | 33 | No |
Preference name | media.track.enabled |
ClipboardItem
The ClipboardItem
interface of the Clipboard API
is now supported and Clipboard.write()
accepts a sequence of clipboard items
instead of the previously implemented dataTransfer object
. It is available behind the pref dom.events.asyncClipboard.clipboardItem
which was previously dom.events.asyncClipboard.dataTransfer
. See bug 1619947 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 87 | No |
Developer Edition | 87 | No |
Beta | 87 | No |
Release | 87 | No |
Preference name | dom.events.asyncClipboard.clipboardItem |
ClipboardRead
The Clipboard.read() method of the Clipboard
interface is also now available under the dom.events.asyncClipboard.read
preference, when previously it was under dom.events.asyncClipboard.clipboardItem
. (See (bug 1701512) for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 90 | No |
Developer Edition | 90 | No |
Beta | 90 | No |
Release | 90 | No |
Preference name | dom.events.asyncClipboard.read |
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. Default elements within each configuration property (those to be sanitized) are still under consideration. Due to this the config parameter has not been implemented (see the constructor
) for more information. See bug 1673309 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 84 | No |
Developer Edition | 84 | No |
Beta | 84 | No |
Release | 84 | No |
Preference name | dom.security.sanitizer.enabled |
Document property: autoplayPolicy
The document
property autoplayPolicy
returns a string indicating how the browser handles requests to automatically play media (either using the autoplay
property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include allowed
(autoplay is currently permitted), allowed-muted
(autoplay is allowed but only with no—or muted—audio), and disallowed
(autoplay is not allowed at this time). See bug 1506289 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 66 | No |
Developer Edition | 66 | No |
Beta | 66 | No |
Release | 66 | No |
Preference name | dom.media.autoplay.autoplay-policy-api |
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 bug 918189 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 31 | Yes |
Developer Edition | 31 | No |
Beta | 31 | No |
Release | 31 | No |
Preference name | layout.css.getBoxQuads.enabled |
GeometryUtils method: getBoxQuads()
The GeometryUtils
method getBoxQuads()
returns the CSS boxes for a Node
relative to any other node or viewport. (See bug 917755 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 31 | Yes |
Developer Edition | 31 | No |
Beta | 31 | No |
Release | 31 | No |
Preference name | layout.css.convertFromNode.enable |
ElementInternals: Form associated custom element methods and properties
New ElementInternals
properties and methods that allow a custom elements to interact with a form:
- property:
form
gets the form associated with the element - property:
labels
gets the list of labels associated with the element - property:
willValidate
checks if a custom form element will be validated. - method:
setFormValue()
set the sanitized value and user-entered data, if needed.
See these bugs for details: bug 1556362, bug 1556373, bug 1556365, bug 1556449.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 95 | Yes |
Developer Edition | 95 | No |
Beta | 95 | No |
Release | 95 | No |
Preference name | dom.webcomponents.formAssociatedCustomElement.enabled |
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 bug 1318984 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 55 | No |
Developer Edition | 55 | No |
Beta | 55 | No |
Release | 55 | No |
Preference name | dom.payments.request.enabled anddom.payments.request.supportedRegions |
Constructable stylesheets
The addition of a constructor to the CSSStyleSheet
interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with Shadow DOM. Our implementation is not yet complete; see bug 1520690 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 73 | No |
Developer Edition | 73 | No |
Beta | 73 | No |
Release | 73 | No |
Preference name | layout.css.constructable-stylesheets.enabled |
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).
Release channel | Version changed | Enabled by default? |
---|---|---|
Nightly | 71 | No (default). Yes (Windows from version 92) |
Developer Edition | 71 | No |
Beta | 71 | No |
Release | 71 | No (Desktop). Yes (Android). |
Preference name | dom.webshare.enabled |
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 bug 1697647 for more details.
Note that since locking the screen orientation isn't typically supported on desktop systems, you will need to use Firefox for Android Nightly build and enable the preference in about:config
.
Release channel | Version changed | Enabled by default? |
---|---|---|
Nightly | 97 | No |
Developer Edition | 97 | No |
Beta | 97 | No |
Release | 97 | No. |
Preference name | dom.screenorientation.allow-lock |
Security and privacy
Block plain text requests from Flash on encrypted pages
In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat OBJECT_SUBREQUEST
s as active content. See bug 1190623 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 59 | No |
Developer Edition | 59 | No |
Beta | 59 | No |
Release | 59 | No |
Preference name | security.mixed_content.block_object_subrequest |
Insecure page labeling
These two 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). See bug 1335970 for more details.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 60 | No |
Developer Edition | 60 | No |
Beta | 60 | No |
Release | 60 | No |
Preference name |
security.insecure_connection_text.enabled for normal
browsing mode;
security.insecure_connection_text.pbmode.enabled for
private browsing mode
|
Upgrading mixed display content
When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. (See bug 1435733 for more details.)
This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 84 | Yes |
Developer Edition | 60 | No |
Beta | 60 | No |
Release | 60 | No |
Preference name | security.mixed_content.upgrade_display_content |
Feature policy
Feature 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.
Note: The Feature-Policy
header has now been renamed to Permissions-Policy
in the spec, and this article will eventually be updated to reflect that change.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 65 | No |
Developer Edition | 65 | No |
Beta | 65 | No |
Release | 65 | No |
Preference name | dom.security.featurePolicy.header.enabled |
Clear-Site-Data "cache" directive
The Clear-Site-Data
HTTP response header cache
directive clears the browser cache for the requesting website.
Note: This was originally enabled by default, but put behind a preference in version 94 (bug 1729291).
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 63 | No |
Developer Edition | 63 | No |
Beta | 63 | No |
Release | 63 | No |
Preference name | privacy.clearsitedata.cache.enabled |
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.
Execution context selector
This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. (See bug 1605154 and bug 1605153 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 75 | No |
Developer Edition | 75 | No |
Beta | 75 | No |
Release | 75 | No |
Preference name | devtools.webconsole.input.context |
Mobile gesture support in Responsive Design Mode
Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. (See bug 1621781, bug 1245183, and bug 1401304 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 76[1] | Yes |
Developer Edition | 76[1] | Yes |
Beta | 76[1] | Yes |
Release | 76[1] | No |
Preference name | n/a |
[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.
Server-sent events in Network Monitor
The Network Monitor displays information for server-sent events. (See bug 1405706 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 80 | Yes |
Developer Edition | 80 | Yes |
Beta | 80 | No |
Release | 80 | No |
Preference name | devtools.netmonitor.features.serverSentEvents |
CSS browser compatibility tooltips
The CSS Rules View can display browser compatibility tooltips next to any CSS properties that have known issues. For more information see: Examine and edit HTML > Browser Compat Warnings.
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 81 | No |
Developer Edition | 81 | No |
Beta | 81 | No |
Release | 81 | No |
Preference name | devtools.inspector.ruleview.inline-compatibility-warning.enabled |
UI
Desktop zooming
This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. (See bug 1245183 and bug 1620055 for more details.)
Release channel | Version added | Enabled by default? |
---|---|---|
Nightly | 42 | Yes |
Developer Edition | 42 | No |
Beta | 42 | No |
Release | 42 | No |
Preference name |
apz.allow_zooming and (on Windows)
apz.windows.use_direct_manipulation
|