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.
 After a feature is enabled by default in a release build, it is no longer considered 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 `[Firefox bug <number>](https://bugzil.la/<number>)`.

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.)

| 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 (Firefox 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` |

### Declarative shadow DOM

The `<template>` element now supports a `shadowrootmode` attribute which can be set to either `open` or `closed`, the same values as the `mode` option of the `attachShadow()` method. It allows the creation of a shadow DOM subtree declaratively. (See Firefox bug 1712140 for more details.)

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 122 | Yes |
| Developer Edition | 122 | No |
| Beta | 122 | No |
| Release | 122 | No |
| Preference name | `dom.webcomponents.shadowdom.declarative.enabled` |

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 hexbox when they are not expected. (See Firefox 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` |

### 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.)

| 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` |

### content-visibility: auto value

 The `content-visibility` CSS property value `auto` allows content to skip rendering if it is not relevant to the user.
 (See Firefox bug 1798485 for more details.)


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 113 | Yes |
| Developer Edition | 109 | No |
| Beta | 109 | No |
| Release | 109 | No |
| Preference name | `layout.css.content-visibility.enabled` |

Note:

* The related `contentvisibilityautostatechange` event and associated `ContentVisibilityAutoStateChangeEvent` interface were added in version 110, and are gated by the same preference.
 These can be used by application code to monitor visibility changes and stop processes related to rendering the element when the user agent is skipping its contents.
 (See Firefox bug 1791759 for more details.)
* The `Element.checkVisibility()` `options` object parameter now takes the property `contentVisibilityAuto`, which can be set `true` to test if the element has `content-visibility: auto` set and is currently skipping rendering its content (the `options` object also takes new values `opacityProperty` and `visibilityProperty` but these are not related to `content-visibility`).
 (See Firefox bug 1859852 for more details).
### 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 Firefox 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` |

### backdrop-filter property

The `backdrop-filter` property applies filter effects to the area behind an element. (See Firefox 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` |

### Masonry grid 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 Firefox 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` |

### 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.)

| 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` |

### Scroll-driven animations

 Earlier 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, and Firefox bug 1737918.

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 110 | No |
| Developer Edition | 110 | No |
| Beta | 110 | No |
| Release | 110 | No |
| Preference name | `layout.css.scroll-driven-animations.enabled` |

### @font-face src feature checking

 The `@font-face` `src` descriptor now supports the `tech()` function, allowing fallback of whether a font resource is downloaded based on whether the user-agent supports a particular font feature or technology.
 See Firefox bug 1715546 for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 105 | Yes |
| Developer Edition | 105 | No |
| Beta | 105 | No |
| Release | 105 | No |
| Preference name | `layout.css.font-tech.enabled` |

### font-variant-emoji

 The CSS `font-variant-emoji` property allows you to set a default presentation style for displaying emojis.
 See (Firefox bug 1461589) for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 108 | Yes |
| Developer Edition | 108 | No |
| Beta | 108 | No |
| Release | 108 | No |
| Preference name | `layout.css.font-variant-emoji.enabled` |

### page-orientation

 The **`page-orientation`** CSS descriptor for the `@page` at-rule controls the rotation of a printed page. It handles the flow of content across pages when the orientation of a page is changed. This behavior differs from the `size` descriptor in that a user can define the direction in which to rotate the page.
 See (Firefox bug 1673987) for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 111 | Yes |
| Developer Edition | 111 | No |
| Beta | 111 | No |
| Release | 111 | No |
| Preference name | `layout.css.page-orientation.enabled` |

### 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.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 113 | No |
| Developer Edition | 113 | No |
| Beta | 113 | No |
| Release | 113 | No |
| Preference name | `layout.css.prefers-reduced-transparency.enabled` |

### 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.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 114 | No |
| Developer Edition | 114 | No |
| Beta | 114 | No |
| Release | 114 | No |
| Preference name | `layout.css.inverted-colors.enabled` |

### 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.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 114 | No |
| Developer Edition | 114 | No |
| Beta | 114 | No |
| Release | 114 | No |
| Preference name | `layout.css.scroll-driven-animations.enabled` |

### 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.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 114 | No |
| Developer Edition | 114 | No |
| Beta | 114 | No |
| Release | 114 | No |
| Preference name | `layout.css.scroll-driven-animations.enabled` |

### zoom property

 The non-standard CSS `zoom` property is enabled in the Nightly release and lets you magnify an element similar to the `transform` property, but it affects the layout size of the element.
 See (Firefox bug 1855763 and Firefox bug 390936) for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 120 | Yes |
| Developer Edition | 120 | No |
| Beta | 120 | No |
| Release | 120 | No |
| Preference name | `layout.css.zoom.enabled` |

 To ensure compatibility with these changes, the Vendor-prefixed transform properties and the Vendor-prefixed transition properties are disabled in the Nightly release.
 These changes are described in the following sections.

### text-wrap: balance & stable values

 The `text-wrap` CSS property values `balance` and `stable` allow the layout of short content to be wrapped in a balanced manner and for editable content to not reflow while the user is editing it, respectively.
 (See Firefox bug 1731541 for more details.)


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 120 | Yes |
| Developer Edition | 120 | No |
| Beta | 120 | No |
| Release | 120 | No |
| Preference name | `layout.css.text-wrap-balance.enabled, layout.css.text-wrap-balance.limit, layout.css.text-wrap-balance-after-clamp.enabled` |

#### Vendor-prefixed transform properties

 The `-moz-` prefixed CSS transform properties have been disabled in the Nightly release via the `layout.css.prefixes.transforms` preference being set to `false` (Firefox bug 1855763).
 Specifically, the disabled properties are:

* `-moz-backface-visibility`
* `-moz-perspective`
* `-moz-perspective-origin`
* `-moz-transform`
* `-moz-transform-origin`
* `-moz-transform-style`

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 120 | No |
| Developer Edition | 120 | Yes |
| Beta | 120 | Yes |
| Release | 120 | Yes |
| Preference name | `layout.css.prefixes.transforms` |

#### Vendor-prefixed transition properties

 The `-moz-` prefixed CSS transitions properties have been disabled in the Nightly release via the `layout.css.prefixes.transitions` preference being set to `false` (Firefox bug 1855763).
 Specifically, the disabled properties are:

* `-moz-transition`
* `-moz-transition-delay`
* `-moz-transition-duration`
* `-moz-transition-property`
* `-moz-transition-timing-function`

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 120 | No |
| Developer Edition | 120 | Yes |
| Beta | 120 | Yes |
| Release | 120 | Yes |
| Preference name | `layout.css.prefixes.transitions` |

SVG
---

### SVGPathSeg APIs

 The SVGPathSeg APIs are being unshipped, and have been placed behind a preference.
 This includes: `SVGPathSegList`, SVGPathElement.getPathSegAtLength(), `SVGAnimatedPathData`.
 (See Firefox 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
----------

### Intl.Segmenter

 The `Intl.Segmenter` is supported in nightly builds, allowing developers to perform locale-sensitive text segmentation.
 This enables splitting a string into meaningful items (graphemes, words or sentences) in different locales.
 (See Firefox bug 1423593 for more details.)


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 122 | Yes |
| Developer Edition | NA | No |
| Beta | NA | No |
| Release | NA | No |
| Preference name | None |

APIs
----

### Graphics: Canvas, WebGL, and WebGPU

#### 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 to 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

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. See Firefox bug 1602129 for our progress on this API.

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 113 | Yes |
| Developer Edition | 73 | No |
| Beta | 73 | No |
| Release | 73 | No |
| Preference name | `dom.webgpu.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 Firefox bug 1280613 and Firefox 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` |

#### 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).

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 90 | No |
| Developer Edition | — | — |
| Beta | — | — |
| Release | — | — |
| Preference name | `image.jxl.enabled` |

#### OpenFont COLRv1 fonts

 This feature provides support for the OpenFont COLRv1 font specification.
 This enables compression-friendly color vector fonts with gradients, compositing and blending to be loaded using the CSS `@font-face` rule, or the CSS Font Loading API.
 See Firefox bug 1740530 for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 105 | No |
| Developer Edition | 105 | No |
| Beta | 105 | No |
| Release | 105 | No |
| Preference name | `gfx.font_rendering.colr_v1.enabled` |

#### CSS Properties and Values API

 The CSS Properties and Values API allows developers to register custom CSS properties through JavaScript via `registerProperty()` or in CSS using the `@property` at-rule.
 Registering properties using these two methods allows for type checking, default values, and properties that do or do not inherit values from their parent elements.
 See Firefox bug 1840480 for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 116 | Yes |
| Developer Edition | 116 | No |
| Beta | 116 | No |
| Release | 116 | No |
| Preference name | `layout.css.property-and-value-api.enabled` |

#### CSS Custom Highlight API

 The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges in a document (generalizing the behavior of other highlight pseudo-elements such as `::selection`, `::spelling-error`, `::grammar-error`, and `::target-text`).
 The ranges are defined in JavaScript using `Range` instances grouped in a `Highlight`, and then registered with a name using `HighlightRegistry`.
 The CSS `::highlight` pseudo-element is used to apply styles to a registered highlight.
 See Firefox bug 1703961 for more details.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 117 | Yes |
| Developer Edition | 117 | No |
| Beta | 117 | No |
| Release | 117 | No |
| Preference name | `dom.customHighlightAPI.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 Firefox 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

#### Popover API

Firefox now supports the Popover API.

The following Web APIs are now implemented:

* `HTMLButtonElement.popoverTargetElement` and `HTMLButtonElement.popoverTargetAction`.
* `HTMLInputElement.popoverTargetElement` and `HTMLInputElement.popoverTargetAction`.
* `HTMLElement.popover`, `HTMLElement.hidePopover()`, `HTMLElement.showPopover()`, and `HTMLElement.togglePopover()`.
* `HTMLElement` `beforetoggle` event, `HTMLElement` `toggle_event` event, and `ToggleEvent`.

CSS updates include:

* `:popover-open`
* `::backdrop` has been extended to support popovers

The following HTML global attributes are supported:

* `popovertarget`
* `popovertargetaction`

See Firefox bug 1823757 for more details.

| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 122 | Yes |
| Developer Edition | 114 | No |
| Beta | 114 | No |
| Release | 114 | No |
| Preference name | `dom.element.popover.enabled` |

#### 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 Firefox 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 Firefox 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. It is available in nightly or early beta builds.
 (See Firefox bug 1809106 for more details.)


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 122 | Yes |
| Developer Edition | 87 | No |
| Beta | 122 | Yes |
| Release | 87 | No |
| Preference name | `dom.events.asyncClipboard.clipboardItem` |

#### Clipboard read and write

 The Clipboard.read(), Clipboard.readText(), and Clipboard.write() methods of the `Clipboard` interface are now available in nightly and early beta builds
 (See Firefox bug 1809106 for more details.)


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 122 | Yes |
| Developer Edition | 90 | No |
| Beta | Yes | No |
| Release | 90 | No |
| Preference name | `dom.events.asyncClipboard.readText` and `dom.events.asyncClipboard.clipboardItem` |

#### 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 Firefox 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` |

#### 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.)

| 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` |

#### 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.)

| 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` |

#### Custom element state pseudo-class

 Custom elements can expose their internal state via the `states` property as a `CustomStateSet`. A CSS custom state pseudo-class such as `:--somestate` can match that element's state.
 (See Firefox bug 1861466 for more details.)


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 121 | No |
| Developer Edition | 121 | No |
| Beta | 121 | No |
| Release | 121 | No |
| Preference name | `dom.element.customstateset.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 Firefox 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` and`dom.payments.request.supportedRegions` |

### 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 Firefox bug 1697647 for more details.


| Release channel | Version changed | Enabled by default? |
| --- | --- | --- |
| Nightly | 111 | Yes |
| Developer Edition | 97 | No |
| Beta | 97 | No |
| Release | 97 | No |
| Preference name | `dom.screenorientation.allow-lock` |

### Screen Wake Lock API

 The Screen Wake Lock API allows a web application to request that the screen not be dimmed or locked while it is active.
 This is useful for navigation and reading applications, and any application where the screen doesn't get regular tactile input while the application is in use (the default way to keep a screen awake).
 The API is accessed through `Navigator.wakeLock` in secure contexts, which returns a `WakeLock`.
 This can be used to request a `WakeLockSentinel` that can be used to monitor the status of the wake lock, and release it manually.
 See Firefox bug 1589554 for more details.


| Release channel | Version changed | Enabled by default? |
| --- | --- | --- |
| Nightly | 122 | Yes |
| Developer Edition | 122 | No |
| Beta | 122 | No |
| Release | 122 | No |
| Preference name | `dom.screenwakelock.enabled` |

### Prioritized Task Scheduling API

The Prioritized Task Scheduling API provides a standardized way to prioritize all tasks belonging to an application, whether they defined in a website developer's code, or in third party libraries and frameworks.

 This is enabled on Firefox Nightly (only) from Firefox 101.
 No preference is provided to allow it to be enabled in other releases.

### Notifications API

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

| Release channel | Version changed | Enabled by default? |
| --- | --- | --- |
| Nightly | 117 | Yes |
| Developer Edition | 117 | No |
| Beta | 117 | No |
| Release | 117 | Windows only |
| Preference name | `dom.webnotifications.requireinteraction.enabled` |

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 Firefox 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 Firefox 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 Firefox 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` |

### 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.

| 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 (Firefox 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` |

HTTP
----

### 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.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 69 | No |
| Developer Edition | 69 | No |
| Beta | 69 | No |
| Release | 69 | No |
| Preference name | `network.cookie.sameSite.laxByDefault` |

### HTTP Status 103

 The `103 Early Hints` HTTP information response status code may be sent by a server to allow a user agent to start preloading resources while the server is still preparing the full response.
 Note that using the header to preconnect to sites is already supported.
 For more details see Firefox bug 1813035.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 111 | Yes |
| Developer Edition | 111 | Yes |
| Beta | 111 | Yes |
| Release | 102 | No |
| Preference name | `network.early-hints.enabled` |

### 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.


| Release channel | Version added | Enabled by default? |
| --- | --- | --- |
| Nightly | 115 | Yes |
| Developer Edition | 115 | Yes |
| Beta | 115 | Yes |
| Release | 115 | Yes |
| Preference name | `network.cors_preflight.authorization_covered_by_wildcard` |

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 Firefox bug 1605154 and Firefox 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 Firefox bug 1621781, Firefox bug 1245183, and Firefox 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 Firefox 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 Firefox bug 1245183 and Firefox 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` |

See also
--------

* Firefox developer release notes
* Firefox Nightly
* Firefox Developer Edition