Experimental features in Firefox

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

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

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

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

The from keyword is now parsed as valid CSS syntax when the layout.css.relative-color-syntax.enabled preference is set to true. Although this keyword currently has no effect, it will not produce syntax errors when used in valid places in CSS color functions, thereby supporting the ongoing work on relative colors. See Firefox bug 1889133 for more details.

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

The backdrop-filter property applies filter effects to the area behind an element. (See Firefox bug 1178765 for more details.)

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

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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

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

The <h1> heading doesn't decrease in font size now when nested within sectioning elements <article>, <aside>, <nav>, and <section>. The UA styles for <h1> nested within sectioning elements are no longer relevant since the outline algorithm has been removed from the HTML specification. (Firefox bug 1883896).

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.

The CSS @starting-style at-rule allows you to set the starting styles of an element for a CSS transition, when the element has no default initial style. This is particularly useful for elements that are hidden from view on the first paint such as popover or 'dialog'. Does not yet support animating from display: none. For more details, see Firefox bug 1834876 and Firefox bug 1834877.

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.

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.

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

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

Promise.try() is a convenience method that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a Promise so that promise semantics (e.g. .then(), .catch()) can be used to handle it (Firefox bug 1905364).

The JSON.parse source text access proposal extends JSON.parse behavior to provide features to mitigate issues around loss of precision when converting values such as large floats and date values between JavaScript values and JSON text. (Firefox bug 1913085, Firefox bug 1925334).

The Cookie Store API is a modern, Promise-based method of managing cookies that does not block the event loop and does not rely on Document (it can therefore be made available to service workers). A subset of the Cookie Store API has been implemented (Firefox bug 1800882). This includes:

• The CookieStore interface, but partitioned is not included in return values.
• The CookieChangeEvent interface, excluding partitioned properties.
• The Window.cookieStore property.
• The ServiceWorkerGlobalScope.cookieStore property.

The global fetch() method has a keepalive initialization option. When keepalive is set to true, the browser will not abort the associated request if the page that initiated it is unloaded before the request is complete.

This enables a fetch request to function as an alternative to Navigator.sendBeacon() when sending analytics at the end of a session, which has some advantages (you can use HTTP methods other than POST, customize request properties, and access the server response via the fetch Promise fulfillment). It is also available in service workers.

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

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.

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.

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

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.

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.

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

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.

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.

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.

WebVR API (Disabled)

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

Selections crossing shadow DOM boundary

The Selection.getComposedRanges() method can be used to get an array of StaticRange objects representing the current selected range or ranges. Unlike Selection.getRangeAt(), this method can return ranges with anchor or focus nodes inside a shadow DOM, but only if it is passed the ShadowRoot objects that contain those nodes. Otherwise, it will return a range that has been re-scoped to include the host node of the shadow root that contains the node. The Selection methods setBaseAndExtent(), collapse(), and extend() have also been modified to accept nodes inside a shadow root.

User selection via mouse, keyboard, and so on, can start and end anywhere in the document, including inside any open or closed shadow trees. (Firefox bug 1867058).

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.

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.

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

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

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

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

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.

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 have the requireInteraction property set to true by default on Windows systems and in the Nightly release (Firefox bug 1794475).

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_SUBREQUESTs as active content. See Firefox bug 1190623 for more details.

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.

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.

The Permissions API permissions microphone and camera are supported, allowing a web page to query whether access to the corresponding hardware has been granted, denied, or still requires user approval (Firefox bug 1609427, Firefox bug 1915222).

The Clear-Site-Data HTTP response header cache directive clears the browser cache for the requesting website.

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 explainer. This experiment can be enabled for websites via origin trial or in the browser by setting the preference to 1. (Firefox bug 1900929).

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.

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.

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.

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.

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

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

[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.

The Network Monitor displays information for server-sent events. (See Firefox bug 1405706 for more details.)

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.

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

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