Revision 1128159 of Experimental features in Firefox

<p class="summary">In order to test new features, Mozilla publishes a test version of the Firefox browser, <a href="https://nightly.mozilla.org/">Firefox Nightly</a>, every day. Experimental features, for example implementations of proposed Web platform standards, are available. This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.</p>

<p>Download <a href="https://nightly.mozilla.org/">Firefox Nightly</a> or <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a>.</p>

<h2 id="CSS">CSS</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Feature</th>
   <th scope="col">Firefox Nightly</th>
   <th scope="col">Firefox Developer Edition</th>
   <th scope="col">Firefox Beta</th>
   <th scope="col">Firefox Release</th>
   <th scope="col">Preference</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><strong><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></strong></td>
   <td>40</td>
   <td>40</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1217086">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1217086">Disabled</a></td>
   <td><code>layout.css.grid.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Subgrids</strong></td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>layout.css.grid-template-subgrid-value.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Logical values for <code>clear</code> and <code>float</code> CSS properties</strong><br />
    The values {{cssxref("clear")}}<code>:</code> <code>inline-start</code> and <code>clear:</code> <code>inline-end</code> as well as {{cssxref("float")}}<code>:</code> <code>inline-start</code> and <code>float:</code> <code>inline-end</code> are making easier to create layouts that are agnostic to the text directionality.</td>
   <td>45</td>
   <td>45</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1253919">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1253919">Disabled</a></td>
   <td><code>layout.css.float-logical-values.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Display stray control characters in CSS as hex boxes</strong><br />
    This feature renders control characters (Unicode category Cc) other than <em>tab</em> (<code>U+0009</code>), <em>line feed</em> (<code>U+000A</code>), <em>form feed</em> (<code>U+000C</code>), and <em>carriage return</em> (<code>U+000D</code>) as a hexbox when they are not expected.</td>
   <td>43</td>
   <td>43</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>layout.css.control-characters.enabled</code></td>
  </tr>
  <tr>
   <td><strong>The <code>transform-box</code> property</strong><br />
    Controls the box the relative values of {{cssxref("transform-origin")}} and {{cssxref("transform")}} relate too.</td>
   <td>41</td>
   <td>41</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1208550">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1208550">Disabled</a></td>
   <td><code>svg.transform-box.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Basic shapes in </strong><code><strong>clip-path</strong></code><br />
    Adds the functions <code>circle()</code>, <code>ellipse()</code>, and <code>polygon()</code> to the set of possible values for {{cssxref("clip-path")}}.</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247229">Disabled</a><br />
    <sub>(available since 47)</sub></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247229">Disabled</a><br />
    <sub>(available since 47)</sub></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247229">Disabled</a><br />
    <sub>(available since 47)</sub></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247229">Disabled</a><br />
    <sub>(available since 47)</sub></td>
   <td><code>layout.css.clip-path-shapes.enabled</code></td>
  </tr>
  <tr>
   <td><strong>The <code>font-display</code> descriptor for <code>@font-face</code></strong><br />
    To improve Web fonts performance, {{cssxref("@font-face")}} has an experimental {{cssxref("@font-face/font-display", "font-display")}} descriptor.</td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td><code>layout.css.font-display.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Longhand properties of CSS Masks</strong><br />
    The <a href="/en-US/docs/Web/CSS/CSS_Masks">longhand properties of CSS Masks</a> are only available behind a compile flag (<code>MOZ_ENABLE_MASK_AS_SHORTHAND</code>).</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td><strong>The touch-action CSS property</strong><br />
    The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification, and lets the CSS specify how and in what way the user is able to manipulate an object by touch.</td>
   <td>50</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td><code>layout.css.touch_action.enabled</code></td>
  </tr>
 </tbody>
</table>

<h2 id="JavaScript">JavaScript</h2>

<p id="ECMAScript_2016">See also <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a> for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Feature</th>
   <th scope="col">Firefox Nightly</th>
   <th scope="col">Firefox Developer Edition</th>
   <th scope="col">Firefox Beta</th>
   <th scope="col">Firefox Release</th>
   <th scope="col">Preference</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><strong><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation operator</a></strong></td>
   <td>42</td>
   <td>Disabled, see {{bug(1243858)}}</td>
   <td>Disabled, see {{bug(1243858)}}</td>
   <td>Disabled, see {{bug(1243858)}}</td>
   <td>None</td>
  </tr>
  <tr>
   <td><strong>Additions to the <code>ArrayBuffer</code> object</strong><br />
    Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new <code>ArrayBuffer</code> whose contents have been&nbsp;taken from the <code>oldBuffer</code>'s data (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>).</td>
   <td>36</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>None</td>
  </tr>
  <tr>
   <td><strong>TypedObject objects</strong> (<a href="https://github.com/dslomov-chromium/typed-objects-es7">spec</a>)</td>
   <td>Enabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>None</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SIMD">SIMD</a> (<a href="https://github.com/johnmccutchan/ecmascript_simd">specification and polyfill</a>)</td>
   <td>Enabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>None</td>
  </tr>
  <tr>
   <td><strong>Shared Memory objects</strong><br />
    {{jsxref("SharedArrayBuffer")}}<br />
    {{jsxref("Atomics")}}</td>
   <td>Enabled<br />
    <sub>(available since 46)</sub></td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td>Disabled<br />
    <sub>(available since 46)</sub></td>
   <td><code>javascript.options.shared_memory</code></td>
  </tr>
 </tbody>
</table>

<h2 id="APIs">APIs</h2>

<h3 id="Canvas_WebGL">Canvas &amp; WebGL</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Feature</th>
   <th scope="col">Firefox Nightly</th>
   <th scope="col">Firefox Developer Edition</th>
   <th scope="col">Firefox Beta</th>
   <th scope="col">Firefox Release</th>
   <th scope="col">Preference</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><strong>WebGL 2</strong><br />
    The {{domxref("WebGL2RenderingContext")}} interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.</td>
   <td>46<br />
    <sub>(implemented with disabled pref before 46)</sub></td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>webgl.enable-webgl2</code></td>
  </tr>
  <tr>
   <td><strong><code>WEBGL_debug_renderer_info</code> extension</strong><br />
    The {{domxref("WEBGL_debug_renderer_info")}} extension allows to transmit information useful to help debugging problems to the server.</td>
   <td>42</td>
   <td>42</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">Disabled</a></td>
   <td><code>webgl.enable-debug-renderer-info</code></td>
  </tr>
  <tr>
   <td><strong>OffscreenCanvas</strong><br />
    The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both&nbsp;the window and&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a> contexts.</td>
   <td>Disabled<br />
    <sub>(available since 44)</sub></td>
   <td>Disabled<br />
    <sub>(available since 44)</sub></td>
   <td>Disabled<br />
    <sub>(available since 44)</sub></td>
   <td>Disabled<br />
    <sub>(available since 44)</sub></td>
   <td><code>gfx.offscreencanvas.enabled</code></td>
  </tr>
  <tr>
   <td><strong><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions</a></strong><br />
    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.</td>
   <td>Disabled<br />
    <sub>(available since 30)</sub></td>
   <td>Disabled<br />
    <sub>(available since 30)</sub></td>
   <td>Disabled<br />
    <sub>(available since 30)</sub></td>
   <td>Disabled<br />
    <sub>(available since 30)</sub></td>
   <td><code>canvas.hitregions.enabled</code></td>
  </tr>
 </tbody>
</table>

<h3 id="DOM">&nbsp;DOM</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Feature</th>
   <th scope="col">Firefox Nightly</th>
   <th scope="col">Firefox Developer Edition</th>
   <th scope="col">Firefox Beta</th>
   <th scope="col">Firefox Release</th>
   <th scope="col">Preference</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><strong>WebVR API</strong><br />
    The <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> allows to control and use virtual reality devices.</td>
   <td>46<br />
    <sub>A major update of the interface happened in version 51.</sub></td>
   <td>46<br />
    <sub>A major update of the interface happened in version 51.</sub></td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>dom.vr.enabled</code></td>
  </tr>
  <tr>
   <td><strong>FlyWeb</strong><br />
    <a href="https://flyweb.github.io/" target="_blank">FlyWeb</a> is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.</td>
   <td>51</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>dom.flyweb.enabled</code></td>
  </tr>
  <tr>
   <td><code><strong>HTMLMediaElement.seekToNextFrame()</strong></code><br />
    Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.</td>
   <td>49<br />
    <sub>(Fundamental update in version 50)</sub></td>
   <td>49<br />
    <sub>(Fundamental update in version 50)</sub></td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>media.seekToNextFrame.enabled</code></td>
  </tr>
  <tr>
   <td><strong><code>GeometryUtils.getBoxQuads()</code></strong> ({{bug(917755)}})</td>
   <td>31</td>
   <td>31</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Disabled</a></td>
   <td><code>layout.css.getBoxQuads.enabled</code></td>
  </tr>
  <tr>
   <td><strong><code>GeometryU<span style="display:none">&nbsp;</span>tils.convertPointFromNode()</code></strong>,<br />
    <strong><code>GeometryUtils.RectFromNode()</code></strong>, and<br />
    <code><strong>GeometryUtils.convertQuadFromNode()</strong></code><br />
    ({{bug(918189)}})</td>
   <td>31</td>
   <td>31</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Disabled</a></td>
   <td><code>layout.css.convertFromNode.enabled</code></td>
  </tr>
  <tr>
   <td><strong><code>Node.rootNode</code></strong><br />
    The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.<br />
    <em>This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.</em></td>
   <td>48</td>
   <td>48</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">Disabled</a></td>
   <td><code>dom.node.rootNode.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Performance Observer API</strong><br />
    The {{domxref("PerformanceObserver")}} interface is used to <em>observe</em> performance measurement events and be notified of new <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).">performance entries</a> as they are recorded in the browser's <em>performance timeline</em>.</td>
   <td>49</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>dom.enable_performance_observer</code></td>
  </tr>
  <tr>
   <td><strong>WebVTT Regions API</strong><br />
    <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.<br />
    <em>This interface is considered to be in flux and isn't therefore activated in any version by default.</em></td>
   <td>Disabled<br />
    <sub>(Experimental implementation since version 30)</sub></td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>media.webvtt.regions.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Support for audio and video tracks</strong><br />
    Implements {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElment.videoTracks")}}.<br />
    <em>Firefox doesn't support multiple audio or video tracks, preventing the most common use cases for these properties to work properly. That's why these properties are not activated by default in any version.</em></td>
   <td>Disabled<br />
    <sub>(Experimental implementation since version 33)</sub></td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>media.track.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Better value for <code>Event.timestamp</code></strong><br />
    The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, but the value is not the time since but since the reboot. This change allow for returning a timestamp relative to the Unix epoch.</td>
   <td>32 (Windows)<br />
    43 (Linux)</td>
   <td>32 (Windows)<br />
    43 (Linux)</td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">Disabled</a></td>
   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">Disabled</a></td>
   <td><code>media.track.enabled</code></td>
  </tr>
 </tbody>
</table>

<h2 id="APIs">Developer Tools</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Feature</th>
   <th scope="col">Firefox Nightly</th>
   <th scope="col">Firefox Developer Edition</th>
   <th scope="col">Firefox Beta</th>
   <th scope="col">Firefox Release</th>
   <th scope="col">Preference</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><strong>Debugger rewrite in HTML</strong></td>
   <td>52</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>devtools.debugger.new-debugger-frontend</code></td>
  </tr>
  <tr>
   <td><strong>Console rewrite in HTML</strong></td>
   <td>52</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>devtools.webconsole.new-frontend-enabled</code></td>
  </tr>
  <tr>
   <td><strong>Responsive Design Mode rewrite in HTML</strong><br />
       A rewrite of Responsive Design Mode using HTML adds new features like a device selector (applies size, UA, dPR), UI redesign, and there's more still to come.</td>
   <td>52</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>devtools.responsive.html.enabled</code></td>
  </tr>
  <tr>
   <td><strong>Experimental Performance tool options</strong><br />
       Enables options in the UI for JIT optimizations, memory, etc.</td>
   <td>41</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td>Disabled</td>
   <td><code>devtools.performance.ui.experimental</code></td>
  </tr>
 </tbody>
</table>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a></li>
 <li><a href="https://nightly.mozilla.org/">Firefox Nightly</a></li>
 <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li>
</ul>