---
title: Funzionalità sperimentali in Firefox
slug: Mozilla/Firefox/Funzionalità_sperimentali
translation_of: Mozilla/Firefox/Experimental_features
---
<div>{{FirefoxSidebar}}</div>

<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. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.</p>

<p class="summary"><span class="seoSummary">This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary.</span> 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>To test these experimental features, you need to 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>. Which you need is described alongside each feature's description below.</p>

<div class="blockIndicator note">
<p><strong>Editor's note:</strong> When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: <code>\{{bug(<em>bug-number</em>)}}</code>.</p>
</div>

<h2 id="HTML">HTML</h2>

<h3 id="Element_&lt;dialog>">Element: &lt;dialog&gt;</h3>

<p>The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>53</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>53</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>53</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>53</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.dialog_element.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Global_attribute_inputmode">Global attribute: inputmode</h3>

<p>Our implementation of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a></code> global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>75</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.forms.inputmode</code></th>
  </tr>
 </tbody>
</table>

<h3 id="&lt;link_relpreload>">&lt;link rel="preload"&gt;</h3>

<p>The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> for more details. For more details on the status of this feature, see {{bug(1639607)}}.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>78</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>78</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>78</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>78</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>network.preload</code></th>
  </tr>
 </tbody>
</table>

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

<h3 id="Display_stray_control_characters_in_CSS_as_hex_boxes">Display stray control characters in CSS as hex boxes</h3>

<p>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.<br>
 <br>
 See {{bug(1099557)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>43</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>43</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>43</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>43</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.control-characters.enabled</code> or <code>layout.css.control-characters.visible</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Property_initial-letter">Property: initial-letter</h3>

<p>The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.<br>
 <br>
 See {{bug(1223880)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>50</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>50</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>50</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>50</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.initial-letter.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Conic_gradients">Conic gradients</h3>

<p><a href="/en-US/docs/Web/CSS/gradient#Conic_gradient">Conic gradients</a> expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.conic-gradient.enabled</code> and <code>gfx.webrender.all</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Pseudo-class_focus-visible">Pseudo-class: :focus-visible</h3>

<p>Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1617600">bug 1617600</a> for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.focus-visible.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Single_numbers_as_aspect_ratio_in_media_queries">Single numbers as aspect ratio in media queries</h3>

<p>Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a>. See {{bug(1565562)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.aspect-ratio-number.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Property_backdrop-filter">Property: backdrop-filter</h3>

<p>The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>70</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.backdrop-filter.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Grid_Masonry_layout">Grid: Masonry layout</h3>

<p>Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.grid-template-masonry-value.enabled</code></th>
  </tr>
 </tbody>
</table>

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

<h3 id="Graphics_Canvas_WebGL_and_WebGPU">Graphics: Canvas, WebGL, and WebGPU</h3>

<h4 id="Interface_OffscreenCanvas">Interface: OffscreenCanvas</h4>

<p>The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> contexts. See {{bug(1390089)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>44</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>44</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>44</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>44</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>gfx.offscreencanvas.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Hit_regions">Hit regions</h4>

<p>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.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>30</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>30</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>30</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>30</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>canvas.hitregions.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="WebGL_Draft_extensions">WebGL: Draft extensions</h4>

<p>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.</p>

<h4 id="WebGPU_API">WebGPU API</h4>

<p>This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The <a href="https://gpuweb.github.io/gpuweb/">specification</a> is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.webgpu.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="HTML_DOM_API">HTML DOM API</h3>

<h4 id="Global_event_beforeinput">Global event: beforeinput</h4>

<p>The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>74</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>74</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>74</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>74</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.input_events.beforeinput.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="HTMLMediaElement_method_setInkId">HTMLMediaElement method: setInkId()</h4>

<p>{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>64</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>64</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>64</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>64</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>media.setsinkid.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="HTMLMediaElement_properties_audioTracks_and_videoTracks">HTMLMediaElement properties: audioTracks and videoTracks</h4>

<p>Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport 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.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>33</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>33</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>33</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>33</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>media.track.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="DOM">DOM</h3>

<h4 id="Document_property_autoplayPolicy">Document property: autoplayPolicy</h4>

<p>The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "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 <code>allowed</code> (autoplay is currently permitted), <code>allowed-muted</code> (autoplay is allowed but only with no—or muted—audio), and <code>disallowed</code> (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>66</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>66</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>66</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>66</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.media.autoplay.autoplay-policy-api</code></th>
  </tr>
 </tbody>
</table>

<h4 id="GeometryUtils_methods_convertPointFromNode_convertRectFromNode_and_convertQuadFromNode">GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()</h4>

<p>The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>31</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>31</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>31</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>31</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.getBoxQuads.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="GeometryUtils_method_getBoxQuads">GeometryUtils method: getBoxQuads()</h4>

<p>The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>31</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>31</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>31</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>31</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.convertFromNode.enable</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Payment_Request_API">Payment Request API</h3>

<h4 id="Primary_payment_handling">Primary payment handling</h4>

<p>The <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> 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 on the state of this API.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>55</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>55</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>55</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>55</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.payments.request.enabled</code> and<br>
    <code>dom.payments.request.supportedRegions</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Basic_Card_API">Basic Card API</h4>

<p>Extends the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>56</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>56</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>56</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>56</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.payments.request.enabled</code> and<br>
    <code>dom.payments.request.supportedRegions</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Visual_Viewport_API">Visual Viewport API</h3>

<p>The <a href="/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>63</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>63</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>63</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>63</td>
   <td>Starting in Firefox 68, on Android only</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.visualviewport.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Constructable_stylesheets">Constructable stylesheets</h3>

<p>The addition of a constructor to the {{domxref("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 <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. Our implementation is not yet complete; see {{bug(1520690)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>73</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>layout.css.constructable-stylesheets.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="WebRTC_and_media">WebRTC and media</h3>

<p>The following experimental features include those found in the <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>, the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, the <a href="/en-US/docs/Web/API/Media_Session_API">Media Session API</a>, the <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a>, the <a href="/en-US/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions API</a>, and the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>.</p>

<h4 id="Media_Session_API">Media Session API</h4>

<p>The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>71</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>71</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>71</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>71</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.media.mediasession.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Asynchronous_SourceBuffer_add_and_remove">Asynchronous SourceBuffer add and remove</h4>

<p>This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>62</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>62</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>62</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>62</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>media.mediasource.experimental.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="AVIF_AV1_Image_File_format_support">AVIF (AV1 Image File format) support</h4>

<p>With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>image.avif.enabled</code></th>
  </tr>
 </tbody>
</table>

<h2 id="Security_and_privacy">Security and privacy</h2>

<h4 id="Block_plain_text_requests_from_Flash_on_encrypted_pages">Block plain text requests from Flash on encrypted pages</h4>

<p>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 <code>OBJECT_SUBREQUEST</code>s as active content. See {{bug(1190623)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>59</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>59</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>59</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>59</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>security.mixed_content.block_object_subrequest</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Insecure_page_labeling">Insecure page labeling</h4>

<p>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 {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>security.insecure_connection_text.enabled</code> for normal browsing mode; <code>security.insecure_connection_text.pbmode.enabled</code> for private browsing mode</th>
  </tr>
 </tbody>
</table>

<h4 id="Upgrading_mixed_display_content">Upgrading mixed display content</h4>

<p>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.</p>

<p>This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>60</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>security.mixed_content.upgrade_display_content</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Implicit_relnoopener_on_links_with_target_blank">Implicit rel="noopener" on links with target="_blank"</h4>

<p>Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to <code>_blank</code> (that is, using <code>target="_blank"</code>) to imply that the default value of {{htmlattrxref("rel", "a")}} is <code>noopener</code> rather than <code>opener</code>, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using <code>rel="opener"</code> on their <code>&lt;a&gt;</code> elements that use <code>target="_blank"</code> to open the link into a new window or tab. See {{bug(1503681)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>65</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>65</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>65</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>65</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>dom.targetBlankNoOpener.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="FTP_support_disabled">FTP support disabled</h4>

<p>For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The <code>network.ftp.enabled</code> preference must be enabled (set to <code>true</code>) to allow FTP to be used.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>77</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>77</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>network.ftp.enabled</code></th>
  </tr>
 </tbody>
</table>

<h2 id="Developer_tools">Developer tools</h2>

<p>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.</p>

<h4 id="Color_scheme_simulation">Color scheme simulation</h4>

<p>Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).</p>

<p>See {{bug(1550804)}} and {{bug(1137699)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>72</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>72</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>72</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>72</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>devtools.inspector.color-scheme-simulation.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Execution_context_selector">Execution context selector</h4>

<p>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.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>75</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>devtools.webconsole.input.context</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Mobile_gesture_support_in_Responsive_Design_Mode">Mobile gesture support in Responsive Design Mode</h4>

<p>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.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>76<sup>[1]</sup></td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>76<sup>[1]</sup></td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>76<sup>[1]</sup></td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>76<sup>[1]</sup></td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2">n/a</th>
  </tr>
 </tbody>
</table>

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

<h4 id="Compatibility_panel">Compatibility panel</h4>

<p>A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>71</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>71</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>71</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>71</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>devtools.inspector.compatibility.enabled</code></th>
  </tr>
 </tbody>
</table>

<h2 id="UI">UI</h2>

<h4 id="Desktop_zooming">Desktop zooming</h4>

<p>This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.</p>

<table class="standard-table" style="max-width: 42rem;">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">Release channel</th>
   <th scope="col" style="vertical-align: bottom;">Version added</th>
   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>42</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>42</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>42</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>42</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Preference name</th>
   <th colspan="2"><code>apz.allow_zooming</code> and (on Windows) <code>apz.windows.use_direct_manipulation</code></th>
  </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>