---
title: Firefox における実験的機能
slug: Mozilla/Firefox/Experimental_features
tags:
  - Experimental
  - Firefox
  - Preferences
  - features
translation_of: Mozilla/Firefox/Experimental_features
---
<div>{{FirefoxSidebar}}</div>

<p>このページでは、提案されているまたは最先端のウェブプラットフォーム標準を含む、Firefox の実験的かつ部分的に実装された機能を一覧にしています。また、それらの機能が搭載されているビルドの情報、「既定で」有効になっているかどうか、有効または無効にするためにどの<em>環境設定</em>を使用すべきかについても説明しています。これにより、機能がリリースされる前に、その機能をテストすることができます。</p>

<p>新機能は、最初に <a href="https://nightly.mozilla.org/">Firefox Nightly</a> ビルドに登場し、多くの場合、既定で有効化されます。その後、 <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a> に引き継がれ、最終的にはリリースビルドになります。リリースビルドにおいて既定で有効化された機能は、もはや実験的なものではないので、このトピックから削除してください。</p>

<p>実験的な機能は、 <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Firefox 設定エディター</a> (Firefox のアドレスバーに <code>about:config</code> と入力) を使って、以下に示す関連する<em>設定</em>を変更することで、有効または無効にすることができます。</p>

<div class="notecard note">
  <h4>編集者からのお願い</h4>
  <p>これらの表に機能を追加する際には、 {{TemplateLink("bug")}} マクロ <code>\{{bug(<em>bug-number</em>)}}</code> を使って関連するバグへのリンクを含めるようにしてください。</p>
</div>

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

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

<p>HTML の {{HTMLElement("dialog")}} 要素とそれに関連する DOM API は、 HTML ベースのモーダルなダイアログボックスに対応しています。現在の実装は少々不格好ですが、基本的には機能しています。 (詳細は {{bug(840640)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>53</td>
   <td>Yes</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">設定名</th>
   <th colspan="2"><code>dom.dialog_element.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Global_attribute_inputmode">グローバル属性: inputmode</h3>

<p><code><a href="/ja/docs/Web/HTML/Global_attributes/inputmode">inputmode</a></code> グローバル属性の実装は WHATWG 仕様書に併せて更新してきましたが ({{bug(1509527)}})、 contenteditable コンテンツで利用できるようにするなど、他の変更も必要です。 (詳細は {{bug(1205133)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>dom.forms.inputmode</code></th>
  </tr>
 </tbody>
</table>

<h3 id="inert_attribute">inert 属性</h3>

<p>{{domxref("HTMLElement")}} の {{DOMxRef("HTMLElement.inert")}} プロパティは論理値で、存在する場合、ブラウザーが支援技術、ページ検索、テキスト選択から要素を「無視」するようになります。この機能の状態についての詳細は、 {{bug(1655722)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>html5.inert.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Layout_for_input_typesearch">input type="search" のレイアウト</h3>

<p><code>input type="search"</code> のレイアウトが更新されました。これにより、何らかの入力を始めたときに、他のブラウザーの実装と同様にクリアアイコンが現れるようになります。 (詳しくは {{bug(558594)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.forms.input-type-search.enabled</code></th>
  </tr>
 </tbody>
</table>

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

<h3 id="Display_stray_control_characters_in_CSS_as_hex_boxes">CSS の迷子の制御文字を 16 進数のボックスで表示する</h3>

<p>この機能は、予期せずタブ (U+0009)、行送り (U+000A)、ページ送り (U+000C)、復改 (U+000D) 以外の制御文字 (Unicode の Cc カテゴリー) が現れていない場合に 16 進数で表示します。 (詳細は {{bug(1099557)}} を参照してください)。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</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">initial-letter プロパティ</h3>

<p>CSS の {{cssxref("initial-letter")}} プロパティは、 <a href="https://drafts.csswg.org/css-inline/">CSS Inline Layout</a> 仕様に含まれており、先頭文字の表示方法を dropped, raise, sunken から指定することができます。 (詳細は {{bug(1223880)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>layout.css.initial-letter.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Property_aspect-ratio">aspect-ratio プロパティ</h3>

<p>CSS の {{cssxref("aspect-ratio")}} プロパティは <a href="https://drafts.csswg.org/css-sizing-4/">CSS4 Sizing</a> 仕様の一部であり、ある縦横比のボックスを生成することができます。 (詳しくは {{bug(1639963)}} および {{bug(1646096)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>81</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.css.aspect-ratio.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Property_font_size_adjust">font-size-adjust プロパティの値 2 つの構文</h3>

<p>CSS の {{cssxref("font-size-adjust")}} プロパティが <a href="https://drafts.csswg.org/css-fonts-5/">CSS5 Fonts 5</a> 仕様で更新され、フォントメトリックを正規化するために定義するためのもう一つの値を追加しています。 (詳しくは {{bug(1711479)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>91</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.css.font-size-adjust.basis.enabled</code></th>
  </tr>
 </tbody>
</table>


<h3 id="Descriptor_size_adjust">size-adjust 記述子</h3>

<p>CSS の {{cssxref("@font-face/size-adjust")}} 記述子は <a href="https://drafts.csswg.org/css-fonts-5/">CSS5 Fonts</a> 仕様の一部であり、このフォントに関連する書体の輪郭とメトリクスの乗数を定義します。これにより、様々なフォントが同じフォントサイズでレンダリングされた場合に、デザインの調和が取りやすくなります。 (詳細は {{bug(1698495)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>89</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>89</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>89</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>89</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.css.size-adjust.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Single_numbers_as_aspect_ratio_in_media_queries">メディアクエリーで縦横比として 1 つの数値を使用</h3>

<p><a href="/ja/docs/Web/CSS/Media_queries">メディアクエリー</a>で縦横比を指定する際に、 1 つの {{cssxref("number")}} を {{cssxref("ratio")}} として使用できるようになりました。 (詳細は {{bug(1565562)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>layout.css.aspect-ratio-number.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Property_backdrop-filter">backdrop-filter プロパティ</h3>

<p>{{cssxref("backdrop-filter")}} プロパティは、要素の背後の領域にフィルター効果を適用します。 (詳しくは {{bug(1178765)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>layout.css.backdrop-filter.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Value_content_none"><code>content</code> プロパティの none 値</h3>

<p><code>none</code> の値を {{cssxref("content")}} プロパティに設定すると、あたかも要素が空であるかのように、要素の子がこの要素の子としてレンダリングされることを抑制します。 (詳細は {{bug(1699964)}} を参照。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.css.element-content-none.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Fit_content_function"><code>fit-content()</code> 関数の <code>width</code> など大きさを指定するプロパティでの使用</h3>

<p>{{cssxref("fit-content()")}} 関数は {{cssxref("width")}} をその他の大きさを指定するプロパティに適用することです。。この関数は、 CSS グリッドレイアウトのトラックのサイズ調整ですでに十分対応しています。(詳細は {{bug(1312588)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>91</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.css.fit-content-function.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Grid_Masonry_layout">グリッド: メイソンリーレイアウト</h3>

<p>グリッドレイアウトをベースにした<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">メイソンスタイルレイアウト</a>を追加しました。メイソンリーレイアウトスタイルレイアウトは、一方の軸がメイソンリーレイアウトスタイル、もう一方の軸が通常のグリッドレイアウトです。これにより、開発者は Pinterest のようなギャラリースタイルのレイアウトを簡単に作成できるようになります。詳しくは {{bug(1607954)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>layout.css.grid-template-masonry-value.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Media_feature_prefers-contrast">prefers-contrast メディア特性</h3>

<p><code><a href="/ja/docs/Web/CSS/@media/prefers-contrast">prefers-contrast</a></code> メディア特性は、ウェブコンテンツの表示において、ユーザーが高め (または低め) のコントラストを指定しているかどうかを検出するために使用されます。詳細については、 {{bug("1506364")}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>80</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>80</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>80</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>80</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2">
    <p><code>layout.css.prefers-contrast.enabled</code></p>
   </th>
  </tr>
 </tbody>
</table>

<h3 id="Property_math-style">math-style プロパティ</h3>

<p>{{cssxref("math-style")}} プロパティは、 MathML の数式の高さを通常にするかコンパクトにするかを示します。 (詳しくは {{bug(1665975)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>83</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>83</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>83</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>83</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>layout.css.math-style.enabled</code></th>
  </tr>
 </tbody>
</table>

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


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

<h3 id="Graphics_Canvas_WebGL_and_WebGPU">グラフィック: Canvas, WebGL, WebGPU</h3>

<h4 id="Interface_OffscreenCanvas">OffscreenCanvas インターフェイス</h4>

<p>{{domxref("OffscreenCanvas")}} インターフェイスは、画面外でレンダリングできるキャンバスを提供します。これは、ウィンドウと<a href="/ja/docs/Web/API/Web_Workers_API">ワーカー</a>の両方のコンテキストで利用できます。 (詳細は {{bug(1390089)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>gfx.offscreencanvas.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Hit_regions">ヒット領域</h4>

<p>マウスの座標がキャンバス上の特定の領域内にあるかどう かは、解決すべき一般的な問題です。ヒットリージョン API を使用すると、キャンバスの領域を定義することができ、キャンバス上のインタラクティブ コンテンツをアクセシビリティ ツールに公開する別の可能性が生まれます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>canvas.hitregions.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="WebGL_Draft_extensions">WebGL: ドラフト拡張</h4>

<p>この設定を有効にすると、現在 "draft" ステータスでテスト中の WebGL 拡張機能が使用可能になります。現在、 Firefox でテスト中の WebGL 拡張機能はありません。</p>

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

<p>これは新しい API で、ユーザーの端末やコンピューターの GPU (Graphics Processing Unit) を使用して、計算やグラフィックのレンダリングを行うための低レベルのサポートを提供します。この<a href="https://gpuweb.github.io/gpuweb/">仕様</a>はまだ完成していません。この API の進捗状況については、 {{bug(1602129)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>dom.webgpu.enabled</code></th>
  </tr>
 </tbody>
</table>

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

<h4 id="HTMLMediaElement_method_setSinkId">HTMLMediaElement の setSinkId() メソッド</h4>

<p>{{domxref("HTMLMediaElement.setSinkId()")}} は、 {{domxref("HTMLMediaElement")}} に音声出力機器のシンク ID を設定することで、音声の出力先を変更することができます。詳細は {{bug(934425)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>media.setsinkid.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="HTMLMediaElement_properties_audioTracks_and_videoTracks">HTMLMediaElement の audioTracks および videoTracks プロパティ</h4>

<p>この機能を有効にすると、 HTML のすべてのメディア要素に {{domxref("HTMLMediaElement.audioTracks")}} および {{domxref("HTMLMediaElement.videoTracks")}} プロパティが追加されます。しかし、 Firefox は現在、複数の音声トラックや動画トラックに対応していないため、これらのプロパティの最も一般的な使用例は機能せず、既定では両方とも無効になっています。詳細については {{bug(1057233)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>media.track.enabled</code></th>
  </tr>
 </tbody>
</table>

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

<h4 id="clipboarditem">ClipboardItem</h4>

<p>{{domxref('Clipboard API')}} の {{domxref('ClipboardItem')}} インターフェイスに対応し、 {{domxref('Clipboard.write()')}} は{{domxref('ClipboardItem','クリップボードアイテム')}}の並びを、以前に実装されていた {{domxref('DataTransfer','dataTransfer オブジェクト')}} の代わりに受け入れます。これは、以前は <code>dom.events.asyncClipboard.dataTransfer</code> であった <code>dom.events.asyncClipboard.clipboardItem</code> を設定することで利用可能です。詳細については、 {{bug('1619947')}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>87</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>87</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>87</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>87</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code><strong>dom.events.asyncClipboard.clipboardItem</strong></code></th>
  </tr>
 </tbody>
</table>

<h4 id="clipboardread">ClipboardRead</h4>

<p>クリップボードインターフェイスの <a href="/ja/docs/Web/API/Clipboard/read">Clipboard.read()</a> メソッドは、以前は <code>dom.events.asyncClipboard.clipboardItem</code> の下にあったものが、 <code>dom.events.asyncClipboard.read</code> の環境設定の下でも利用できるようになりました。(詳細は ({{bug(1701512)}}) を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>90</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>90</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>90</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>90</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>dom.events.asyncClipboard.read</code> </th>
  </tr>
 </tbody>
</table>

<h4 id="HTML_Sanitizer_API">HTML Sanitizer API</h4>

<p>{{domxref('HTML Sanitizer API')}} は、開発者が信頼できない HTML 文字列を受け取り、文書の DOM に安全に挿入するためにそれらをサニタイズすることを可能にします。各設定プロパティ内の既定の要素 (サニタイズされる要素) はまだ検討中です。このため、 config 引数は実装されていません (詳しくは{{domxref('Sanitizer.sanitizer()', 'the constructor', '', 1)}}を参照してください)。詳細は、 {{bug('1673309')}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>84</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>84</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>84</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>84</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code><strong>dom.security.sanitizer.enabled</strong></code></th>
  </tr>
 </tbody>
</table>

<h4 id="Document_property_autoplayPolicy">Document の autoplayPolicy プロパティ</h4>

<p>{{domxref("document")}} の {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} プロパティは、 (メディア要素の {{domxref("HTMLMediaElement.autoplay", "autoplay")}} プロパティを使用するか、または JavaScript コードから再生を開始させようとする) メディアの自動再生のリクエストをブラウザーがどのように処理するかを示す文字列を返します。この API の仕様はまだ作成中です。この値は、ユーザーが何をしているか、ユーザーの好み、およびブラウザ全体の状態に応じて、時間とともに変化します。想定される値としては、 <code>allowed</code> (自動再生は現在許可されている)、 <code>allowed-muted</code> (自動再生は許可されているが、音声がないかミュートされている場合のみ)、<code>disallowed</code> (自動再生は現在許可されていない) などがあります。詳細は、 {{bug(1506289)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</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 の convertPointFromNode(), convertRectFromNode(), convertQuadFromNode() メソッド</h4>

<p><code>GeometryUtils</code> の <code>convertPointFromNode()</code>、<code>convertRectFromNode()</code>)、<code></code>convertQuadFromNode()</code> の各メソッドは、指定された点、矩形、または四角形を、呼び出されたノードから別のノードにマッピングします。 (詳細は {{bug(918189)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>layout.css.getBoxQuads.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="GeometryUtils_method_getBoxQuads">GeometryUtils の getBoxQuads() メソッド</h4>

<p><code>GeometryUtils</code> の <code>getBoxQuads()</code> メソッドは、他のノードやビューポートとの相対的な {{domxref("Node")}} の CSS ボックスを返します。(詳細は {{bug(917755)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</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">主要な支払いの扱い</h4>

<p><a href="/ja/docs/Web/API/Payment_Request_API">Payment Request API</a> は、ウェブコンテンツやアプリ内でウェブベースの支払いを処理するためのサポートを提供します。ユーザーインターフェイスのテスト中にバグが発生したため、 API の変更を検討している間、この API の出荷を延期することにしました。作業は継続中です。(詳細は {{bug(1318984)}} をご参照ください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</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><a href="/ja/docs/Web/API/Payment_Request_API">Payment Request API</a> に、カード支払い種別と支払い応答を記述するデータを定義する辞書を拡張します。 {{domxref("BasicCardRequest")}} と {{domxref("BasicCardResponse")}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</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><a href="/ja/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> は、文書やウィンドウのコンテンツ領域に対する{{Glossary("visual viewport", "視覚ビューポート")}}の相対的な位置を示す情報へのアクセスを提供します。また、この情報の変更を監視するイベントにも対応しています。詳細については、 {{bug(1550390)}} を参照してください。現在、これをデスクトップ版に展開する計画があり、その状況は {{bug(1551302)}} で確認できます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>dom.visualviewport.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="Constructable_stylesheets">構築可能なスタイルシート</h3>

<p>{{domxref("CSSStyleSheet")}} インターフェースにコンストラクターが追加され、また関連する様々な変更により、 HTML にシートを追加することなく、新しいスタイルシートを直接作成できるようになりました。これにより、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> で使用するための再利用可能なスタイルシートの作成がより容易になります。我々の実装はまだ完全ではなく、詳細は {{bug(1520690)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>layout.css.constructable-stylesheets.enabled</code></th>
  </tr>
 </tbody>
</table>

<h3 id="WebRTC_and_media">WebRTC とメディア</h3>

<p><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a>、<a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a>、<a href="/ja/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a>、<a href="/ja/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions API</a>、<a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a> にある以下の機能は実験的なものです。</p>

<h4 id="Asynchronous_SourceBuffer_add_and_remove">非同期の SourceBuffer の追加と削除</h4>

<p>これにより、メディアソースバッファを追加および削除するためのプロミスベースのメソッド {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} および {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} が {{domxref("SourceBuffer")}} インターフェイスに追加されます。詳細については、 {{bug(1280613)}} および {{bug(778617)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</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) 対応</h4>

<p>この機能を有効にすると、 Firefox は <a href="/ja/docs/Web/Media/Formats/Image_types#avif">AV1 画像ファイル (AVIF)</a> 形式をサポートします。これは、 AV1 動画圧縮アルゴリズムの機能を利用して画像サイズを小さくした静止画ファイル形式です。(詳細については、 {{bug(1443863)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>image.avif.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="AV1_support_for_Firefox_on_Android">Android 版Firefox の AV1 対応</h4>

<p>Android 版 Firefox で、 <a href="/ja/docs/Web/Media/Formats/Video_codecs#av1">AV1 形式のメディア</a>を利用できるようになります。この機能は、 Android 版 Firefox 81 以降で有効な Nightly ビルドで利用できます。既定では有効になっています。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>81</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>—</td>
   <td>—</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>—</td>
   <td>—</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>—</td>
   <td>—</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2">—</th>
  </tr>
 </tbody>
</table>

<h4 id="JPEG_XL_support">JPEG XL 対応</h4>

<p>この機能を有効にすると、 Firefox は <a href="https://jpeg.org/jpegxl/">JPEG XL</a> 画像に対応します。詳細は {{bug(1539075)}} を参照してください。この機能は、Firefox 90 以降で有効なナイトリービルドで利用できます。</p>

<table class="standard-table">
  <thead>
   <tr>
    <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
    <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
    <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">Nightly</th>
    <td>90</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">Developer Edition</th>
    <td>90</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">Beta</th>
    <td>90</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">Release</th>
    <td>—</td>
    <td>—</td>
   </tr>
   <tr>
    <th scope="row">設定名</th>
    <th colspan="2">image.jxl.enabled</th>
   </tr>
  </tbody>
 </table>

<h2 id="Security_and_privacy">セキュリティとプライバシー</h2>

<h4 id="Block_plain_text_requests_from_Flash_on_encrypted_pages">暗号化されたページ上の Flash からのプレーンテキストのリクエストをブロックする</h4>

<p>暗号化されたページ上の Flash コンテンツによって引き起こされる中間者攻撃 (MitM) を軽減するために、 <code>OBJECT_SUBREQUEST</code> をアクティブなコンテンツとして扱う設定が追加されました。詳細については、 {{bug(1190623)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>security.mixed_content.block_object_subrequest</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Insecure_page_labeling">安全でないページのラベル付け</h4>

<p>この 2 つの環境設定では、安全でない方法でページが読み込まれた場合 ({{Glossary("HTTPS")}} ではなく {{Glossary("HTTP")}} を使用した場合) に、従来のロックアイコンの隣に「Not secure」というテキストラベルがアドレスバーに追加されます。詳細については、 {{bug(1335970)}} を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2">通常閲覧モードは <code>security.insecure_connection_text.enabled</code>、プライベート閲覧モードは <code>security.insecure_connection_text.pbmode.enabled</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Upgrading_mixed_display_content">混合表示コンテンツのアップグレード</h4>

<p>この設定を有効にすると、 Firefox は安全なページでメディアコンテンツへの要求を HTTP から HTTPS に自動的にアップグレードします。これは、一部のコンテンツが安全に読み込まれる一方で、他のコンテンツが安全でないという混合コンテンツの状態を防ぐことを目的としています。(メディアのホストが HTTPS に対応していないために) アップグレードが失敗した場合、そのメディアは読み込まれません。(詳細については、 {{bug(1435733)}} を参照してください。)</p>

<p>これはコンソールの警告も変更します。アップグレードが成功した場合、警告ではなく、リクエストがアップグレードされたことを示すメッセージを表示します。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>84</td>
   <td>Yes</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">設定名</th>
   <th colspan="2"><code>security.mixed_content.upgrade_display_content</code></th>
  </tr>
 </tbody>
</table>


<h4 id="Feature_policy">機能ポリシー</h4>

<p><a href="/ja/docs/Web/HTTP/Feature_Policy">機能ポリシー</a>は、ウェブ開発者がブラウザーの特定の機能や API の動作を選択的に有効化、無効化、変更することを可能にします。 CSP と似ていますが、セキュリティの動作ではなく機能を制御します。</p>

<div class="notecard note">
  <h4>メモ</h4>
  <p><code>Feature-Policy</code> ヘッダーは、仕様書では <code>Permissions-Policy</code> に名称が変更されており、本記事もいずれその変更を反映して更新される予定です。</p>
</div>

<table class="standard-table">
  <thead>
   <tr>
    <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
    <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
    <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">Nightly</th>
    <td>65</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">Developer Edition</th>
    <td>65</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">Beta</th>
    <td>65</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">Release</th>
    <td>65</td>
    <td>No</td>
   </tr>
   <tr>
    <th scope="row">設定名</th>
    <th colspan="2"><code>dom.security.featurePolicy.header.enabled</code></th>
   </tr>
  </tbody>
 </table>

<h2 id="Developer_tools">開発ツール</h2>

<p>Mozilla の開発者向けツールは常に進化しています。私たちは新しいアイディアを試し、新しい機能を追加し、Nightly や Developer Edition のチャンネルでテストしてから、ベータ版やリリースに移行しています。以下の機能は、現在の実験的な開発者ツールの機能の一部です。</p>

<h4 id="Execution_context_selector">実行コンテキストセレクター</h4>

<p>この機能では、コンソールのコマンドラインにボタンが表示され、入力した式が実行されるコンテキストを変更することができます。(詳細は、 {{bug(1605154)}} および {{bug(1605153)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2"><code>devtools.webconsole.input.context</code></th>
  </tr>
 </tbody>
</table>

<h4 id="Mobile_gesture_support_in_Responsive_Design_Mode">レスポンシブデザインモードでのモバイルジェスチャーのサポート</h4>

<p>マウスジェスチャーを使用して、スワイプ/スクロール、ダブルタップやピンチズーム、長押しによるコンテキストメニューの選択/オープンなどのモバイルジェスチャーをシミュレートすることができます。 (詳細については {{bug(1621781)}}、{{bug(1245183)}}、{{bug(1401304)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</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">設定名</th>
   <th colspan="2">n/a</th>
  </tr>
 </tbody>
</table>

<p>[1] ダブルタップのジェスチャーによるズームの対応は Firefox 76 で追加されました。他のジェスチャーは Firefox 79 で追加されました。</p>

<h4 id="Server-sent_events_in_Network_Monitor">ネットワークモニターにおける Server-sent event</h4>

<p>ネットワークモニターが <a href="/ja/docs/Web/API/Server-sent_events">server-sent</a> event についての情報を表示する機能です。 (詳細については {{bug(1405706)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>80</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>80</td>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>80</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>80</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>devtools.netmonitor.features.serverSentEvents</code></th>
  </tr>
 </tbody>
</table>

<h4 id="CSS_browser_compatibility_tooltips">CSS のブラウザー互換性ツールチップ</h4>

<p>CSS ルールビューでは、既知の問題がある CSS プロパティの隣にブラウザーの互換性ツールチップを表示させることができます。詳しい情報は <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#browser_compat_warnings">HTML の調査と編集 &gt; ブラウザー互換性の警告</a>を参照してください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Developer Edition</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Beta</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Release</th>
   <td>81</td>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">設定名</th>
   <th colspan="2"><code>devtools.inspector.ruleview.inline-compatibility-warning.enabled</code></th>
  </tr>
 </tbody>
</table>

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

<h4 id="Desktop_zooming">デスクトップ版のズーム</h4>

<p>この機能により、デスクトップ PC では、モバイル端末のようにレイアウトの変更をすることなく、スムーズなピンチズームが可能になります。(詳細は {{bug(1245183)}} および {{bug(1620055)}} を参照してください。)</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" style="vertical-align: bottom;">リリースチャネル</th>
   <th scope="col" style="vertical-align: bottom;">追加されたバージョン</th>
   <th scope="col" style="vertical-align: bottom;">既定で有効か</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Nightly</th>
   <td>42</td>
   <td>Yes</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">設定名</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">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Mozilla/Firefox/Releases">Firefox 開発者リリースノート</a></li>
 <li><a href="https://nightly.mozilla.org/">Firefox Nightly</a></li>
 <li><a href="https://www.mozilla.org/ja/firefox/developer/">Firefox Developer Edition</a></li>
</ul>