diff options
Diffstat (limited to 'files/ja')
10 files changed, 241 insertions, 151 deletions
diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html index 8ab11cbac6..36c83f9155 100644 --- a/files/ja/learn/forms/ui_pseudo-classes/index.html +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -15,7 +15,7 @@ translation_of: Learn/Forms/UI_pseudo-classes --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Advanced_form_styling", "Learn/Forms/Form_validation", "Learn/Forms")}}</p> -<p>In the previous articles we covered the styling of various form controls, in a general manner. This included some usage of pseudo-classes, 例えば、using <code>:checked</code> to target a checkbox only when it is selected. <span class="seoSummary">In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.</span></p> +<p>In the previous articles, we covered the styling of various form controls, in a general manner. This included some usage of pseudo-classes, 例えば、using <code>:checked</code> to target a checkbox only when it is selected. <span class="seoSummary">In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.</span></p> <table class="learn-box standard-table"> <tbody> @@ -49,7 +49,7 @@ translation_of: Learn/Forms/UI_pseudo-classes <li>{{cssxref(":checked")}}, {{cssxref(":indeterminate")}}, and {{cssxref(":default")}}: Respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> with the <code>checked</code> attribute set, or an <code><a href="/ja/docs/Web/HTML/Element/option"><option></a></code> element with the <code>selected</code> attribute set).</li> </ul> -<p>There are many others too, but the ones listed above are the most obviously useful. Some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. The ones listed above all have pretty good browser support, but of course you should test your form implementations carefully to make sure they work for your target audience.</p> +<p>There are many others too, but the ones listed above are the most obviously useful. Some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. The ones listed above all have pretty good browser support, but of course, you should test your form implementations carefully to make sure they work for your target audience.</p> <div class="blockIndicator note"> <p><strong>注</strong>: A number of the pseudo-classes discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) You'll learn much more about setting and controlling validation constraints in our next article — <a href="/ja/docs/Learn/Forms/Form_validation">Client-side form validation</a> — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things.</p> @@ -96,11 +96,11 @@ input:optional { <p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/basic-required-optional.html", '100%', 400)}}</p> -<p>You can also try submitting the form without flling it in, to see the client-side validation error messages browsers give you 既定では.</p> +<p>You can also try submitting the form without filling it in, to see the client-side validation error messages browsers give you 既定では.</p> <p>The above form isn't bad, but it isn't great either. For a start, we are signalling required versus optional status using color alone, which isn't great for colorblind people. Second, the standard convention on the web for required status is an asterisk (*), or the word "required" being associated with the controls in question.</p> -<p>In the next section we'll look at a better example of indicating required fields using <code>:required</code>, which also digs into using generated content.</p> +<p>In the next section, we'll look at a better example of indicating required fields using <code>:required</code>, which also digs into using generated content.</p> <div class="blockIndicator note"> <p><strong>注</strong>: You'll probably not find yourself using the <code>:optional</code> pseudo-class very often. Form controls are optional 既定では, so you could just do your optional styling 既定では, and add styles on top for required controls.</p> @@ -112,7 +112,7 @@ input:optional { <h2 id="Using_generated_content_with_pseudo-classes" name="Using_generated_content_with_pseudo-classes">疑似クラスでコンテンツを生成する</h2> -<p>In previous articles we've seen usage of <a href="/ja/docs/Web/CSS/CSS_Generated_Content">generated content</a>, but we thought now would be a good time to talk about it in a bit more detail.</p> +<p>In previous articles, we've seen the usage of <a href="/ja/docs/Web/CSS/CSS_Generated_Content">generated content</a>, but we thought now would be a good time to talk about it in a bit more detail.</p> <p>The idea is that we can use the <code><a href="/ja/docs/Web/CSS/::before">::before</a></code> and <code><a href="/ja/docs/Web/CSS/::after">::after</a></code> pseudo-elements along with the <code><a href="/ja/docs/Web/CSS/content">content</a></code> property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so is invisible to screenreaders; it is part of the document's styles. Because it is a pseudo element, it can be targetted with styles in the same way that any actual DOM node can.</p> @@ -158,7 +158,7 @@ input[type="radio"]:checked::before { <span></span> </div></pre> -<p>The immediate problem with this was that the span was dropping onto a new line below the input, because the input and label are both set with <code>width: 100%</code>. To fix this we style the parent <code><div></code> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long:</p> +<p>The immediate problem with this was that the span was dropping onto a new line below the input because the input and label are both set with <code>width: 100%</code>. To fix this we style the parent <code><div></code> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long:</p> <pre class="brush: css notranslate">fieldset > div { margin-bottom: 20px; @@ -263,7 +263,7 @@ input:valid + span::before { <p><strong>注</strong>: Numeric input types are <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>.</p> </div> -<p>It is worth noting that inputs whose data is in-range will also be matched by the <code>:valid</code> pseudo-class, and inputs whose data is out-of-range will also be matched by the <code>:invalid</code> pseudo-class. So why have both? The issue is really one of semantics — out-of-range is a more specific type of invalid communication, so you might want to provide a different message for out-of-range inputs, which will be more helpful to users than just saying "invalid". You might even want to provide both.</p> +<p>It is worth noting that inputs whose data is in-range will also be matched by the <code>:valid</code> pseudo-class and inputs whose data is out-of-range will also be matched by the <code>:invalid</code> pseudo-class. So why have both? The issue is really one of semantics — out-of-range is a more specific type of invalid communication, so you might want to provide a different message for out-of-range inputs, which will be more helpful to users than just saying "invalid". You might even want to provide both.</p> <p>Let's look at an example that does exactly this. Our <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/out-of-range.html">out-of-range.html</a> demo (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/out-of-range.html">source code</a>) builds on top of the previous example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required.</p> @@ -362,7 +362,7 @@ input:out-of-range + span::after { <div><button>Submit</button></div> </form></pre> -<p>Now onto the CSS. The most relevant parts to this example are as follows:</p> +<p>Now onto the CSS. The most relevant parts of this example are as follows:</p> <pre class="brush: css notranslate">input[type="text"]:disabled { background: #eee; @@ -424,26 +424,27 @@ function toggleBilling() { value="Mr Soft" readonly> </div></pre> -<p>If you try the live example, you'll see that the top set of form elements are not focusable, however the values are submitted when the form is submitted. We've also styled the read-only form controls using the <code>:read-only</code> pseudo-class, like so:</p> +<p>If you try the live example, you'll see that the top set of form elements are not focusable, however the values are submitted when the form is submitted. We've styled the form controls using the <code>:read-only</code> and <code>:read-write</code> pseudo-classes, like so:</p> -<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only { - border: 0; - box-shadow: none; - resize: none; - background-color: white; +<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only, +input:read-only, textarea:read-only { + border: 0; + box-shadow: none; + background-color: white; } -input:read-only, textarea:read-only { - border: 0; - box-shadow: none; - resize: none; - background-color: white; +textarea:-moz-read-write, +textarea:read-write { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; }</pre> -<p>Yes, you've guessed it — Firefox only supports it with a prefix, hence having to double up the ruleset.</p> +<p>Firefox only supported these pseudo-classes with a prefix up to version 78; at which point it started to support the unprefixed version. The full example looks like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p> <div class="blockIndicator note"> -<p><strong>注</strong>: <code>:enabled</code> and <code>read-write</code> are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements.</p> +<p><strong>注</strong>: <code>:enabled</code> and <code>:read-write</code> are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements.</p> </div> <h2 id="ラジオとチェックボックスの状態_—_チェック済み、既定、中間">ラジオとチェックボックスの状態 — チェック済み、既定、中間</h2> @@ -459,7 +460,7 @@ input:read-only, textarea:read-only { <p>When checked, they will be matched by the {{cssxref(":checked")}} pseudo-class.</p> -<p>The most common use of this is to add a different style onto the checkbox/radiobutton when it is checked, in cases where you've removed the system default styling with <code>appearance: none;</code> and want to build the styles back up yourself. We saw examples of this in the previous article, when we talked about <a href="/ja/docs/Learn/Forms/Advanced_form_styling#Using_appearence_none_on_radioscheckboxes">Using <code>appearence: none</code> on radios/checkboxes</a>.</p> +<p>The most common use of this is to add a different style onto the checkbox/radiobutton when it is checked, in cases where you've removed the system default styling with <code>appearance: none;</code> and want to build the styles back up yourself. We saw examples of this in the previous article when we talked about <a href="/ja/docs/Learn/Forms/Advanced_form_styling#Using_appearence_none_on_radioscheckboxes">Using <code>appearence: none</code> on radios/checkboxes</a>.</p> <p>As a recap, the <code>:checked</code> code from our <a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">Styled radio buttons</a> example looks like so:</p> @@ -586,6 +587,10 @@ input:default ~ span::after { <li>The <code><a href="https://drafts.csswg.org/selectors-4/#user-invalid-pseudo">:user-invalid</a></code> pseudo-class, when supported, will be similar to {{cssxref(":invalid")}}, but with better user experience. If the value is valid when the input receives focus, the element may match <code>:invalid</code> as the user enters data if the value is temporarily invalid, but will only match <code>:user-invalid</code> when the element loses focus. If the value was originally invalid, it will match both <code>:invalid</code> and <code>:user-invalid</code> for the whole duration of the focus. In a similar manner to <code>:invalid</code>, it will stop matching <code>:user-invalid</code> if the value does become valid.</li> </ul> +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> + <h2 id="Summary" name="Summary">まとめ</h2> <p>This completes our look at UI pseudo-classes that relate to form inputs. Keep playing with them, and create some fun form styles! Next up, we'll move on to something different — <a href="/ja/docs/Learn/Forms/Form_validation">client-side form validation</a>.</p> diff --git a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html index 79ddcd712b..d37df09dd3 100644 --- a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -124,7 +124,7 @@ translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features <ul> <li>最後の 2行を削除します。後で見られるように、別の方法で邪悪な円を動かすので、フレーム毎に邪悪な円の位置を自動的に更新する必要はありません。</li> - <li>テストが true を返す場合、<code>if()</code> ステートメントの内部で<code>velX</code>/<code>velY</code> を更新したくありません。代わりに <code>x</code>/<code>y</code> の値を変更して、邪悪な円が画面上に少し跳ね返ってくるようにします。邪悪な円の size プロパティを（必要に応じて）増減させることは理にかなっています。</li> + <li><code>if()</code> ステートメントの内部でそのテストが true を返す場合、<code>velX</code>/<code>velY</code> を更新したくありません。代わりに <code>x</code>/<code>y</code> の値を変更して、邪悪な円が画面内に少し跳ね返ってくるようにしたいのです。邪悪な円の size プロパティを（適切に）加えたり減じたりすることは理にかなっています。</li> </ul> <h4 id="setControls" name="setControls"><code>setControls()</code></h4> diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html index 7830f5a676..fefcbaa131 100644 --- a/files/ja/learn/javascript/objects/inheritance/index.html +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -38,7 +38,7 @@ translation_of: Learn/JavaScript/Objects/Inheritance <p>ここまで動作している継承 ー プロトタイプチェーンがどのように動作するか、どのようにメンバーが繋がるチェーンから継承されるのかを見てきました。しかし、これらの大半はブラウザーの組み込み関数で実行されています。我々が他のオブジェクトから継承したオブジェクトを作成するには JavaScript でどのようにするのでしょうか。</p> -<p>具体的な例をjj使ってどのようの継承が行われているかを見てゆきましょう。</p> +<p>具体的な例を使ってどのようの継承が行われているかを見てゆきましょう。</p> <h2 id="Getting_started" name="Getting_started">さあ始めてみよう</h2> @@ -81,7 +81,7 @@ translation_of: Learn/JavaScript/Objects/Inheritance this.subject = subject; }</pre> -<p>これは多くの点で Person コンストラクタと似ていますが、これまでに見てきたものと異なったものがあります— <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 関数です。この関数は基本的にその他の場所 (ただし現在のコンテキスト) で定義された関数から呼ぶことができます。最初の引数は関数を実行するときに使用することのできる <code>this</code> の値を表します、また他の引数は実行される関数に渡されるべき値です。</p> +<p>これは多くの点で Person コンストラクタと似ていますが、これまでに見てきたものと異なったものがあります— <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 関数です。この関数は基本的に別の場所で定義された関数を、しかし現在のコンテキストで呼び出すことができます。最初の引数は関数を実行するときに使用したい <code>this</code> の値を指定します、また他の引数は実行される関数に渡されるべき値です。</p> <p><code>Teacher()</code> コンストラクタは継承元の <code>Person()</code> コンストラクタと同じ引数を取りたいため、 <code>call()</code> を呼び出して、すべての引き数を引数として渡します。</p> diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.html b/files/ja/learn/javascript/objects/object_prototypes/index.html index 4e9419e49d..af08b53692 100644 --- a/files/ja/learn/javascript/objects/object_prototypes/index.html +++ b/files/ja/learn/javascript/objects/object_prototypes/index.html @@ -41,11 +41,11 @@ translation_of: Learn/JavaScript/Objects/Object_prototypes <h2 id="プロトタイプベースの言語とは">プロトタイプベースの言語とは?</h2> -<p>JavaScript はしばしば<strong>プロトタイプベースの言語</strong>として記述されます - 継承を提供するために、オブジェクトはメソッドやプロパティを継承するテンプレートオブジェクトとして機能する <strong><code>prototype</code> オブジェクト</strong>を持つことができます。</p> +<p>JavaScript はしばしば<strong>プロトタイプベースの言語</strong>として記述されます - 継承機能を提供するため、オブジェクトは <strong><code>prototype</code></strong> <strong>オブジェクト </strong>を持つことができます。これはテンプレートオブジェクトとして機能し、そこからメソッドやプロパティを継承します。</p> -<p>オブジェクトのプロトタイプオブジェクトは、メソッドやプロパティを継承するプロトタイプオブジェクトを持つことができます。これはしばしば<strong>プロトタイプチェーン</strong>と呼ばれ、異なるオブジェクトが他のオブジェクトに定義されたプロパティやメソッドを持つ理由を説明しています。</p> +<p>オブジェクトのプロトタイプオブジェクトもまたメソッドやプロパティを継承するプロトタイプオブジェクトを持つことができます。これはしばしば<strong>プロトタイプチェーン</strong>と呼ばれ、異なるオブジェクトが他のオブジェクトに定義されたプロパティやメソッドを持つ理由を説明しています。</p> -<p>JavaScript では、オブジェクトのインスタンスとプロトタイプ (コンストラクタの <code>prototype</code> プロパティから派生した <code>__proto__</code> プロパティ) の間にリンクが張られており、プロパティとメソッドはプロトタイプの連鎖を辿って見つけられます。</p> +<p>JavaScript では、あるオブジェクトのインスタンスとそのプロトタイプ (コンストラクタの <code>prototype</code> プロパティから派生した <code>__proto__</code> プロパティ) の間にリンクが張られており、そのプロパティとメソッドはプロトタイプの連鎖を辿って発見されます。</p> <div class="note"> <p><strong>Note:</strong> <strong>オブジェクトの <code>prototype</code></strong> (<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(<var>obj</var>)</a></code> または非推奨の <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> プロパティで取得可能) と<strong>コンストラクタ関数の<code>prototype</code> プロパティ</strong>の違いを理解することが重要です。</p> diff --git a/files/ja/mozilla/firefox/releases/83/index.html b/files/ja/mozilla/firefox/releases/83/index.html index cfa83930bf..26f5cb6ca1 100644 --- a/files/ja/mozilla/firefox/releases/83/index.html +++ b/files/ja/mozilla/firefox/releases/83/index.html @@ -12,6 +12,10 @@ translation_of: Mozilla/Firefox/Releases/83 <p class="summary">このページでは、開発者に影響する Firefox 83 の変更点をまとめています。Firefox 83 は、2020 年 11 月 17 日にリリースされました。</p> +<div class="blockIndicator note"> +<p class="summary"><strong>注記</strong>: Mozilla hacks の <a href="https://hacks.mozilla.org/2020/11/firefox-83-is-upon-us/">Firefox 83 is upon us</a> もご覧ください。</p> +</div> + <h2 id="Changes_for_web_developers" name="Changes_for_web_developers">ウェブ開発者向けの変更点一覧</h2> <h3 id="Developer_Tools" name="Developer_Tools">開発者ツール</h3> diff --git a/files/ja/mozilla/firefox/releases/84/index.html b/files/ja/mozilla/firefox/releases/84/index.html index c0cf8feff6..d72844fce0 100644 --- a/files/ja/mozilla/firefox/releases/84/index.html +++ b/files/ja/mozilla/firefox/releases/84/index.html @@ -10,19 +10,19 @@ translation_of: Mozilla/Firefox/Releases/84 --- <p>{{FirefoxSidebar}}</p> -<p class="summary">このページでは、開発者に影響する Firefox 84 の変更点をまとめています。Firefox 84 は現在 <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Nightly バージョン</a> であり、米国時間 <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">2020 年 12 月 15 日</a> にリリースする予定です。</p> +<p class="summary">このページでは、開発者に影響する Firefox 84 の変更点をまとめています。Firefox 84 は現在 <a href="https://www.mozilla.org/firefox/channel/desktop/#beta">Beta バージョン</a> であり、米国時間 <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">2020 年 12 月 15 日</a> にリリースする予定です。</p> <h2 id="Changes_for_web_developers" name="Changes_for_web_developers">ウェブ開発者向けの変更点一覧</h2> <h3 id="Developer_Tools" name="Developer_Tools">開発者ツール</h3> <ul> - <li>Firefox の <a href="/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a> で、ウェブページの <a href="/ja/docs/Tools/Accessibility_inspector##Show_web_page_tabbing_order">タブオーダー</a> の表示をサポートしました。ページがキー操作でどのようなナビゲーションになるかを、単にリンクをタブ移動するよりも高レベルな概要で示します。({{bug(1654956)}})</li> + <li>Firefox の <a href="/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a> で、ウェブページの <a href="/ja/docs/Tools/Accessibility_inspector##Show_web_page_tabbing_order">タブオーダー</a> の表示をサポートしました。ページがキー操作でどのようなナビゲーションになるかを、単にリンクをタブ移動するよりも高レベルな概要で示します ({{bug(1654956)}})。</li> </ul> <h3 id="HTML" name="HTML">HTML</h3> -<h4 id="Removals" name="Removals">廃止</h4> +<p><em>変更なし。</em></p> <h3 id="CSS" name="CSS">CSS</h3> @@ -30,7 +30,7 @@ translation_of: Mozilla/Firefox/Releases/84 <li>{{cssxref(":not()")}} 疑似クラスで、複雑なセレクターをサポートしました ({{bug(933562)}})。</li> </ul> -<h4 id="Removals_2" name="Removals_2">廃止</h4> +<h4 id="Removals" name="Removals">廃止</h4> <ul> <li>独自仕様である <code>-moz-default-appearance</code> プロパティの値 <code>scrollbar-small</code> (代わりに <code>scrollbar-width: thin</code> を使用します) および <code>scrollbar</code> (macOS 限定。代わりに <code>scrollbar-horizontal</code> や <code>scrollbar-vertical</code> を使用します) を削除しました ({{bug(1673132)}})。</li> @@ -38,23 +38,18 @@ translation_of: Mozilla/Firefox/Releases/84 <h3 id="JavaScript" name="JavaScript">JavaScript</h3> -<p><em>変更なし。</em></p> - -<h4 id="Removals_3" name="Removals_3">廃止</h4> - -<h3 id="HTTP" name="HTTP">HTTP</h3> - <ul> - <li></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat"><code>Intl.DateTimeFormat()</code> コンストラクター</a> の引数として指定する独自の日時書式に、<code>fractionalSecondDigits</code> (秒の端数として表示する桁数) を含めることが可能になりました ({{bug(1645107)}})。</li> </ul> -<h4 id="Removals_4" name="Removals_4">廃止</h4> +<h3 id="HTTP" name="HTTP">HTTP</h3> + +<p><em>変更なし。</em></p> <h3 id="Security" name="Security">セキュリティ</h3> <ul> - <li>Firefox で <em>http://localhost/</em> や <em>http://dev.localhost/</em> のような <code>localhost</code> URL が、ローカルホストのループバックインターフェイス (例えば <em>http://127.0.0.1</em>) を参照するものとして保証されるようになりました。この結果、<code>localhost</code> から読み込まれるリソースが安全に提供された (<a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> を参照) とみなされ、<a href="/ja/docs/Web/Security/Mixed_content">混在コンテンツ</a> として扱われなくなります。({{bug(1220810)}}, {{bug(1488740)}})</li> - <li>Firefox が、安全なページで <a href="/ja/docs/Web/Security/Mixed_content#Upgrading_mixed-display_resources">混在表示コンテンツを自動的に HTTP から HTTPS に切り替える</a> ようになりました。切り替えに失敗した (メディアのホストが HTTPS をサポートしないため) 場合は、メディアが読み込まれません。また、切り替えが成功したことを示す警告を新たにコンソールへ表示します。({{bug(1633743)}}, {{bug(1435733)}})</li> + <li>Firefox で <em>http://localhost/</em> や <em>http://dev.localhost/</em> のような <code>localhost</code> URL が、ローカルホストのループバックインターフェイス (例えば <em>http://127.0.0.1</em>) を参照するものとして保証されるようになりました。この結果、<code>localhost</code> から読み込まれるリソースが安全に提供された (<a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> を参照) とみなされ、<a href="/ja/docs/Web/Security/Mixed_content">混在コンテンツ</a> として扱われなくなります ({{bug(1220810)}}, {{bug(1488740)}})。</li> </ul> <h3 id="APIs" name="APIs">API</h3> @@ -64,30 +59,28 @@ translation_of: Mozilla/Firefox/Releases/84 <li>{{domxref('Navigator.registerProtocolHandler()')}} メソッドが、<code>scheme</code> と <code>url</code> の 2 つの引数のみ受け入れるようになりました。<code>title</code> は削除されました ({{bug(1631464)}})。</li> </ul> -<h4 id="DOM" name="DOM">DOM</h4> - <h4 id="Media_WebRTC_and_Web_Audio" name="Media_WebRTC_and_Web_Audio">Media、WebRTC、Web Audio</h4> <ul> - <li>{{domxref('MediaRecorder.start()')}} メソッドで、記録されているストリームのいくつかのトラックが変更されたときに <code>InvalidModificationError</code> が発生するようになりました。({{bug(1581139)}})</li> + <li>{{domxref('MediaRecorder.start()')}} メソッドで、記録されているストリームのいくつかのトラックが変更されたときに <code>InvalidModificationError</code> が発生するようになりました ({{bug(1581139)}})。</li> </ul> -<h4 id="Removals_5" name="Removals_5">廃止</h4> +<h4 id="Removals_2" name="Removals_2">廃止</h4> + +<ul> + <li><a href="/ja/docs/Web/HTML/Using_the_application_cache">アプリケーションキャッシュ</a> を削除しました。開発者は、代わりに <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> を使用してください ({{bug(1619673)}})。</li> +</ul> <h3 id="WebAssembly" name="WebAssembly">WebAssembly</h3> <p><em>変更なし。</em></p> -<h4 id="Removals_6" name="Removals_6">廃止</h4> - <h2 id="Changes_for_add-on_developers" name="Changes_for_add-on_developers">アドオン開発者向けの変更点</h2> <ul> - <li><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browsingData/remove">browsingData.remove</a></code> API が、<code>cookieStoreId</code> でデータ型のサブセットの削除をサポートしました。</li> + <li><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browsingData/remove">browsingData.remove()</a></code> API が、<code>cookieStoreId</code> でデータ型のサブセットの削除をサポートしました。</li> </ul> -<h4 id="Removals_7" name="Removals_7">廃止</h4> - <h2 id="Older_versions" name="Older_versions">過去のバージョン</h2> <p>{{Firefox_for_developers(83)}}</p> diff --git a/files/ja/web/api/clipboard/index.html b/files/ja/web/api/clipboard/index.html index cd25f411b6..c4cf3e26d4 100644 --- a/files/ja/web/api/clipboard/index.html +++ b/files/ja/web/api/clipboard/index.html @@ -59,7 +59,7 @@ translation_of: Web/API/Clipboard <p>例えば、Firefox はまだ <code>"clipboard-read"</code> と <code>"clipboard-write"</code> パーミッションをサポートしていないため、これとは異なる方法でクリップボードの内容にアクセスし変更するメソッドへのアクセスを制限します。</p> -<p>WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。ウェブサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。<a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">Extensions in Firefox 63</a> を参照してください。</p> +<p>WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。HTTPサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。<a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">Extensions in Firefox 63</a> を参照してください。</p> <p>また、{{domxref("Clipboard.read", "read()")}} と {{domxref("Clipboard.write", "write()")}} はデフォルトで無効にされており、これらを有効にするには設定を変更する必要があります。これらを使う前にブラウザー実装状況の表を確認してください。</p> diff --git a/files/ja/web/css/content-visibility/index.html b/files/ja/web/css/content-visibility/index.html new file mode 100644 index 0000000000..d480c67fed --- /dev/null +++ b/files/ja/web/css/content-visibility/index.html @@ -0,0 +1,119 @@ +--- +title: content-visibility +slug: Web/CSS/content-visibility +translation_of: Web/CSS/content-visibility +--- +<p>{{CSSRef}}</p> + +<p><span style="">content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。</span></p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>文法</strong></span></font></p> + + + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +content-visibility: visible; +content-visibility: hidden; +content-visibility: auto; + +/* Global values */ +content-visibility: initial; +content-visibility: unset; +</pre> + + + +<h3 id="値">値</h3> + +<dl> + <dt><code>visible</code></dt> + <dd> + <p dir="ltr" id="tw-target-text">無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。</p> + + + </dd> + <dt><code>hidden</code></dt> + <dd> + <p dir="ltr" id="tw-target-text">要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、<code>display: none</code>をコンテンツに与えるのと似ています。</p> + + + </dd> + <dt><code>auto</code></dt> + <dd> + <p>この要素は、レイアウトの封じ込め、スタイルの封じ込め、およびペイントの封じ込めをオンにします。要素がユーザーに関連していない場合は、その内容もスキップします。非表示とは異なり、スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能に対して通常どおり利用可能である必要があり、通常どおりフォーカス可能で選択可能である必要があります。</p> + </dd> +</dl> + +<h2 id="例"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>例</strong></span></font></h2> + +<h3 dir="ltr" id="autoを使用して長いページのレンダリングコストを削減">autoを使用して長いページのレンダリングコストを削減</h3> + +<p dir="ltr" id="tw-target-text">次の例は、autoを使用して画面外のセクションのペイントとレンダリングをスキップする方法を示しています。ビューポート外のコンテンツはレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。</p> + +<pre class="brush: html notranslate"><style> +section { + content-visibility: auto; + contain-intrinsic-size: 0 500px; +} + +<section>... +<section>... +<section>... +<section>... +... +</pre> + +<h3 dir="ltr" id="hiddenを使用して手動で可視性を管理">hiddenを使用して手動で可視性を管理</h3> + +<p>次の例は、スクリプトで可視性を管理できることを示しています。たとえば、display：noneの代わりにcontent-visiblity：hiddenを使用することの追加の利点は、content-visibilityで非表示にしたときにレンダリングされたコンテンツがレンダリング状態を保持することです。これは、コンテンツが再度表示される場合、他のコンテンツよりも速くレンダリングされることを意味します。</p> + +<pre class="brush: html notranslate"><style> +.hidden { + content-visibility: hidden; + /* 非表示の場合、要素のサイズを0x500pxサイズの子が1つあるかのようにします */ + contain-intrinsic-size: 0 500px; +} +.visible { + content-visibility: visible; + /* これは、.hiddenと.visibleを切り替えるときにレイアウトがシフトしないようにするためです */ + contain: style layout paint; +} + + + +<div class=hidden>... +<div class=visible>... +<div class=hidden>... +<div class=hidden>... +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Containment 2', '#content-visibility')}}</td> + <td>{{Spec2('CSS Containment 2')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.content-visibility")}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="https://web.dev/content-visibility/">content-visibility: the new CSS property that boosts your rendering performance</a> (web.dev)</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html b/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html index e32c959169..737c53f023 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html @@ -11,27 +11,41 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolv --- <div>{{JSRef}}</div> -<p>ローケルを反映しているプロパティとこの{{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}オブジェクトの初期化中に計算された数値変換オプションをもった新しいオブジェクトを返します。</p> +<p><strong><code>Intl.NumberFormat.prototype.resolvedOptions()</code></strong> メソッドは、この {{jsxref("NumberFormat")}} オブジェクトの初期化時に計算されたロケールと数値整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。</p> -<h2 id="構文">構文</h2> +<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}</div> -<pre class="syntaxbox"><code><var>numberFormat</var>.resolvedOptions()</code></pre> +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> -<h2 id="説明">説明</h2> +<h2 id="Syntax" name="Syntax">構文</h2> -<p>ローケルを反映しているプロパティとこの{{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}オブジェクトの初期化中に計算された数値変換オプションをもった新しいオブジェクトを返します。オブジェクトは次のプロパティを持っています。:</p> +<pre class="syntaxbox notranslate"><var>numberFormat</var>.resolvedOptions()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>この {{jsxref("NumberFormat")}} オブジェクトの初期化時に計算されたロケールと数値整形オプションを反映したプロパティを持つ新しいオブジェクトです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>返されるオブジェクトには以下のプロパティがあります。</p> <dl> <dt><code>locale</code></dt> - <dd>実際に使われているローケルに対するBCP47言語タグ。Unicode表現値が入力BCP47言語タグでリクエストされたら、このローケルに対してリクエストされサポートされているキー／バリューペアは<code>locale</code>に含まれます。</dd> + <dd>実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが <code>locale</code> に含まれます。</dd> <dt><code>numberingSystem</code></dt> - <dd>Unicode表現キー<code>"nu"</code>を使うかデフォルトとして設定される値。</dd> - <dt><code>style</code></dt> + <dd>もし存在すれば、 <code>options</code> 引数でこのプロパティに指定された値、または Unicode 拡張キーの <code>"nu"</code> を使って要求された値、または既定として設定される値です。</dd> + <dt><code>notation</code></dt> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される <code>standard</code> です。</dd> + <dt><code>compactDisplay</code></dt> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される <code>short</code> です。</dd> + <dd>このプロパティは <code>notation</code> が "compact" に設定されている場合のみ存在します。</dd> + <dt><code>signDisplay</code></dt> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される <code>auto</code> です。</dd> <dt><code>useGrouping</code></dt> - <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。</dd> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される値。</dd> <dt><code>currency</code></dt> <dt><code>currencyDisplay</code></dt> - <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。<code>style</code>が<code>"currency"</code>の場合のみ、これらのプロパティは存在しています。</dd> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される値。<code>style</code>が<code>"currency"</code>の場合のみ、これらのプロパティは存在しています。</dd> </dl> <p>次の２つのプロパティのグループのうちどちらかのみが含まれています。:</p> @@ -40,21 +54,23 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolv <dt><code>minimumIntegerDigits</code></dt> <dt><code>minimumFractionDigits</code></dt> <dt><code>maximumFractionDigits</code></dt> - <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。<code>minimumSignificantDigits</code>または<code>maximumSignificantDigits</code>が<code>options</code>引数で提供されなかった場合のみ、これらのプロパティは存在しています。</dd> + <dd><code>options</code> 引数でプロパティに対して提供されるか既定で設定される値。 <code>minimumSignificantDigits</code> または <code>maximumSignificantDigits</code> が <code>options</code> 引数で提供されなかった場合のみ、これらのプロパティは存在しています。</dd> <dt><code>minimumSignificantDigits</code></dt> <dt><code>maximumSignificantDigits</code></dt> <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。 これらのプロパティのうち少なくとも１つが<code>options</code>引数で提供された場合のみ、これらのプロパティは存在しています。</dd> </dl> -<h2 id="例">例</h2> +<h2 id="Examples" name="Examples">例</h2> -<h3 id="resolvedOptions_メソッドを使う"><code>resolvedOptions</code> メソッドを使う</h3> +<h3 id="Using_the_resolvedOptions_method" name="Using_the_resolvedOptions_method">resolvedOptions メソッドの使用</h3> -<pre class="brush: js">var de = new Intl.NumberFormat('de-DE'); +<pre class="brush: js notranslate">var de = new Intl.NumberFormat('de-DE'); var usedOptions = de.resolvedOptions(); usedOptions.locale; // "de-DE" usedOptions.numberingSystem; // "latn" +usedOptions.notation; // "standard" +usedOptions.signDisplay; // "auto" usedOption.style; // "decimal" usedOptions.minimumIntegerDigits; // 1 usedOptions.minimumFractionDigits; // 0 @@ -62,77 +78,28 @@ usedOptions.maximumFractionDigits; // 3 usedOptions.useGrouping; // true </pre> -<h2 id="仕様">仕様</h2> +<h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <tbody> <tr> - <th scope="col">仕様</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> + <th scope="col">仕様書</th> </tr> <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Initial definition.</td> + <td>{{SpecName('ES Int Draft', '#sec-intl.numberformat.prototype.resolvedoptions', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td> </tr> </tbody> </table> -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div>{{CompatibilityTable}}</div> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td>{{CompatNo}}<br> - {{bug("864843")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> +<p>{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}</p> </div> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> diff --git a/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html index 8108241d0b..866ceb218c 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html @@ -8,76 +8,78 @@ tags: - NumberFormat translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf --- -<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div> +<p>{{JSRef}}</p> + +<p><strong><code>Intl.ListFormat.supportedLocalesOf()</code></strong> メソッドは、ランタイムの既定のロケールで代替する必要なく数値の書式で対応されているものを含む配列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html","shorter")}}</div> -<h2 id="概要">概要</h2> -<p>ランタイムのデフォルトローケルに戻る必要なしで数値変換でサポートされる提供されたローケルを含んでいる配列を返します。</p> <h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre> +<pre class="syntaxbox notranslate">Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre> <h3 id="Parameters" name="Parameters">引数</h3> <dl> - <dt><code>locales</code></dt> - <dd>BCP47言語タグをもった文字列、そのような文字列の配列。<code>locales</code>引数の一般的な形式に対して、{{jsxref("Global_Objects/Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}を確認して下さい。</dd> - <dt><code>options</code></dt> + <dt><code><var>locales</var></code></dt> + <dd>BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 <code>locales</code> 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。</dd> + <dt><code><var>options</var></code></dt> <dd> - <p>任意。次のプロパティを持つオブジェクト:</p> + <p>省略可能です。以下のプロパティを持つことがあるオブジェクトです。</p> <dl> <dt><code>localeMatcher</code></dt> - <dd>使用するローケルマッチングアルゴリズム。利用可能な値は<code>"lookup"</code> や <code>"best fit"</code>です。デフォルトは<code>"best fit"</code>です。このオプションについての情報のために、{{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}を確認して下さい。</dd> + <dd>使用するロケールの一致アルゴリズムです。指定可能な値は <code>lookup</code> および <code>best fit</code> で、既定値は <code>best fit</code> です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。</dd> </dl> </dd> </dl> -<h2 id="説明">説明</h2> +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく数値の書式で対応されているものを含みます。</p> -<p><code>locales</code>で提供された言語パックのサブセットをもった配列を返します。返される言語タグでは、ランタイムが使われているローケルマッチングアルゴリズムが考慮して数値変換でローケルをサポートしているので、デフォルトローケルに戻る必要はありません。</p> +<h2 id="Description" name="Description">解説</h2> -<h2 id="例">例</h2> +<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが数値のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> -<h3 id="例_supportedLocalesOfを使う">例: <code>supportedLocalesOf</code>を使う</h3> +<h2 id="Examples" name="Examples">例</h2> -<p>数値フォーマットで、バリ語ではなく、インドネシア語とドイツ語をサポートしているランタイムを仮定すると、<code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを返します。<code>pinyin</code> は数値フォーマットには適切ではなくインドネシア語では使われていません。インドネシアの特定のドイツ語はサポートされそうにもありません。<code>"lookup"</code>アルゴリズムの指定に注意して下さい。<code>"best fit"</code> はインドネシア語はバリ語に対して、十分にふさわしいと決定するかもしれません。というのも、 ほとんどのバリの人はインドネシア語も理解するからです。それゆえバリ言語タグも同様に返します。</p> +<h3 id="Using_supportedLocalesOf" name="Using_supportedLocalesOf">supportedLocalesOf() の使用</h3> -<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID']; +<p>数値の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 <code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 <code>pinyin</code> の照合は数値の書式には関係なく、インドネシア語でも使用されません。ここでの <code>lookup</code> アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 <code>best fit</code> のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。</p> + +<pre class="brush: js notranslate">var locales = ['ban', 'id-u-co-pinyin', 'de-ID']; var options = { localeMatcher: 'lookup' }; console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(', ')); // → "id-u-co-pinyin, de-ID" </pre> -<h2 id="仕様">仕様</h2> +<h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> - <tbody> + <thead> <tr> - <th scope="col">仕様</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> + <th scope="col">仕様書</th> </tr> + </thead> + <tbody> <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Initial definition.</td> + <td>{{SpecName('ES Int Draft', '#sec-intl.numberformat.supportedlocalesof', 'Intl.NumberFormat.supportedLocalesOf')}}</td> </tr> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div> -<div> - +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> <p>{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}</p> </div> -</div> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> |