,
<input>
,
- <keygen>
,
<object>
,
<output>
web components en anglais) permettent de
> **Attention :** Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. **Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.** Ces éléments uniquement sont listés ici à des fins d'information.
-| Élément | Description |
-| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [``](/fr/docs/Web/HTML/Element/acronym) | Permet d'indiquer une séquence de caractères composant un acronyme ou une abréviation. |
-| [``](/fr/docs/Web/HTML/Element/applet) | Embarque un applet Java dans le document. Remplacé par [``](/fr/docs/Web/HTML/Element/object). |
-| [``](/fr/docs/Web/HTML/Element/bgsound) | Un son diffusé en arrière-plan lorsque la page est utilisée. Remplacé par [``](/fr/docs/Web/HTML/Element/audio) |
-| [``](/fr/docs/Web/HTML/Element/big) | Affiche le texte avec une taille plus grande que le texte environnant. |
-| [``](/fr/docs/Web/HTML/Element/blink) | Le texte concerné clignote lentement. |
-| [``](/fr/docs/Web/HTML/Element/center) | Le contenu en ligne ou de bloc est centré horizontalement dans l'élément englobant. |
-| [``](/fr/docs/Web/HTML/Element/content) | Utilisé comme point d'insertion dans le DOM sombre. Remplacé par [``](/fr/docs/Web/HTML/Element/slot) |
-| [``](/fr/docs/Web/HTML/Element/dir) | Un index de fichiers et de répertoires. Il faut utiliser [` `](/fr/docs/Web/HTML/Element/ul) à la place pour représenter les listes de fichiers. |
-| [``](/fr/docs/Web/HTML/Element/font) | Définit la taille de la police, sa couleur et son type. |
-| [` `](/fr/docs/Web/HTML/Element/frame) | Définit une zone particulière dans laquelle un autre document HTML est affiché. Une ` ` (un « cadre » en français) doit être utilisée dans un élément [``](/fr/docs/Web/HTML/Element/frameset). |
-| [``](/fr/docs/Web/HTML/Element/frameset) | Utilisé pour contenir plusieurs éléments [` `](/fr/docs/Web/HTML/Element/frame). |
-| [``](/fr/docs/Web/HTML/Element/image) | Remplacé par [` `](/fr/docs/Web/HTML/Element/Img). |
-| [``](/fr/docs/Web/HTML/Element/Keygen) | Existe afin de faciliter la génération de clés et l'envoi d'une clé publique via [un formulaire HTML](/fr/docs/Learn/Forms). Le mécanisme utilisé est conçu pour être utilisé avec les systèmes de gestion de certificats électroniques. L'élément `keygen` est prévu pour être utilisé dans un formulaire HTML avec d'autres informations permettant de construire une requête de certificat, le résultat du processus étant un certificat signé. |
-| [``](/fr/docs/Web/HTML/Element/marquee) | Utilisé pour insérer une zone de texte défilant. |
-| [``](/fr/docs/Web/HTML/Element/menuitem) | Représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton. |
-| [``](/fr/docs/Web/HTML/Element/nobr) | Évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité. |
-| [``](/fr/docs/Web/HTML/Element/noembed) | Une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l'élément [``](/fr/docs/Web/HTML/Element/embed) ou des [catégories de contenu](/fr/docs/Web/HTML/Content_categories) qu'un auteur aimerait utiliser. |
-| [``](/fr/docs/Web/HTML/Element/noframes) | Utilisé par les navigateurs qui ne prennent pas en charge les éléments [` `](/fr/docs/Web/HTML/Element/frame), ou qui sont configurés afin de ne pas les prendre en charge. |
-| [` `](/fr/docs/Web/HTML/Element/param) | Définit les paramètres qui peuvent être employés dans un élément [``](/fr/docs/Web/HTML/Element/object). |
-| [``](/fr/docs/Web/HTML/Element/plaintext) | Permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML. |
-| [``](/fr/docs/Web/HTML/Element/rb) | Utilisé afin de délimiter le composant texte de base d'une annotation [``](/fr/docs/Web/HTML/Element/ruby). Autrement dit, le texte qui est annoté. Un élément `` devrait encadrer chaque segment atomique du texte de base. |
-| [``](/fr/docs/Web/HTML/Element/rtc) | Permet d'ajouter des notations Ruby sémantiques. Il est donc proche des éléments liées à la représentation Ruby comme [``](/fr/docs/Web/HTML/Element/rb), [``](/fr/docs/Web/HTML/Element/ruby). Les éléments [``](/fr/docs/Web/HTML/Element/rb) peuvent être annotés pour la prononciation ([``](/fr/docs/Web/HTML/Element/rt)) ou pour la sémantique ([``](/fr/docs/Web/HTML/Element/rtc)). |
-| [``](/fr/docs/Web/HTML/Element/Shadow) | Était utilisé comme un point d'insertion du DOM sombre pour les [composants web](/fr/docs/Web/Web_Components). |
-| [``](/fr/docs/Web/HTML/Element/spacer) | Utilisé pour insérer des blancs au sein d'une page web. Il a été créé par Netscape pour obtenir le même effet que celui qui était créé avec des images GIF d'un pixel, permettant d'ajouter des espaces blancs. Cependant, `` n'est plus pris en charge par les principaux navigateurs principaux et il faut utiliser les règles CSS pour obtenir ces effets d'alignement. |
-| [``](/fr/docs/Web/HTML/Element/strike) | Permet de représenter du texte barré ou avec une ligne le traversant. |
-| [``](/fr/docs/Web/HTML/Element/tt) | Crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s'il apparaissait sur un affichage à largeur fixe tel qu'un téléscripteur. |
-| [``](/fr/docs/Web/HTML/Element/xmp) | Affiche le texte entre les balises de début et de fin, sans interpréter le HTML contenu à l'intérieur en utilisant une police à chasse fixe. La spécification HTML2 recommande un rendu suffisamment large pour permettre 80 caractères par ligne. |
+| Élément | Description |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [``](/fr/docs/Web/HTML/Element/acronym) | Permet d'indiquer une séquence de caractères composant un acronyme ou une abréviation. |
+| [``](/fr/docs/Web/HTML/Element/applet) | Embarque un applet Java dans le document. Remplacé par [``](/fr/docs/Web/HTML/Element/object). |
+| [``](/fr/docs/Web/HTML/Element/bgsound) | Un son diffusé en arrière-plan lorsque la page est utilisée. Remplacé par [``](/fr/docs/Web/HTML/Element/audio) |
+| [``](/fr/docs/Web/HTML/Element/big) | Affiche le texte avec une taille plus grande que le texte environnant. |
+| [``](/fr/docs/Web/HTML/Element/blink) | Le texte concerné clignote lentement. |
+| [``](/fr/docs/Web/HTML/Element/center) | Le contenu en ligne ou de bloc est centré horizontalement dans l'élément englobant. |
+| [``](/fr/docs/Web/HTML/Element/content) | Utilisé comme point d'insertion dans le DOM sombre. Remplacé par [``](/fr/docs/Web/HTML/Element/slot) |
+| [``](/fr/docs/Web/HTML/Element/dir) | Un index de fichiers et de répertoires. Il faut utiliser [` `](/fr/docs/Web/HTML/Element/ul) à la place pour représenter les listes de fichiers. |
+| [``](/fr/docs/Web/HTML/Element/font) | Définit la taille de la police, sa couleur et son type. |
+| [` `](/fr/docs/Web/HTML/Element/frame) | Définit une zone particulière dans laquelle un autre document HTML est affiché. Une ` ` (un « cadre » en français) doit être utilisée dans un élément [``](/fr/docs/Web/HTML/Element/frameset). |
+| [``](/fr/docs/Web/HTML/Element/frameset) | Utilisé pour contenir plusieurs éléments [` `](/fr/docs/Web/HTML/Element/frame). |
+| [``](/fr/docs/Web/HTML/Element/image) | Remplacé par [` `](/fr/docs/Web/HTML/Element/Img). |
+| [``](/fr/docs/Web/HTML/Element/marquee) | Utilisé pour insérer une zone de texte défilant. |
+| [``](/fr/docs/Web/HTML/Element/menuitem) | Représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton. |
+| [``](/fr/docs/Web/HTML/Element/nobr) | Évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité. |
+| [``](/fr/docs/Web/HTML/Element/noembed) | Une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l'élément [``](/fr/docs/Web/HTML/Element/embed) ou des [catégories de contenu](/fr/docs/Web/HTML/Content_categories) qu'un auteur aimerait utiliser. |
+| [``](/fr/docs/Web/HTML/Element/noframes) | Utilisé par les navigateurs qui ne prennent pas en charge les éléments [` `](/fr/docs/Web/HTML/Element/frame), ou qui sont configurés afin de ne pas les prendre en charge. |
+| [` `](/fr/docs/Web/HTML/Element/param) | Définit les paramètres qui peuvent être employés dans un élément [``](/fr/docs/Web/HTML/Element/object). |
+| [``](/fr/docs/Web/HTML/Element/plaintext) | Permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML. |
+| [``](/fr/docs/Web/HTML/Element/rb) | Utilisé afin de délimiter le composant texte de base d'une annotation [``](/fr/docs/Web/HTML/Element/ruby). Autrement dit, le texte qui est annoté. Un élément `` devrait encadrer chaque segment atomique du texte de base. |
+| [``](/fr/docs/Web/HTML/Element/rtc) | Permet d'ajouter des notations Ruby sémantiques. Il est donc proche des éléments liées à la représentation Ruby comme [``](/fr/docs/Web/HTML/Element/rb), [``](/fr/docs/Web/HTML/Element/ruby). Les éléments [``](/fr/docs/Web/HTML/Element/rb) peuvent être annotés pour la prononciation ([``](/fr/docs/Web/HTML/Element/rt)) ou pour la sémantique ([``](/fr/docs/Web/HTML/Element/rtc)). |
+| [``](/fr/docs/Web/HTML/Element/Shadow) | Était utilisé comme un point d'insertion du DOM sombre pour les [composants web](/fr/docs/Web/Web_Components). |
+| [``](/fr/docs/Web/HTML/Element/spacer) | Utilisé pour insérer des blancs au sein d'une page web. Il a été créé par Netscape pour obtenir le même effet que celui qui était créé avec des images GIF d'un pixel, permettant d'ajouter des espaces blancs. Cependant, `` n'est plus pris en charge par les principaux navigateurs principaux et il faut utiliser les règles CSS pour obtenir ces effets d'alignement. |
+| [``](/fr/docs/Web/HTML/Element/strike) | Permet de représenter du texte barré ou avec une ligne le traversant. |
+| [``](/fr/docs/Web/HTML/Element/tt) | Crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s'il apparaissait sur un affichage à largeur fixe tel qu'un téléscripteur. |
+| [``](/fr/docs/Web/HTML/Element/xmp) | Affiche le texte entre les balises de début et de fin, sans interpréter le HTML contenu à l'intérieur en utilisant une police à chasse fixe. La spécification HTML2 recommande un rendu suffisamment large pour permettre 80 caractères par ligne. |
diff --git a/files/fr/web/html/element/label/index.md b/files/fr/web/html/element/label/index.md
index 9fb54d50fa4dc8..9683064e9fdcaf 100644
--- a/files/fr/web/html/element/label/index.md
+++ b/files/fr/web/html/element/label/index.md
@@ -209,4 +209,4 @@ Un élément {{HTMLElement("input")}} avec `type="button"` et un attribut `value
## Voir aussi
-- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/legend/index.md b/files/fr/web/html/element/legend/index.md
index 2edbc0feb8e2ab..29b24552f7163f 100644
--- a/files/fr/web/html/element/legend/index.md
+++ b/files/fr/web/html/element/legend/index.md
@@ -90,5 +90,5 @@ Cet élément contient uniquement [les attributs universels](/fr/docs/Web/HTML/A
## Voir aussi
-- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
- [ARIA : le rôle `form`](/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role)
diff --git a/files/fr/web/html/element/optgroup/index.md b/files/fr/web/html/element/optgroup/index.md
index 713d31fe455020..11c207cb975f64 100644
--- a/files/fr/web/html/element/optgroup/index.md
+++ b/files/fr/web/html/element/optgroup/index.md
@@ -94,4 +94,4 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive
## Voir aussi
-- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/option/index.md b/files/fr/web/html/element/option/index.md
index f44bd3ed73d6d1..0d8dda43aff06f 100644
--- a/files/fr/web/html/element/option/index.md
+++ b/files/fr/web/html/element/option/index.md
@@ -96,4 +96,4 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive
## Voir aussi
-- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/output/index.md b/files/fr/web/html/element/output/index.md
index 9d9bf258ee8cee..a4aa7ce0b4e776 100644
--- a/files/fr/web/html/element/output/index.md
+++ b/files/fr/web/html/element/output/index.md
@@ -107,4 +107,4 @@ Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100
## Voir aussi
-- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/select/index.md b/files/fr/web/html/element/select/index.md
index df1d7f3f609941..d42ba28881ca6e 100644
--- a/files/fr/web/html/element/select/index.md
+++ b/files/fr/web/html/element/select/index.md
@@ -244,5 +244,5 @@ Les utilisateurs du clavier pourront sélectionner des options non-contigües de
## Voir aussi
-- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}
- Les évènements déclenchés par `` : [`input`](/fr/docs/Web/Events/input), [`change`](/fr/docs/Web/Events/change)
diff --git a/files/fr/web/html/element/textarea/index.md b/files/fr/web/html/element/textarea/index.md
index 80c9cb96dc8da6..1736943ade895c 100644
--- a/files/fr/web/html/element/textarea/index.md
+++ b/files/fr/web/html/element/textarea/index.md
@@ -240,4 +240,4 @@ Je suis en lecture seule` qui affiche la chaine de caractères en clignotant.
> **Attention :** Les textes clignotants sont fortement déconseillés par de nombreux standards d'accessibilité. L'élément `` est lui-même non standard et obsolète !
@@ -17,7 +17,7 @@ str.blink();
### Valeur de retour
-Une chaine de caractères représentant un élément HTML {{HTMLElement("blink")}}.
+Une chaine de caractères représentant un élément HTML ``.
## Description
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md
index c1f9fd9aeff889..65c5dcd778c63a 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md
@@ -37,7 +37,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction
クロスブラウザー問題が発生する原因は主に以下になります。
-- 時々ブラウザーにはバグがあったり、異なる仕様で機能が実装されています。この状況はかつてよりはましになっています。1990 年代に IE4 と Netscape4 がブラウザーの支配権を争っっていたとき、ブラウザー会社は意図的に競争優位性を得るために互いに異なる実装をしていました。これは開発者にとってはたまったもんじゃありませんでした。今日ではそのときに比べてはブラウザーを取り巻く環境は遥かにましになっています。しかし、それでもブラウザー間での違いやバグは時々あります。
+- 時々ブラウザーにはバグがあったり、異なる仕様で機能が実装されています。この状況はかつてよりはましになっています。1990 年代に IE4 と Netscape4 がブラウザーの支配権を争っていたとき、ブラウザー会社は意図的に競争優位性を得るために互いに異なる実装をしていました。これは開発者にとってはたまったもんじゃありませんでした。今日ではそのときに比べてはブラウザーを取り巻く環境は遥かにましになっています。しかし、それでもブラウザー間での違いやバグは時々あります。
- ブラウザー間で機能についてのサポートのレベルが異なる場合があります。これは実装されたばかりの最先端の機能を使おうとした場合や新しい機能が開発されるよりずっと前に開発終了になったものすごく古いブラウザーをサポートする場合には避けることはできません。たとえば、自分のサイトで JavaScript 最新の機能を使いたい場合、これらの機能は古いブラウザーでは動作しないかもしれません。もし古いブラウザーをサポートする必要があるならそれらの機能を使わないかクロスコンパイラを使って古い書き方に変換する必要があります。
- 端末によっては制約があり、それによってウェブサイトの表示が遅くなったり表示がおかしくなったりします。たとえば、デスクトップ PC でよく見えるように意図されたサイトは、携帯端末ではひょっとすると小さく読むのが難しかったりするかもしれません。また大量のアニメーションを読み込むサイトは、ハイスペックのタブレットでは大丈夫かもしれませんが、低スペックの端末ではカクつくかもしれません。
diff --git a/files/ja/mozilla/firefox/releases/120/index.md b/files/ja/mozilla/firefox/releases/120/index.md
new file mode 100644
index 00000000000000..5efda6e472bc8e
--- /dev/null
+++ b/files/ja/mozilla/firefox/releases/120/index.md
@@ -0,0 +1,88 @@
+---
+title: Firefox 120 for developers
+slug: Mozilla/Firefox/Releases/120
+l10n:
+ sourceCommit: 692015f089ff03699f0fe58814502b157c3e92ea
+---
+
+{{FirefoxSidebar}}
+
+このページでは、開発者に影響する Firefox 120 の変更点をまとめています。Firefox 120 は、米国時間 [2023 年 11 月 21 日](https://whattrainisitnow.com/release/?version=120) にリリースされました。
+
+## ウェブ開発者向けの変更点一覧
+
+### HTML
+
+- [``](/ja/docs/Web/HTML/Element/source) 要素の `media` 属性のサポートを再導入して、`` および `` 要素を含むように拡張しました。この属性は Firefox 15 で最初に追加しましたが、用途が `` の内部の`` 要素に限定されたため Firefox 53 で削除しました。このリリースでは `media` 属性が ``、``、`` の内部の `` 要素で使用可能になります ([Firefox bug 1836128](https://bugzil.la/1836128))。
+
+### CSS
+
+- {{CSSXref("color_value/light-dark", "light-dark()")}} CSS カラー関数をサポートしました。これは、`prefers-color-scheme` メディア特性を必要とせずにライトおよびダークの色を設定できます ([Firefox bug 1856999](https://bugzil.la/1856999))。
+- 行の高さの単位 [`lh` および `rlh`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#line_height_units) をサポートしました。これらは、たとえば複数行のテキストと背景の装飾を正確に揃えるなど、要素の行の高さに対して相対的にプロパティを設定できます ([Firefox bug 1310170](https://bugzil.la/1310170))。
+
+#### 廃止
+
+- 背景画像を切り抜くための非標準 CSS 関数である {{cssxref("-moz-image-rect")}} を削除しました。この関数は最初に Firefox 4 で導入してから標準化されず、またほかのブラウザーは実装していません ([Firefox bug 1856999](https://bugzil.la/1853867))。
+
+### JavaScript
+
+- {{jsxref("Date.parse()")}} が追加の日付形式をいくつか受け入れるようになりました。
+
+ - 正式な ISO 標準に合致しない、ハイフン区切りの数値による日付を受け入れるようになりました ([Firefox bug 1557650](https://bugzil.la/1557650))。たとえば以下のような形式です:
+
+ - `"01-12-1999"` (初めに月)
+ - `"1999-1-5"` (月や日が 1 桁)
+ - `"10000-01-12"` (年が 9999 より大きい)
+ - `"99-01-05"` または `"01-05-99"` (年が 2 桁、初めに年を置く場合は 31 より大きくなければならない)
+ - `"1999-01-05 10:00:00"` (日付と時刻の間に空白がある)
+
+ これらの日付はローカルタイムゾーンや日付のロールオーバー (4 月 31 日は存在しないため 5 月 1 日にロールオーバーする) など、ほかの ISO 形式でない日付に対して典型的な動作によって解析されます。
+
+ - 数字の直後に置く文字の要件を、新たな形式を受け入れるために緩和しました ([Firefox bug 449921](https://bugzil.la/449921))。たとえば以下のような形式です:
+
+ - `"DDMonYYYY"`
+ - `"Mon.DD.YYYY"`
+ - `"DD.Mon.YYYY"`
+ - `"YYYY.MM.DD"`
+ - `"Mon DD YYYY hh:mmXm"` (`am`/`pm` を時刻の直後に置く)
+
+ - ISO 形式でない日時でタイムゾーン `'Z'` を受け入れるようになりました (例: `Jan 1 1970 10:00Z`) ([Firefox bug 1852422](https://bugzil.la/1852422))
+
+### SVG
+
+変更なし。
+
+### HTTP
+
+- [`103 Early Hints`](/ja/docs/Web/HTTP/Status/103) HTTP [情報レスポンス](/ja/docs/Web/HTTP/Status#information_responses) ステータスコードが、(ページでリソースを読み込むことが必要と思われる) 特定のオリジンへの [事前接続](/ja/docs/Web/HTML/Attributes/rel/preconnect) に対して有効になりました。
+ 詳しくは [Firefox bug 1858712](https://bugzil.la/1858712) をご覧ください。
+- Firefox で [Global Privacy Control](https://globalprivacycontrol.org/) の {{HTTPHeader("Sec-GPC")}} リクエストヘッダーをサポートしました。これは、ウェブサイトやサービスが個人情報をサードパーティに販売あるいは共有することに同意しないことを示すために送信できます。
+ ユーザーは (`about:config` で) 設定項目 `privacy.globalprivacycontrol.enabled` を `true` に設定することで、このヘッダーを通常のブラウジングとプライベートブラウジングの両方で有効化できます。
+ {{domxref("Navigator.globalPrivacyControl")}} および {{domxref("WorkerNavigator.globalPrivacyControl")}} プロパティで、ユーザーが設定を許可しているかを JavaScript で確認できます ([Firefox bug 1856029](https://bugzil.la/1856029))。
+
+### セキュリティ
+
+変更なし。
+
+### API
+
+- {{domxref("PublicKeyCredential")}} インターフェイスの {{domxref("PublicKeyCredential.authenticatorAttachment", "authenticatorAttachment")}} プロパティをサポートしました。
+ これはウェブアプリケーションのクライアントやサーバーのコードが、認証システムがウェブ認証を実行しているデバイスの一部であるか、デバイス間に渡ることができるかに応じて応じて自身を構成することを可能にします ([Firefox bug 1810851](https://bugzil.la/1810851))。
+- [Web Authentication API](/ja/docs/Web/API/Web_Authentication_API) の [Minimum PIN Length Extension (`minPinLength`)](/ja/docs/Web/API/Web_Authentication_API/WebAuthn_extensions#minpinlength) をサポートしました。これは Relying Party のサーバーが認証システムに対して、PIN を作成または登録するときに最短の長さを要求できるようにします ([Firefox bug 1844450](https://bugzil.la/1844450))。
+- {{domxref("Navigator.userActivation")}} プロパティおよび {{domxref("UserActivation")}} インターフェイスをサポートしました。
+ これらはユーザーがページと対話しているか、あるいはページが読み込まれてから対話したかを確認するために使用できます ([Firefox bug 1791079](https://bugzil.la/1791079))。
+
+### WebDriver conformance (WebDriver BiDi, Marionette)
+
+#### WebDriver BiDi
+
+- `Proxy` および `Generator` オブジェクトのシリアライズをサポートしました ([Firefox bug 1841786](https://bugzil.la/1841786))。
+- `responseStarted` および `responseCompleted` イベントに、`authChallenges` プロパティ (ヘッダーに存在している認証チャレンジのリスト) を追加しました。これは、後に続く `network.authRequired` イベントを処理するの役立つでしょう ([Firefox bug 1855149](https://bugzil.la/1855149))。
+
+## アドオン開発者向けの変更点一覧
+
+変更なし。
+
+## 過去のバージョン
+
+{{Firefox_for_developers(119)}}
diff --git a/files/ja/web/api/touch/clientx/index.md b/files/ja/web/api/touch/clientx/index.md
index 2743aac8db8c19..64e0c68930c439 100644
--- a/files/ja/web/api/touch/clientx/index.md
+++ b/files/ja/web/api/touch/clientx/index.md
@@ -1,37 +1,35 @@
---
-title: Touch.clientX
+title: "Touch: clientX プロパティ"
+short-title: clientX
slug: Web/API/Touch/clientX
+l10n:
+ sourceCommit: 416eb29676deadec38193d55c868651c3f5872eb
---
{{ APIRef("Touch Events") }}
-**`Touch.clientY`** は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。
+`Touch.clientX` は読み取り専用プロパティで、スクロールオフセットを含まない、ビューポートに対するタッチ点の X 座標を返します。
-## 構文
+### 値
-```
-touchItem.clientY;
-```
-
-### 返値
-
-`long` 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。
+`double` 型の浮動小数点数で、スクロールオフセットを含まない、ビューポートに対するタッチ点の X 座標を表します。
## 例
-この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。
+この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除いたものです。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標で、スクロールオフセットを除いたものです。
この例では、 `source` という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。
```js
-// Register touchstart and touchend listeners for element 'source'
-var src = document.getElementById("source");
-var clientX, clientY;
+// 要素 'source' に touchstart リスナーと touchend リスナーを登録
+const src = document.getElementById("source");
+let clientX;
+let clientY;
src.addEventListener(
"touchstart",
- function (e) {
- // Cache the client X/Y coordinates
+ (e) => {
+ // クライアント X/Y 座標をキャッシュ
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
},
@@ -40,16 +38,17 @@ src.addEventListener(
src.addEventListener(
"touchend",
- function (e) {
- var deltaX, deltaY;
+ (e) => {
+ let deltaX;
+ let deltaY;
- // Compute the change in X and Y coordinates.
- // The first touch point in the changedTouches
- // list is the touch point that was just removed from the surface.
+ // X 座標と Y 座標の変化を計算
+ // changedTouches リストの最初のタッチ点は、
+ // 面から除去されたタッチ点です。
deltaX = e.changedTouches[0].clientX - clientX;
deltaY = e.changedTouches[0].clientY - clientY;
- // Process the data ...
+ // データを処理…
},
false,
);
diff --git a/files/ja/web/api/touch/clienty/index.md b/files/ja/web/api/touch/clienty/index.md
index 121e4dd6c20d78..0328debf4d7467 100644
--- a/files/ja/web/api/touch/clienty/index.md
+++ b/files/ja/web/api/touch/clienty/index.md
@@ -1,37 +1,35 @@
---
-title: Touch.clientY
+title: "Touch: clientY プロパティ"
+short-title: clientY
slug: Web/API/Touch/clientY
+l10n:
+ sourceCommit: 416eb29676deadec38193d55c868651c3f5872eb
---
{{ APIRef("Touch Events") }}
-**`Touch.clientY`** は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。
+**`Touch.clientY`** は読み取り専用プロパティで、スクロールオフセットを含まない、ブラウザーのビューポートに対するタッチ点の Y 座標を返します。
## 構文
-```
-touchItem.clientY;
-```
-
-### 返値
-
-`long` 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。
+`double` 型の浮動小数点数で、スクロールオフセットを含まない、ビューポートに対するタッチ点の Y 座標を表します。
## 例
-この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。
+この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除いたものです。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標で、スクロールオフセットを除いたものです。
この例では、 `source` という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。
```js
-// Register touchstart and touchend listeners for element 'source'
-var src = document.getElementById("source");
-var clientX, clientY;
+// 要素 'source' に touchstart リスナーと touchend リスナーを登録
+const src = document.getElementById("source");
+let clientX;
+let clientY;
src.addEventListener(
"touchstart",
- function (e) {
- // Cache the client X/Y coordinates
+ (e) => {
+ // クライアント X/Y 座標をキャッシュ
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
},
@@ -40,16 +38,17 @@ src.addEventListener(
src.addEventListener(
"touchend",
- function (e) {
- var deltaX, deltaY;
+ (e) => {
+ let deltaX;
+ let deltaY;
- // Compute the change in X and Y coordinates.
- // The first touch point in the changedTouches
- // list is the touch point that was just removed from the surface.
+ // X 座標と Y 座標の変化を計算
+ // changedTouches リストの最初のタッチ点は、
+ // 面から除去されたタッチ点です。
deltaX = e.changedTouches[0].clientX - clientX;
deltaY = e.changedTouches[0].clientY - clientY;
- // Process the data ...
+ // データを処理…
},
false,
);
diff --git a/files/ja/web/api/touch/force/index.md b/files/ja/web/api/touch/force/index.md
new file mode 100644
index 00000000000000..ed82644f54fbb7
--- /dev/null
+++ b/files/ja/web/api/touch/force/index.md
@@ -0,0 +1,45 @@
+---
+title: "Touch: force プロパティ"
+short-title: force
+slug: Web/API/Touch/force
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+**`Touch.force`** は読み取り専用のプロパティで、タッチ点 ({{ domxref("Touch") }}) に対してユーザーがタッチ面に与えている圧力の大きさを返します。
+
+## 値
+
+`float` で、ユーザーがタッチ面に加える圧力の大きさを表します。これは `0.0` (圧力なし)と `1.0` (ハードウェアが認識できる最大の圧力)の間の値です。値が不明な場合(例えばタッチ機器がこのプロパティに対応していない場合)には `0.0` の値を返します。力が既知の環境では、 force 属性で表す絶対圧と、圧力のレベルでの感度は異なる場合があります。
+
+## 例
+
+この例では、 {{domxref("Touch")}} インターフェイスの {{domxref("Touch.force")}} プロパティを使用して示します。このプロパティは加えられる圧力の相対値で、範囲は `0.0` から `1.0` で、`0.0` は圧力なし、 `1.0` はタッチ機器が感知できる最高レベルの圧力です。
+
+以下のコードスニペットでは、 {{domxref("Element/touchstart_event", "touchstart")}} イベントハンドラーは `targetTouches` リストを反復処理し、各タッチ点の `force` 値をログ出力していますが、このコードは値によって異なる処理を呼び出すことができます。
+
+```js
+someElement.addEventListener(
+ "touchstart",
+ (e) => {
+ // タッチ点のリストを反復処理し、各タッチ点の力をログ出力する
+ for (let i = 0; i < e.targetTouches.length; i++) {
+ // 力の値に応じて「切り替える」コードを追加します。例えば、
+ // 最小圧力と最大圧力で、ユーザー入力を異なる処理にすることが
+ // できます。
+ console.log(`targetTouches[${i}].force = ${e.targetTouches[i].force}`);
+ }
+ },
+ false,
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/identifier/index.md b/files/ja/web/api/touch/identifier/index.md
index 46157e8830891b..31e93b8ca0e38a 100644
--- a/files/ja/web/api/touch/identifier/index.md
+++ b/files/ja/web/api/touch/identifier/index.md
@@ -1,19 +1,16 @@
---
-title: Touch.identifier
+title: "Touch: identifier プロパティ"
+short-title: identifier
slug: Web/API/Touch/identifier
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{ APIRef("Touch Events") }}{{SeeCompatTable}}
+{{ APIRef("Touch Events") }}
-**`Touch.identifier`** はタッチ面に接触した点を識別する固有の値を返します。この値は、タッチ面上でのこの指 (またはスタイラス) の動きに関わるすべてのイベントに対して、タッチ面から離れるまで一貫したものです。
+**`Touch.identifier`** はタッチ面に接触した点を識別する固有の値を返します。この値は、タッチ面上でのこの指(またはスタイラス)の動きに関わるすべてのイベントに対して、タッチ面から離れるまで一貫したものです。
-## 構文
-
-```
-touchItem.identifier;
-```
-
-### 返値
+## 値
`long` で、 {{ domxref("Touch") }} オブジェクトの固有の ID を表します。
@@ -22,15 +19,12 @@ touchItem.identifier;
```js
someElement.addEventListener(
"touchmove",
- function (e) {
- // Iterate through the list of touch points that changed
- // since the last event and print each touch point's identifier.
- for (var i = 0; i < e.changedTouches.length; i++) {
+ (e) => {
+ // 最後のイベント以降に変更されたタッチ点のリストを反復処理し、
+ // 各タッチ点の識別子を出力する。
+ for (let i = 0; i < e.changedTouches.length; i++) {
console.log(
- "changedTouches[" +
- i +
- "].identifier = " +
- e.changedTouches[i].identifier,
+ `changedTouches[${i}].identifier = ${e.changedTouches[i].identifier}`,
);
}
},
diff --git a/files/ja/web/api/touch/index.md b/files/ja/web/api/touch/index.md
index c1f96bb15a9f12..6b56e4f6db4e13 100644
--- a/files/ja/web/api/touch/index.md
+++ b/files/ja/web/api/touch/index.md
@@ -1,58 +1,58 @@
---
title: Touch
slug: Web/API/Touch
+l10n:
+ sourceCommit: 750b70f86efe419fc345c6b4b5266cbfb62322d4
---
{{APIRef("Touch Events")}}
**`Touch`** インターフェイスは、タッチ感応面へのひとつの接触点を表します。接触点とは一般的に指やスタイラスと、タッチ画面やトラックパッドのような機器が触れた位置です。
-{{domxref("Touch.radiusX")}}、{{domxref("Touch.radiusY")}}、{{domxref("Touch.rotationAngle")}} で、ユーザーと画面が接触した*タッチ領域 (touch area)* を表します。これは指を使うような、精度が低いポインティングデバイスを扱う場合に役立ちます。これらの値は、接触した領域全体 (ユーザの指先など) に可能な限り合う楕円を表すように設定されます。 {{experimental_inline}}
+{{ domxref("Touch.radiusX") }}、{{ domxref("Touch.radiusY") }}、{{ domxref("Touch.rotationAngle") }} により、ユーザーと画面が接触した*タッチ領域 (touch area)* を表します。これは指を使うような、精度が低いポインティングデバイスを扱う場合に役立ちます。これらの値は、接触した領域全体(ユーザの指先など)に可能な限り合う楕円を表すように設定されます
> **メモ:** プロパティの値の多くは、ハードウェア依存です。例えば、表面を押さえる力を検出する手段を持たない機器では、`force` の値が常に 0 になるでしょう。これは `radiusX` や `radiusY` にもあてはまります。ハードウェアがひとつの点しか通知できない場合は、これらの値が 1 になるでしょう。
## コンストラクター
-- {{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}
+- {{domxref("Touch.Touch", "Touch()")}}
- : Touch オブジェクトを作成します。
-## プロパティ
+## インスタンスプロパティ
_このインターフェイスには親がなく、ほかのプロパティを継承または実装していません。_
### 基本プロパティ
-- {{domxref("Touch.identifier")}} {{readonlyInline}}
- - : `Touch` オブジェクトの一意な識別子を返します。あるタッチ点 (指などによる) は表面を移動している間、同じ識別子を持ち続けます。これにより、同一のタッチを終始追跡することが確実になります。
-- {{domxref("Touch.screenX")}} {{readonlyInline}}
+- {{domxref("Touch.identifier")}} {{ReadOnlyInline}}
+ - : `Touch` オブジェクトの一意な識別子を返します。あるタッチ点(指などによる)は表面を移動している間、同じ識別子を持ち続けます。これにより、同一のタッチを確実に終始追跡することができます。
+- {{domxref("Touch.screenX")}} {{ReadOnlyInline}}
- : 画面の左端に対する、タッチ点の X 座標を返します。
-- {{domxref("Touch.screenY")}} {{readonlyInline}}
+- {{domxref("Touch.screenY")}} {{ReadOnlyInline}}
- : 画面の上端に対する、タッチ点の Y 座標を返します。
-- {{domxref("Touch.clientX")}} {{readonlyInline}}
- - : スクロールによるオフセットを含まず、ブラウザのビューポートの左端に対する、タッチ点の X 座標を返します。
-- {{domxref("Touch.clientY")}} {{readonlyInline}}
- - : スクロールによるオフセットを含まず、ブラウザのビューポートの上端に対する、タッチ点の Y 座標を返します。
-- {{domxref("Touch.pageX")}} {{readonlyInline}}
- - : ドキュメントの左端に対する、タッチ点の X 座標を返します。水平スクロールによるオフセットがある場合は、それを含むことが `clientX` と異なります。
-- {{domxref("Touch.pageY")}} {{readonlyInline}}
- - : ドキュメントの上端に対する、タッチ点の Y 座標を返します。垂直スクロールによるオフセットがある場合は、それを含むことが `clientY` と異なります。
-- {{domxref("Touch.target")}} {{readonlyInline}}
- - : タッチ点がタッチ面で最初に触れた位置にある {{domxref("Element")}} を返します。タッチ点が要素の対話エリアの外に移動したり、ドキュメント上に存在しなくなっても同様です。
+- {{domxref("Touch.clientX")}} {{ReadOnlyInline}}
+ - : スクロールによるオフセットを含まない、ブラウザのビューポートの左端に対する、タッチ点の X 座標を返します。
+- {{domxref("Touch.clientY")}} {{ReadOnlyInline}}
+ - : スクロールによるオフセットを含まない、ブラウザのビューポートの上端に対する、タッチ点の Y 座標を返します。
+- {{domxref("Touch.pageX")}} {{ReadOnlyInline}}
+ - : 文書の左端に対する、タッチ点の X 座標を返します。水平スクロールによるオフセットがある場合は、それを含むことが `clientX` と異なります。
+- {{domxref("Touch.pageY")}} {{ReadOnlyInline}}
+ - : 文書の上端に対する、タッチ点の Y 座標を返します。垂直スクロールによるオフセットがある場合は、それを含むことが `clientY` と異なります。
+- {{domxref("Touch.target")}} {{ReadOnlyInline}}
+ - : タッチ点がタッチ面で最初に触れた位置にある {{domxref("Element")}} を返します。タッチ点が要素の対話エリアの外に移動したり、文書上に存在しなくなっても同様です。
### タッチ領域
-{{SeeCompatTable}}
-
-- {{domxref("Touch.radiusX")}} {{readonlyInline}} {{experimental_inline}}
+- {{domxref("Touch.radiusX")}} {{ReadOnlyInline}}
- : 画面に触れた領域にもっとも接近して囲むような、楕円の X 方向の半径を返します。この値は、`screenX` と同じ尺度のピクセル数で表します。
-- {{domxref("Touch.radiusY")}} {{readonlyInline}} {{experimental_inline}}
+- {{domxref("Touch.radiusY")}} {{ReadOnlyInline}}
- : 画面に触れた領域にもっとも接近して囲むような、楕円の Y 方向の半径を返します。この値は、`screenY` と同じ尺度のピクセル数で表します。
-- {{domxref("Touch.rotationAngle")}} {{readonlyInline}} {{experimental_inline}}
- - : ユーザがタッチ面に触れた領域をもっとも正確に覆うために、radiusX および radiusY で表す楕円を時計回りに回転すべき角度 (単位は度 (degree)) を返します。
-- {{domxref("Touch.force")}}{{readonlyInline}} {{experimental_inline}}
+- {{domxref("Touch.rotationAngle")}} {{ReadOnlyInline}}
+ - : ユーザがタッチ面に触れた領域をもっとも正確に覆うために、radiusX および radiusY で表す楕円を時計回りに回転すべき角度(単位は度 (degree))を返します。
+- {{domxref("Touch.force")}} {{ReadOnlyInline}}
- : ユーザがタッチ面に与えた圧力を、`0.0` (最小圧力) から `1.0` (最大圧力) の間の `float` で返します。
-## メソッド
+## インスタンスメソッド
_このインターフェイスにはメソッドがなく、親もないのでメソッドを継承または実装していません。_
diff --git a/files/ja/web/api/touch/pagex/index.md b/files/ja/web/api/touch/pagex/index.md
new file mode 100644
index 00000000000000..4a2906c6f14f75
--- /dev/null
+++ b/files/ja/web/api/touch/pagex/index.md
@@ -0,0 +1,47 @@
+---
+title: "Touch: pageX プロパティ"
+short-title: pageX
+slug: Web/API/Touch/pageX
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+**`Touch.pageX`** は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を返します。
+
+### 値
+
+`double` 型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を表します。
+
+## 例
+
+この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.pageX")}} および {{domxref("Touch.pageY")}} プロパティへのアクセス方法を示しています。 {{domxref("Touch.pageX")}} プロパティは、ビューポートを基準としたタッチ点の水平座標(CSS ピクセル単位)で、スクロールオフセットを加味したものです。 {{domxref("Touch.pageY")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標(CSS ピクセル単位)で、スクロールオフセットを加味したものです。
+
+以下の単純なコードスニペットでは、ユーザーが `source` 要素に 1 つ以上のタッチ接触を開始し、タッチ点を移動させた後、表面との接触をすべて解除することを想定しています。 {{domxref("Element/touchmove_event", "touchmove")}} イベントハンドラーが呼び出されると、各タッチ点の {{domxref("Touch.pageX")}} と {{domxref("Touch.pageY")}} の各座標がイベントの {{domxref("TouchEvent.changedTouches")}} リスト経由でアクセスされます。
+
+```js
+// 'source' 要素に touchmove リスナーを登録する
+const src = document.getElementById("source");
+
+src.addEventListener(
+ "touchmove",
+ (e) => {
+ // 移動されたタッチ点を反復処理し、各 pageX/Y 座標をログ出力する。
+ // 各座標は CSS ピクセル単位。
+ for (let i = 0; i < e.changedTouches.length; i++) {
+ console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
+ console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
+ }
+ },
+ false,
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/pagey/index.md b/files/ja/web/api/touch/pagey/index.md
new file mode 100644
index 00000000000000..cc11b4a37f5aa9
--- /dev/null
+++ b/files/ja/web/api/touch/pagey/index.md
@@ -0,0 +1,47 @@
+---
+title: "Touch: pageY プロパティ"
+short-title: pageY
+slug: Web/API/Touch/pageY
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+**`Touch.pageY`** は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の Y 座標を返します。
+
+### 値
+
+`double` 型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の Y 座標を表します。
+
+## 例
+
+この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.pageX")}} および {{domxref("Touch.pageY")}} プロパティへのアクセス方法を示しています。 {{domxref("Touch.pageX")}} プロパティは、ビューポートを基準としたタッチ点の水平座標(CSS ピクセル単位)で、スクロールオフセットを加味したものです。 {{domxref("Touch.pageY")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標(CSS ピクセル単位)で、スクロールオフセットを加味したものです。
+
+以下の単純なコードスニペットでは、ユーザーが `source` 要素に 1 つ以上のタッチ接触を開始し、タッチ点を移動させた後、表面との接触をすべて解除することを想定しています。 {{domxref("Element/touchmove_event", "touchmove")}} イベントハンドラーが呼び出されると、各タッチ点の {{domxref("Touch.pageX")}} と {{domxref("Touch.pageY")}} の各座標がイベントの {{domxref("TouchEvent.changedTouches")}} リスト経由でアクセスされます。
+
+```js
+// 'source' 要素に touchmove リスナーを登録する
+const src = document.getElementById("source");
+
+src.addEventListener(
+ "touchmove",
+ (e) => {
+ // 移動されたタッチ点を反復処理し、各 pageX/Y 座標をログ出力する。
+ // 各座標は CSS ピクセル単位。
+ for (let i = 0; i < e.changedTouches.length; i++) {
+ console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
+ console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
+ }
+ },
+ false,
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/radiusx/index.md b/files/ja/web/api/touch/radiusx/index.md
new file mode 100644
index 00000000000000..244b63df004bdf
--- /dev/null
+++ b/files/ja/web/api/touch/radiusx/index.md
@@ -0,0 +1,55 @@
+---
+title: "Touch: radiusX プロパティ"
+short-title: radiusX
+slug: Web/API/Touch/radiusX
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+**`radiusX`** は {{domxref("Touch")}} インターフェイスの読み取り専用プロパティで、タッチ面の連絡先を最も近く囲む楕円の X 半径を返します。値は {{ domxref("Touch.screenX") }} と同じ倍率の CSS のピクセル値です。
+
+この値と {{ domxref("Touch.radiusY") }} および {{ domxref("Touch.rotationAngle") }} の組み合わせにより、ユーザーと画面の接触領域のサイズと図形を近似した楕円が構成されます。これは、例えば、指先と画面の間の接触を表す比較的大きな楕円であったり、スタイラスの先端を表す小さな領域であったりします。
+
+## 値
+
+数値です。
+
+## 例
+
+この例では、 {{domxref("Touch")}} インターフェイスの {{domxref("Touch.radiusX")}}、{{domxref("Touch.radiusX")}}、{{domxref("Touch.rotationAngle")}} プロパティを使用する例を示します。 {{domxref("Touch.radiusX")}} プロパティは、タッチ領域(指やスタイラスなど)を最も近く囲む楕円の、タッチ点の {{domxref("Touch.rotationAngle")}} が**示す**軸上の半径です。同様に {{domxref("Touch.radiusY")}} プロパティは、タッチ領域(指やスタイラスなど)を最も近く囲む楕円の、 {{domxref("Touch.rotationAngle")}} で示される線に**直交する**軸の半径です。 {{domxref("Touch.rotationAngle")}} は、 `radiusX` と `radiusY` で記述されている楕円を、その中心に対して時計回りに回転させたときの角度(度)です。
+
+以下の単純なコードでは、 {{domxref("Document/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}}、{{domxref("Element/touchend_event", "touchend")}} イベントに対して単一のハンドラーを登録しています。 `src` 要素がタッチされると、タッチ点の `radiusX` と `radiusY` の値に基づいて要素の幅と高さが計算され、タッチ点の `rotationAngle` を使用して要素が回転します。
+
+```html
+…
+```
+
+```js
+const src = document.getElementById("src");
+
+src.addEventListener("touchstart", rotate);
+src.addEventListener("touchmove", rotate);
+src.addEventListener("touchend", rotate);
+
+function rotate(e) {
+ const touch = e.changedTouches.item(0);
+
+ // 既定のイベント処理を無効にする
+ e.preventDefault();
+
+ // 'src' 要素を回転する
+ src.style.width = `${touch.radiusX * 2}px`;
+ src.style.height = `${touch.radiusY * 2}px`;
+ src.style.transform = `rotate(${touch.rotationAngle}deg)`;
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/radiusy/index.md b/files/ja/web/api/touch/radiusy/index.md
new file mode 100644
index 00000000000000..bb77d81d717c04
--- /dev/null
+++ b/files/ja/web/api/touch/radiusy/index.md
@@ -0,0 +1,29 @@
+---
+title: "Touch: radiusY プロパティ"
+short-title: radiusY
+slug: Web/API/Touch/radiusY
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+**`radiusY`** は {{domxref("Touch")}} インターフェイスの読み取り専用プロパティで、タッチ面の連絡先を最も近く囲む楕円の Y 半径を返します。値は {{ domxref("Touch.screenX") }} と同じ倍率の CSS のピクセル値です。
+
+この値と {{ domxref("Touch.radiusX") }} および {{ domxref("Touch.rotationAngle") }} の組み合わせにより、ユーザーと画面の接触領域のサイズと図形を近似した楕円が構成されます。これは、例えば、指先と画面の間の接触を表す大きな楕円であったり、スタイラスの先端を表す小さな領域であったりします。
+
+## 値
+
+数値です。
+
+## 例
+
+このプロパティの使い方の例については [Touch.radiusX の例](/ja/docs/Web/API/Touch/radiusX#例) を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/rotationangle/index.md b/files/ja/web/api/touch/rotationangle/index.md
new file mode 100644
index 00000000000000..b8fadcd646467d
--- /dev/null
+++ b/files/ja/web/api/touch/rotationangle/index.md
@@ -0,0 +1,27 @@
+---
+title: "Touch: rotationAngle プロパティ"
+short-title: rotationAngle
+slug: Web/API/Touch/rotationAngle
+l10n:
+ sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{ APIRef("Touch Events") }}
+
+**`rotationAngle`** は {{domxref("Touch")}} インターフェイスの読み取り専用プロパティで、 {{ domxref("Touch.radiusX") }} と {{ domxref("Touch.radiusY") }} で定義する接触楕円の回転角度を度単位で返します。値は 0 から 90 の間です。これら 3 つの値を合わせて、ユーザーと画面の連絡先の大きさと図形を近似する楕円を記述します。これは例えば、指先と画面の連絡先を表す比較的大きな楕円にも、スタイラスの先端を表す小さな領域にもなりえます。
+
+## 値
+
+数値です。
+
+## 例
+
+このプロパティの使い方の例については [Touch.radiusX の例](/ja/docs/Web/API/Touch/radiusX#例)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/screenx/index.md b/files/ja/web/api/touch/screenx/index.md
new file mode 100644
index 00000000000000..1cb00682903953
--- /dev/null
+++ b/files/ja/web/api/touch/screenx/index.md
@@ -0,0 +1,49 @@
+---
+title: "Touch: screenX プロパティ"
+short-title: screenX
+slug: Web/API/Touch/screenX
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+## 概要
+
+画面を基準としたタッチ点の X 座標を返します。スクロールオフセットは含まれません。
+
+## 値
+
+数値です。
+
+## 例
+
+この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.screenX")}} と {{domxref("Touch.screenY")}} プロパティにアクセスする方法を示します。 {{domxref("Touch.screenX")}} プロパティは、タッチ点の画面に対する水平 (x) 座標を CSS ピクセルで表したものです。 {{domxref("Touch.screenY")}} プロパティは、タッチ点の画面に対する垂直座標を CSS ピクセル単位で表したものです。
+
+以下の単純なコードでは、ユーザーが `source` という id を持つ要素に複数の接触を開始し、その後表面への接触を解除することを想定しています。 {{domxref("Element/touchstart_event", "touchstart")}} イベントハンドラーを呼び出すと、各タッチ点の {{domxref("Touch.screenX")}} および {{domxref("Touch.screenY")}} 座標にアクセスします。
+
+```js
+// 'source' 要素に touchstart リスナーを登録
+const src = document.getElementById("source");
+
+src.addEventListener(
+ "touchstart",
+ (e) => {
+ // タッチ点を反復処理し、それぞれの screenX/Y 座標をログ出力する
+ // 各座標は CSS ピクセル単位
+ for (let i = 0; i < e.touches.length; i++) {
+ console.log(`touchpoint[${i}].screenX = ${e.touches[i].screenX}`);
+ console.log(`touchpoint[${i}].screenY = ${e.touches[i].screenY}`);
+ }
+ },
+ false,
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/screeny/index.md b/files/ja/web/api/touch/screeny/index.md
index c2580a0b11f611..bc5217264b85ff 100644
--- a/files/ja/web/api/touch/screeny/index.md
+++ b/files/ja/web/api/touch/screeny/index.md
@@ -1,33 +1,29 @@
---
-title: Touch.screenY
+title: "Touch: screenY プロパティ"
+short-title: screenY
slug: Web/API/Touch/screenY
+l10n:
+ sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
---
{{ APIRef("Touch Events") }}
## 概要
-画面を基準としたタッチポイントの Y 座標を返します。スクロールオフセットは含まれません。
+画面を基準としたタッチ点の Y 座標を返します。スクロールオフセットは含まれません。
-## 構文
+## 値
-```
-var y = touchItem.screenY;
-```
-
-### 返り値
-
-- `y`
- - : 画面を基準としたタッチポイントの Y 座標。スクロールオフセットは含まれません。
+数値です。
## 例
-[Touch.screenX の例](/ja/docs/Web/API/Touch/screenX#Example)には、このプロパティの使用例が含まれています。
+[Touch.screenX の例](/ja/docs/Web/API/Touch/screenX#例)には、このプロパティの使用例が含まれています。
-## 仕様
+## 仕様書
{{Specifications}}
-## ブラウザー実装状況
+## ブラウザーの互換性
{{Compat}}
diff --git a/files/ja/web/api/touch/target/index.md b/files/ja/web/api/touch/target/index.md
new file mode 100644
index 00000000000000..0e46b122c9fb6a
--- /dev/null
+++ b/files/ja/web/api/touch/target/index.md
@@ -0,0 +1,45 @@
+---
+title: "Touch: target プロパティ"
+short-title: target
+slug: Web/API/Touch/target
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("Touch Events") }}
+
+**`target`** は `Touch` インターフェイスの読み取り専用プロパティで、タッチ点がその要素の操作領域外に移動した場合や、文書から取り除かれた場合でも、タッチ点が最初に配置されたときに接触が開始された ({{domxref("EventTarget")}}) を返します。対象要素が文書から除去されても、イベントはその要素を対象とし、ウィンドウや文書にバブルアップされるとは限らないことに注意してください。タッチしている間に要素が除去されるおそれがある場合は、タッチリスナーを対象に直接取り付けるのが最善の手法です。
+
+## 値
+
+{{domxref("Touch")}} オブジェクトが適用される {{domxref("EventTarget")}}。
+
+## 例
+
+この例では、{{domxref("Touch")}} オブジェクトの {{domxref("Touch.target")}} プロパティにアクセスする方法を示します。 {{domxref("Touch.target")}} プロパティは {{domxref("Element")}} ({{domxref("EventTarget")}}) であり、表面に最初に連絡先が配置されたときにこの点を開始します。
+
+以下の単純なコードでは、ユーザーが `source` 要素に 1 つ以上の接触を開始することを想定しています。この要素の {{domxref("Element/touchstart_event", "touchstart")}} イベントハンドラーが呼び出されると、各タッチ点の {{domxref("Touch.target")}} プロパティは、イベントの {{domxref("TouchEvent.targetTouches")}} リスト経由でアクセスします。
+
+```js
+// touchmove リスナーを 'source' 要素に登録
+const src = document.getElementById("source");
+
+src.addEventListener(
+ "touchstart",
+ (e) => {
+ // この要素で有効化されたタッチ点を反復処理
+ for (let i = 0; i < e.targetTouches.length; i++) {
+ console.log(`touchpoint[${i}].target = ${e.targetTouches[i].target}`);
+ }
+ },
+ false,
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/touch/touch/index.md b/files/ja/web/api/touch/touch/index.md
new file mode 100644
index 00000000000000..8786c075e620e2
--- /dev/null
+++ b/files/ja/web/api/touch/touch/index.md
@@ -0,0 +1,60 @@
+---
+title: "Touch: Touch() コンストラクター"
+short-title: Touch()
+slug: Web/API/Touch/Touch
+l10n:
+ sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{APIRef("Touch Events")}}
+
+**`Touch()`** コンストラクターは、新しい {{domxref("Touch")}} オブジェクトを作成します。
+
+## 構文
+
+```js-nolint
+new Touch(options)
+```
+
+### 引数
+
+- `touchInit`
+
+ - : 以下のフィールドを持つオブジェクトです。
+
+ - `identifier`
+ - : `long` 値で、タッチ点の識別番号です。
+ - `target`
+ - : {{domxref("EventTarget")}} オブジェクトで、タッチ点が最初に表面に置かれたときに開始したアイテムです。
+ - `clientX` {{optional_inline}}
+ - : 既定値は `0`、型は `double` で、スクロールオフセットを除いた、ユーザー画面のクライアントウィンドウ上のタッチの水平位置です。
+ - `clientY` {{optional_inline}}
+ - : 既定値は `0`、型は `double` で、スクロールオフセットを除いた、ユーザー画面のクライアントウィンドウ上のタッチの垂直位置です。
+ - `screenX` {{optional_inline}}
+ - : 既定値は `0`、型は `double` で、ユーザーの画面上のタッチの水平位置です。
+ - `screenY` {{optional_inline}}
+ - : 既定値は `0`、型は `double` で、ユーザーの画面上のタッチの垂直位置です。
+ - `pageX` {{optional_inline}}
+ - : 既定値は `0`、型は `double` で、スクロールオフセットを含む、ユーザー画面のクライアントウィンドウ上のタッチの水平位置です。
+ - `pageY` {{optional_inline}}
+ - : 既定値は `0`、型は `double` で、スクロールオフセットを含む、ユーザー画面のクライアントウィンドウ上でのタッチの垂直位置です。
+ - `radiusX` {{optional_inline}}
+ - : 既定値は `0`、型は `float` で、 rotationAngle で示される軸に沿ったタッチ領域(指やスタイラスなど)を最も近く囲む楕円の半径を、screenX と同じ倍率の CSS ピクセル単位で指定します。値が不明な場合は `0` です。値は負であってはいけません。
+ - `radiusY` {{optional_inline}}
+ - : 既定値は `0` で、タイプは `float` です。rotationAngle で示される軸に垂直な軸に沿って、タッチエリア(指やスタイラスなど)を最も近く囲む楕円の半径を、screenY と同じ倍率の CSS ピクセル単位で指定します。値が不明な場合は `0` です。値は負であってはいけません。
+ - `rotationAngle` {{optional_inline}}
+ - : 既定値は `0` 、型は `float` で、 radiusX と radiusY で記述する楕円を、その中心を軸に時計回りに回転させた角度(度単位)です。値は `0` 以上、`90` 以下でなければなりません。radiusX と radiusY で記述される楕円が円の場合、 rotationAngle は影響しません。ユーザーエージェントはこの用途の値として `0` を使用してもよいですし、許容範囲内の他の値を使用してもかまいません。(例えば、ユーザーエージェントは突然の変化を避けるために、前回のタッチイベントの rotationAngle 値を使用することができます。)
+ - `force` {{optional_inline}}
+ - : 既定値は `0`、型は `float` で、加えられる圧力の相対値です。範囲は `0` から `1` で、 `0` は圧力なし、 `1` はそのタッチ機器が感知できる最高レベルの圧力です。値が不明の場合は `0` です。力が既知である環境では、力属性によって表される絶対圧と、圧力のレベルの感度が異なる場合があります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("TouchEvent")}}: これを構築するオブジェクトのインターフェイス
diff --git a/files/ja/web/api/touchlist/item/index.md b/files/ja/web/api/touchlist/item/index.md
index 53f1ce400d3ea0..718f564a408518 100644
--- a/files/ja/web/api/touchlist/item/index.md
+++ b/files/ja/web/api/touchlist/item/index.md
@@ -1,8 +1,9 @@
---
-title: TouchList.item()
+title: "TouchList: item() メソッド"
+short-title: item()
slug: Web/API/TouchList/item
l10n:
- sourceCommit: fe0ae190fa37469b28ebe39cb33013d89c3a69e6
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{ APIRef("Touch Events") }}
diff --git a/files/ja/web/api/touchlist/length/index.md b/files/ja/web/api/touchlist/length/index.md
index a00d2c8f268e6d..620f397cb0cd00 100644
--- a/files/ja/web/api/touchlist/length/index.md
+++ b/files/ja/web/api/touchlist/length/index.md
@@ -1,8 +1,9 @@
---
-title: TouchList.length
+title: "TouchList: length プロパティ"
+short-title: length
slug: Web/API/TouchList/length
l10n:
- sourceCommit: fe0ae190fa37469b28ebe39cb33013d89c3a69e6
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{ APIRef("Touch Events") }}
diff --git a/files/ja/web/api/window/error_event/index.md b/files/ja/web/api/window/error_event/index.md
index 2b8b01f012fe07..1d6f1f7619ab4b 100644
--- a/files/ja/web/api/window/error_event/index.md
+++ b/files/ja/web/api/window/error_event/index.md
@@ -1,36 +1,87 @@
---
title: "Window: error イベント"
+short-title: error
slug: Web/API/Window/error_event
+l10n:
+ sourceCommit: 8d03307af2cee96a307c22b5d52b93f155f11524
---
{{APIRef}}
`error` イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合 — 例えば、スクリプトに実行エラーがあった場合に {{domxref("Window")}} オブジェクトに発生します。
-
-
-
- バブリング
- なし
-
-
- キャンセル
- 不可
-
-
- インターフェイス
- {{domxref("Event")}} または {{domxref("UIEvent")}}
-
-
- イベントハンドラープロパティ
-
- {{domxref("GlobalEventHandlers/onerror", "onerror")}}
-
-
-
-
-
-イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("error", (event) => {});
+
+onerror = (event, source, lineno, colno, error) => {};
+```
+
+> **メモ:** 歴史的な理由により、 `window` の `onerror` はイベントハンドラープロパティの中で唯一、複数の引数を受け取ります。
+
+## イベント型
+
+イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は {{domxref("ErrorEvent")}} インスタンスであり、そうでない場合は {{domxref("Event")}} インスタンスです。
+
+{{InheritanceDiagram("ErrorEvent")}}
+
+## 使用上の注意
+
+### イベントハンドラープロパティ
+
+歴史的な理由から、 `onerror` イベントハンドラープロパティは `Window` オブジェクトに対してのみ、他のイベントハンドラープロパティとは異なる動作をします。
+
+これは `onerror` に割り当てられたハンドラーにのみ適用され、 `addEventListener()` を使用して追加したハンドラーには適用されないことに注意してください。
+
+#### キャンセル
+
+イベントハンドラープロパティに割り当てられたほとんどのイベントハンドラーでは、ハンドラーから `false` を返すことで、イベントの既定値の動作を取り消すことができます。
+
+```js
+textarea.onkeydown = () => false;
+```
+
+しかし、 `Window` の `error` イベントの既定の動作をイベントハンドラープロパティから取り消すためには、代わりに `true` を返す必要があります。
+
+```js
+window.onerror = () => true;
+```
+
+取り消された場合、エラーはコンソールに現れませんが、現在のスクリプトの実行は停止します。
+
+#### 引数
+
+イベントハンドラーのシグネチャは `addEventListener()` と `onerror` で異なります。 `Window.addEventListener()` に渡されるイベントハンドラーは、単一の {{domxref("ErrorEvent")}} オブジェクトを受け取りますが、 `onerror` ハンドラーは {{domxref("ErrorEvent")}} オブジェクトのプロパティと一致する 5 つの引数を受け取ります:
+
+- `event`
+ - : 文字列で、関数を説明する人間が読むのに適したエラーメッセージが入ります。 {{domxref("ErrorEvent.message")}} と同じです。
+- `source`
+ - : 文字列で、エラーが発生したスクリプトファイルの名前が入ります。
+- `lineno`
+ - : 整数で、エラーが発生したスクリプトファイルの行番号が入ります。
+- `colno`
+ - : 整数で、エラーが発生したスクリプトファイルの列番号が入ります。
+- `error`
+ - : 発生したエラーです。ふつうは {{jsxref("Error")}} オブジェクトです。
+
+```js
+window.onerror = (a, b, c, d, e) => {
+ console.log(`message: ${a}`);
+ console.log(`source: ${b}`);
+ console.log(`lineno: ${c}`);
+ console.log(`colno: ${d}`);
+ console.log(`error: ${e}`);
+
+ return true;
+};
+```
+
+> **メモ:** これらの引数名は [HTML イベントハンドラー属性](/ja/docs/Web/HTML/Attributes#event_handler_attributes)で監視可能で、最初の引数は `message` ではなく `event` と呼ばれます。
+
+この特別な動作は `window` の `onerror` イベントハンドラーに対してのみ起こります。 [`Element.onerror`](/ja/docs/Web/API/HTMLElement/error_event) ハンドラーの場合は単一の {{domxref("ErrorEvent")}} オブジェクトを受け取ります。
## 例
@@ -45,15 +96,20 @@ slug: Web/API/Window/error_event
- Event log:
-
+ Event log:
+
```
```css hidden
body {
display: grid;
- grid-template-areas: "control log";
+ grid-template-areas: "control log";
}
.controls {
@@ -93,7 +149,7 @@ img {
const log = document.querySelector(".event-log-contents");
window.addEventListener("error", (event) => {
- log.textContent = log.textContent + `${event.type}: ${event.message}\n`;
+ log.textContent = `${log.textContent}${event.type}: ${event.message}\n`;
console.log(event);
});
@@ -118,4 +174,4 @@ scriptError.addEventListener("click", () => {
## 関連情報
-- `Window` を対象としたこのイベント: {{domxref("Window/error_event", "error")}} イベント
+- `Element` を対象としたこのイベント: {{domxref("HTMLElement/error_event", "error")}} イベント
diff --git a/files/ja/web/api/window/load_event/index.md b/files/ja/web/api/window/load_event/index.md
index 9566aa5b933012..71260b580e43f9 100644
--- a/files/ja/web/api/window/load_event/index.md
+++ b/files/ja/web/api/window/load_event/index.md
@@ -1,34 +1,35 @@
---
title: "Window: load イベント"
+short-title: load
slug: Web/API/Window/load_event
+l10n:
+ sourceCommit: 367358d6847aa1766344951207dfd79d5c073a66
---
{{APIRef}}
-**`load`** イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。これは {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。
-
-
-
-
- バブリング
- なし
-
-
- キャンセル
- 不可
-
-
- インターフェイス
- {{domxref("Event")}}
-
-
- イベントハンドラープロパティ
-
- {{domxref("GlobalEventHandlers/onload", "onload")}}
-
-
-
-
+**`load`** イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。
+これは {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+> **メモ:** たとえ `bubbles` が `true` に初期化されていても、 `load` という名前のイベントはすべて `window` に伝搬しません。 `window` 上で `load` イベントを捕捉するには、 `load` イベントを直接 `window` に配信する必要があります。
+
+> **メモ:** メイン文書が読み込まれたときに配信される `load` イベントは `window` に配信されますが、 2 つのプロパティが変更されています。 `target` は `document` であり、`path` は `undefined` です。これら 2 つのプロパティは過去との互換性のために変更されています。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("load", (event) => {});
+
+onload = (event) => {};
+```
+
+## イベント型
+
+一般的な {{domxref("Event")}} です。
## 例
@@ -58,15 +59,20 @@ window.onload = (event) => {
- Event log:
-
+ Event log:
+
```
```css hidden
body {
display: grid;
- grid-template-areas: "control log";
+ grid-template-areas: "control log";
}
.controls {
@@ -94,7 +100,7 @@ button {
}
```
-#### JS
+#### JavaScript
```js
const log = document.querySelector(".event-log-contents");
@@ -102,21 +108,21 @@ const reload = document.querySelector("#reload");
reload.addEventListener("click", () => {
log.textContent = "";
- window.setTimeout(() => {
+ setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener("load", (event) => {
- log.textContent = log.textContent + "load\n";
+ log.textContent += "load\n";
});
document.addEventListener("readystatechange", (event) => {
- log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+ log.textContent += `readystate: ${document.readyState}\n`;
});
document.addEventListener("DOMContentLoaded", (event) => {
- log.textContent = log.textContent + `DOMContentLoaded\n`;
+ log.textContent += `DOMContentLoaded\n`;
});
```
@@ -134,4 +140,9 @@ document.addEventListener("DOMContentLoaded", (event) => {
## 関連情報
-- 関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
+- 文書 [readyState](/ja/docs/Web/API/Document/readyState) API
+- 関連イベント:
+ - {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
+ - {{domxref("Document/readystatechange_event", "readystatechange")}}
+ - {{domxref("Window/beforeunload_event", "beforeunload")}}
+ - {{domxref("Window/unload_event", "unload")}}
diff --git a/files/ja/web/api/window/unload_event/index.md b/files/ja/web/api/window/unload_event/index.md
index b82f92776b994a..80cc9b36135f6a 100644
--- a/files/ja/web/api/window/unload_event/index.md
+++ b/files/ja/web/api/window/unload_event/index.md
@@ -1,34 +1,16 @@
---
-title: unload
+title: "Window: unload イベント"
+short-title: unload
slug: Web/API/Window/unload_event
+l10n:
+ sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3
---
{{APIRef}}
-`unload` イベントは、文書または子リソースがアンロードされるときに発生します。
-
-
-
-
- バブリング
- なし
-
-
- キャンセル
- 不可
-
-
- インターフェイス
- {{domxref("Event")}}
-
-
- イベントハンドラープロパティ
-
- {{domxref("WindowEventHandlers/onunload", "onunload")}}
-
-
-
-
+> **警告:** 開発者はこのイベントを使用するのを避けてください。下記の「使用上のメモ」を参照してください。
+
+**`unload`** イベントは、文書または子リソースがアンロードされるときに発生します。
以下のイベントの後に発生します。
@@ -37,25 +19,65 @@ slug: Web/API/Window/unload_event
文書は以下のような状態にあります。
-- すべてのリソースがまだ存在する (img、iframe など)
+- すべてのリソースがまだ存在する(img、iframe など)
- エンドユーザーから見えるものは何もない
-- UI でのやり取りは効果がない ({{domxref("window.open")}}, {{domxref("window.alert", "alert")}}, {{domxref("window.confirm", "confirm")}}, など)
+- UI 操作の効果がない({{domxref("window.open")}}, {{domxref("window.alert", "alert")}}, {{domxref("window.confirm", "confirm")}}, など)
- エラーが発生しても、アンロードの処理の流れは停止しない
-unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの `unload` の前に行われます (以下の例を参照)。
+unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの `unload` の**前**に行われます(以下の例を参照)。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("unload", (event) => {});
+onunload = (event) => {};
+```
+
+## イベント型
+
+一般的な {{domxref("Event")}} です。
+
+## イベントハンドラーの別名
+
+`Window` インターフェイスに加えて、イベントハンドラープロパティ `onunload` は以下のターゲットでも利用できます。
+
+- {{domxref("HTMLBodyElement")}}
+- {{domxref("HTMLFrameSetElement")}}
+- {{domxref("SVGSVGElement")}}
+
+## 使用上のメモ
+
+開発者はこのイベントを使用しないでください。
+
+特にモバイルでは `unload` イベントが確実には発行されません。例えば、次の例では `unload` イベントはまったく発生しません。
+
+1. モバイルユーザーがページにアクセスします。
+2. その後、ユーザーが異なるアプリに切り替えます。
+3. その後、ユーザーがアプリマネージャーからブラウザーを閉じます。
+
+また、 `unload` イベントは[前方/後方キャッシュ](https://web.dev/articles/bfcache) (bfcache) と互換性がありません。このイベントを使用している多くのページは、イベントが発生した後はページが存在し続けないことを想定しているからです。これに対抗するため、いくつかのブラウザー(Firefox など)は unload リスナーがある場合、ページを bfcache に配置しませんが、これはパフォーマンスにとって悪いことです。他にも、 Chrome のように、ユーザーが操作しても `unload` を発行しないものもあります。
+
+ユーザーのセッションの終わりを指示するために使用するのに最適なイベントは [`visibilitychange`](/ja/docs/Web/API/Document/visibilitychange_event) イベントです。 `visibilitychange` に対応していないブラウザーでは、 [`pagehide`](/ja/docs/Web/API/Window/pagehide_event) イベントが次善の選択肢となります。
+
+ページのアンロードイベントを検出する場合は、 `pagehide` イベントを待ち受けするのがベストです。
+
+`unload` イベントに関連する問題についての詳しい情報は、[ページライフサイクル API](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event) ガイドを参照してください。
## 例
```html
-
+
+
Parent Frame
@@ -70,14 +92,15 @@ unload イベントは文書ツリーにも続くことに注意してくださ
```html
-
+
+
Child Frame
@@ -94,11 +117,16 @@ unload イベントは文書ツリーにも続くことに注意してくださ
{{Specifications}}
-## ブラウザーの対応
+## ブラウザーの互換性
{{Compat}}
## 関連情報
-- 関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}
+- 関連イベント: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}
- [Unloading Documents — unload a document](https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents)
+- [`visibilitychange`](/ja/docs/Web/API/Document/visibilitychange_event) イベント
+- [Don't lose user and app state, use Page Visibility](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/) は、 `beforeunload`/`unload` ではなく、 `visibilitychange` を使用する理由について詳しく説明しています。
+- [Page Lifecycle API](https://developer.chrome.com/blog/page-lifecycle-api/#developer-recommendations-for-each-state) は、ウェブアプリケーションでページのライフサイクル動作を処理するための最善の手法を提供します。
+- [PageLifecycle.js](https://github.com/GoogleChromeLabs/page-lifecycle): ページのライフサイクル動作におけるブラウザー間の不整合に対処する JavaScript ライブラリーです。
+- [Back/forward cache](https://web.dev/articles/bfcache) は前方/後方キャッシュとは何か、そして様々なページライフサイクルイベントに対するその意味について説明しています。
diff --git a/files/ja/web/css/cssom_view/coordinate_systems/css-coords.svg b/files/ja/web/css/cssom_view/coordinate_systems/css-coords.svg
new file mode 100644
index 00000000000000..863a879845b227
--- /dev/null
+++ b/files/ja/web/css/cssom_view/coordinate_systems/css-coords.svg
@@ -0,0 +1,11 @@
+
+スクリーン (0, 0)
+
+ページ (0, 0)
+
+ビューポート外へ
+スクロールした
+ページコンテンツ
+
+ビューポート (0, 0)
+
\ No newline at end of file
diff --git a/files/ja/web/css/cssom_view/coordinate_systems/index.md b/files/ja/web/css/cssom_view/coordinate_systems/index.md
index e74f6c6c02908b..6c33ad9d1c9708 100644
--- a/files/ja/web/css/cssom_view/coordinate_systems/index.md
+++ b/files/ja/web/css/cssom_view/coordinate_systems/index.md
@@ -1,6 +1,8 @@
---
title: 座標系
slug: Web/CSS/CSSOM_view/Coordinate_systems
+l10n:
+ sourceCommit: b965392d6e4f2c897e914a3b69dec3e2a4212782
---
{{CSSRef}}
@@ -15,13 +17,18 @@ slug: Web/CSS/CSSOM_view/Coordinate_systems
ウェブ上では、既定の原点は与えられたコンテキストの左*上*隅です(正の Y 座標の値は原点より下になります)。これは、ほとんどの数学的モデルが原点を左*下*隅に置いており、正の Y 座標の値が原点よりも上を示すのとは異なることに注意してください。
-3D グラフィックスを描くとき、あるいは三次元を使ってオブジェクトを前から後ろに重ねるときには、 Z 座標も使われます。これは、正の場合は見る人から離れる方向、負の場合は見る人に近づく方向の距離を指定します。
+3つ目の次元を用いてオブジェクトを前から後ろに重ねる場合、 Z 軸を使用します。 Z 軸は、視聴者から画面の表面へと向かいます。CSS の z-index 属性は、位置を指定した要素がこの軸のどこに位置するかに影響し、見る人から遠ざかったり近づいたりする効果を与えます。
> **メモ:** 実際には、これらの座標系の定義や方向は、 {{cssxref("transform")}} などの CSS プロパティを使って変更することができます。しかし、ここでは標準的な座標系についてだけ説明します。
## 標準 CSSOM 座標系
-以下の通り、 CSS オブジェクトモデルで使用される標準座標系が 4 つあります。
+CSS オブジェクトモデルで使用する 4 つの標準座標系があります。
+主要な座標系を支援するために、以下の図はビューポートの外にスクロールされたコンテンツを含むブラウザーウィンドウを持つモニターを表示させています。
+ビューポートの外にスクロールされたページコンテンツは、「ページ」座標の元がどこにあるかを示すために、ブラウザーウィンドウの上に半透過率で表示されています。
+「クライアント」、「ページ」、「ビューポート」座標系の原点が強調表示されています。
+
+![ビューポートの外側にコンテンツを含むブラウザーウィンドウを持つコンピューターモニターの図。ラベルは、ページ、画面、ビューポート座標の元を表示させます。](css-coords.svg)
### オフセット
@@ -29,127 +36,92 @@ slug: Web/CSS/CSSOM_view/Coordinate_systems
例えば、{{domxref("MouseEvent", "マウスイベント", "", 1)}}が発生すると、イベントの {{domxref("MouseEvent.offsetX", "offsetX")}} と {{domxref("MouseEvent.offsetY", "offsetY")}} 属性で指定されたマウスの位置は、イベントを配信したノードの左上の角に相対的に示されます。原点は {{cssxref("padding-left")}} と {{cssxref("padding-top")}} によって指定された距離だけ内側に置かれます。
-### クライアント
+### ビューポート
+
+「ビューポート」(または「クライアント」)座標系は、イベントが発生したビューポートまたは閲覧コンテキストの左上隅を原点として使用します。これは文書が表示される表示領域全体です。
-「クライアント」座標系は、イベントが発生したビューポートまたは閲覧コンテキストの左上隅を原点として使用します。これは文書が表示される表示領域全体です。スクロールは加味されません。
+例えばデスクトップコンピューターでは、 {{domxref("MouseEvent.clientX")}} と {{domxref("MouseEvent.clientY")}} プロパティは、イベント発生時のマウスカーソルの位置を、 {{domxref("window")}} の左上角からの相対位置で示します。
+スタイラスやポインターを使用している場合、{{domxref("TouchEvent", "タッチイベント", "", 1)}}における {{domxref("Touch.clientX")}} と {{domxref("Touch.clientY")}} の座標は同じ原点からの相対座標です。
-例えばデスクトップコンピューターでは、 {{domxref("MouseEvent.clientX")}} と {{domxref("MouseEvent.clientY")}} プロパティはイベント発生時のマウスカーソルの位置を、ブラウザーウィンドウの左上角からの相対位置で示しています。ウィンドウの左上隅は、文書の内容やスクロールの有無に関わらず、常に (0, 0) です。言い換えれば、文書をスクロールすると、文書内の任意の位置のクライアント座標が変化します。
+ウィンドウの左上隅は、文書の内容やスクロールの有無に関わらず、常に (0, 0) です。言い換えれば、文書をスクロールすると、文書内の任意の位置のビューポート座標が変化します。
### ページ
-「ページ」座標系は、ピクセルの位置を、そのピクセルが位置する {{domxref("Document")}} 全体の左上隅からの相対的な位置で指定します。つまり、文書内の要素のある点は、(直接的に位置を変えるか、間接的に他のコンテンツを追加したりサイズを変えたりすることで)その要素が移動しない限り、ページモデルにおいて同じ座標を維持することになります。
+「ページ」座標系は、レンダリングされた {{domxref("Document")}} 全体の左上隅からの相対ピクセル位置を与えます。
+つまり、文書内の要素のこの点は、レイアウト変更によって要素が移動しない限り、ユーザーが文書内を水平または垂直にスクロールしても同じ座標になります。
マウスイベントの {{domxref("MouseEvent.pageX", "pageX")}} と {{domxref("MouseEvent.pageY", "pageY")}} 属性は、イベントが発生した時のマウスの位置を、文書の左上隅を基準として提供するものです。
+{{domxref("TouchEvent", "タッチイベント", "", 1)}}における {{domxref("Touch.pageX")}} と {{domxref("Touch.pageY")}} の座標は同じ原点からの相対座標です。
### スクリーン
-最後に、「スクリーン」モデルについてです。これは、ユーザーの画面全体の左上隅を原点とする座標系であることは、おそらく明白でしょう。つまり、例えばウィンドウを移動したり、ユーザーの画面形状を変更したり(ディスプレイの解像度を変更したり、システムにモニターを追加または削除したり)すると、文書内のある点の位置が変化することになります。
-
+最後に、「スクリーン」モデルについて説明します。これは、ユーザーの画面空間の左上を原点とするものです。
+この座標系の各点は、単一の論理ピクセルを表しますので、値は各軸に沿っ て整数値で増加したり減少したりします。
+文書内の指定された点の位置は、例えば格納されているウィンドウが移動された場合や、ユーザーの画面形状が変更された場合(ディスプレイの解像度が変更された場合や、システムにモニターが追加・除去された場合)などに変化します。
{{domxref("MouseEvent.screenX")}} と {{domxref("MouseEvent.screenY")}} プロパティは、画面の原点を基準としたマウスイベントの位置の座標を示します。
+{{domxref("TouchEvent", "タッチイベント", "", 1)}}における {{domxref("Touch.screenX")}} と {{domxref("Touch.screenY")}} の座標は同じ原点からの相対座標です。
+
## 例
-では、例を見てみましょう。この単純な例では、入れ子になったボックスのセットを作成します。マウスが内側のボックスに入ったり、内側を移動したり、外側に出たりするたびに、対応するイベントがボックス内の情報メッセージのセットを更新して処理され、利用可能な 4 つの座標系それぞれにおける現在のマウス座標が一覧表示されます。
+要素内のマウス座標をログ出力する例を見ていきましょう。
+マウスが内側のボックスに入ったり、内側を移動したり、内側から出たりするたびに、利用できる 4 つのシステムのそれぞれで現在のマウス座標をログ出力することで、イベントが処理されます。
### JavaScript
-スクリプトを 2 つの部分に分けて見てみましょう。まず、座標を画面に記録するコード。このコードは、私たちが見ている様々なマウスイベントのイベントハンドラーから呼ばれることになります。
-
-#### 座標を表示
-
-HTML を見ればわかるように、内側のボックス(イベントを監視しているボックス)には、これからレポートする 4 つの座標系ごとにいくつかの段落が含まれています。
-
-```js
-let inner = document.querySelector(".inner");
-let log = document.querySelector(".log");
-
-function setCoords(e, type) {
- let idX = type + "X";
- let idY = type + "Y";
-
- document.getElementById(idX).innerText = e[idX];
- document.getElementById(idY).innerText = e[idY];
-}
-```
-
-座標情報を表示する段落を含む内側のボックスにある {{HTMLElement("div")}} への参照が `log` に取得されます。
-
-`setCoords()` 関数は、入力として {{domxref("MouseEvent")}} と座標を取得するときに使用する原点の名前を受け取るように設計されています。そして、その実装は非常にシンプルです。変数 `idX` と `idY` には、指定された座標系における座標に対応するプロパティの名前が文字列として設定されます。例えば、 `type` の値が `"page"` であれば、 `idX` は `"pageX"` となり、 `idY` は `"pageY"` となります。
-
-#### マウスイベントの取り扱い
-
-`setCoords()` は様々なマウスイベントのイベントハンドラー、 `update()` から呼び出されます。以下のようなものです。
+JavaScript では、コードは {{domxref("EventTarget.addEventListener", "addEventListener()")}} を呼び出して、 inner ボックスに {{domxref("Element/mouseenter_event", "mouseenter")}}、{{domxref("Element/mousemove_event", "mousemove")}}、{{domxref("Element/mouseleave_event", "mouseleave")}} のイベントハンドラーを設定します。
+それぞれのイベントに対して `setCoords()` 関数を呼び出して、`` 要素の内部テキストに各システムの座標を設定しています。
```js
-function update(e) {
- setCoords(e, "offset");
- setCoords(e, "client");
- setCoords(e, "page");
- setCoords(e, "screen");
+const log = document.querySelector(".log");
+const inner = document.querySelector(".inner");
+
+function setCoords(e) {
+ log.innerText = `
+ オフセット X/Y: ${e.screenX}, ${e.screenY}
+ ビューポート X/Y: ${e.clientX}, ${e.clientY}
+ ページ X/Y: ${e.pageX}, ${e.pageY}
+ スクリーン X/Y: ${e.screenX}, ${e.screenY}`;
}
-inner.addEventListener("mouseenter", update, false);
-inner.addEventListener("mousemove", update, false);
-inner.addEventListener("mouseleave", update, false);
+inner.addEventListener("mousemove", setCoords);
+inner.addEventListener("mouseenter", setCoords);
+inner.addEventListener("mouseleave", setCoords);
```
-イベントハンドラーは `update()` メソッドの中にあります。これはそれぞれの座標系ごとに、 `setCoords()` を 1 回ずつ呼び出し、発行されたイベントを渡します。
-
-メインコードでは、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を {{domxref("Element/mouseenter_event", "mouseenter")}}、{{domxref("Element/mousemove_event", "mousemove")}}、{{domxref("Element/mouseleave_event", "mouseleave")}} の各種別に対して呼び出し、内側のボックス上にイベントハンドラーをセットアップしています。
-
### HTML
-この例の HTML は以下の通りです。なお、 ID が `"log"` である `
` の中で、それぞれの座標系ごとに段落があり、各モデルの座標を受け取って表示するための要素に {{HTMLElement("span")}} が使用されていることに注意してください。
+HTML は `"log"` クラスを持つ `
` を収めており、マウスイベントのデータを表示します。
```html
-
-
- Offset-relative: 0 ,
- 0
-
-
- Client-relative: 0 ,
- 0
-
-
- Page-relative: 0 ,
- 0
-
-
- Screen-relative: 0 ,
- 0
-
-
+
この部分にマウスオーバーすると座標が表示されます
```
### CSS
-CSS はここではほとんど見栄えのためのものです。クラス `"outer"` は、 MDN ウィンドウで表示するために意図的に幅を広くして、水平方向にスクロールできるようにした包含ボックスに使用されています。 `"inner"` ボックスはイベントを追跡するためのもので、マウス座標を表示します。
+コンテンツを含むボックスのクラス `"outer"` は、コンテンツをスクロールさせたときのマウス座標の影響を見るために、意図的に幅を広くしています。
+`"inner"` の段落はマウスイベントを記録する場所です。
```css
.outer {
width: 1000px;
- height: 200px;
- background-color: red;
}
.inner {
+ font-family: monospace;
position: relative;
width: 500px;
height: 150px;
top: 25px;
left: 100px;
- background-color: blue;
+ background-color: darkblue;
color: white;
cursor: crosshair;
user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
}
.log {
@@ -161,16 +133,22 @@ CSS はここではほとんど見栄えのためのものです。クラス `"o
### 結果
-ここでは、その結果を実際に見てみましょう。青いボックスの中をマウスで移動しながら、マウスの X 座標と Y 座標の値が、値を取得できる様々な座標系で変化する様子をご覧ください。また、この例を水平方向にスクロールさせると、返される値が変化するものの、 `clientX` の値が変化しないことに注意してください。
+この結果を実際に見てみましょう。青いボックスの中をマウスで移動しながら、マウスの X 座標と Y 座標の値がさまざまな座標系で変化する様子をご覧ください。
{{EmbedLiveSample("Example", 600, 250)}}
## 関連情報
-- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms): 座標系を変更する方法
-- マウスイベントの座標:
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms): 座標系を変更する方法
+- {{domxref("MouseEvent", "マウスイベント", "", 1)}}の座標:
- {{domxref("MouseEvent.offsetX")}} と {{domxref("MouseEvent.offsetY")}}
- {{domxref("MouseEvent.clientX")}} と {{domxref("MouseEvent.clientY")}}
- {{domxref("MouseEvent.pageX")}} と {{domxref("MouseEvent.pageY")}}
- {{domxref("MouseEvent.screenX")}} と {{domxref("MouseEvent.screenY")}}
+
+- {{domxref("Touch", "タッチイベント")}}の座標:
+
+ - {{domxref("Touch.clientX")}} と {{domxref("Touch.clientY")}}
+ - {{domxref("Touch.pageX")}} と {{domxref("Touch.pageY")}}
+ - {{domxref("Touch.screenX")}} と {{domxref("Touch.screenY")}}
diff --git a/files/ko/web/api/intersection_observer_api/index.md b/files/ko/web/api/intersection_observer_api/index.md
new file mode 100644
index 00000000000000..4fc6c0a9736a3d
--- /dev/null
+++ b/files/ko/web/api/intersection_observer_api/index.md
@@ -0,0 +1,611 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+l10n:
+ sourceCommit: 6f0b1e294dc3aa8d6423df8aae059081a3464676
+---
+
+{{DefaultAPISidebar("Intersection Observer API")}}
+
+Intersection Observer API는 상위 요소 또는 최상위 문서의 {{Glossary("viewport")}}와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다.
+
+역사적으로, 요소의 가시성 또는 관련된 두 요소 사이의 상대적 가시성을 감지하는 것은 해결책을 신뢰할 수 없고 브라우저와 사용자가 접근하는 사이트를 느리게 만드는 어려운 작업이었습니다. Web이 성숙해짐에 따라, 이러한 종류의 정보의 요구가 늘어났습니다. 교차 정보는 다음과 같은 많은 이유로 필요합니다.
+
+- 페이지가 스크롤 될 때 이미지의 또는 다른 컨텐츠의 지연 로딩(Lazy-loading) 됩니다.
+- 스크롤할 때 더 많은 컨텐츠가 로드되고 렌더링 되는 "무한 스크롤" 웹 사이트를 구현함으로써, 사용자가 페이지를 넘길 필요가 없습니다.
+- 광고 수익 산정을 위해 광고 가시성을 보고합니다.
+- 사용자가 결과를 볼 수 있을지 여부에 따라 작업 또는 애니메이션 프로세스를 수행할지 여부를 결정합니다.
+
+과거에 교차 감지 구현은 영향을 받는 모든 요소에 대해 필요한 정보를 축적하기 위해 이벤트 처리기와 {{domxref("Element.getBoundingClientRect()")}}와 같은 메서드를 호출하는 루프를 포함하였습니다. 모든 코드가 메인 스레드에서 실행되기 때문에, 이 중 하나라도 성능 문제를 일으킬 수 있습니다. 이러한 테스트와 함께 사이트가 로드 될 때, 완전히 못생겨질 수 있었습니다.
+
+무한 스크롤을 사용하는 웹 페이지를 생각해봅시다. 주기적으로 페이지에 배치되는 광고를 관리하기 위해 공급업체가 제공하는 라이브러리를 사용하고, 여기저기에 애니메이션 그래픽이 있으며, 공지 박스 같은 것들을 그리는 사용자 정의 라이브러리도 사용합니다. 이 각각에는 해당 교차 감지 루틴이 있고 모두 메인 스레드에서 실행됩니다. 웹 사이트 제작자는 그들이 사용하는 두 가지 라이브러리에 들어있는 내부 작업에 대해서 조금만 알기 때문에 이러한 일이 일어나는 지도 깨닫지 못할 것입니다. 유저가 페이지를 스크롤 할 때, 이러한 교차 감지 루틴은 스크롤 처리 코드가 실행되는 동안 지속적으로 발생하여 사용자가 브라우저, 웹사이트, 컴퓨터에 불만을 느끼게 합니다.
+
+Intersection Observer API는 특정 요소가 다른 요소(또는 {{Glossary("viewport")}})와의 교차점에 들어가거나 나갈 때 또는 두 요소 간의 교차점이 지정된 양만큼 변화될 때 실행되는 콜백 함수를 코드에 등록할 수 있습니다. 이 방법으로, 사이트는 더이상 이러한 종류의 요소 교차를 감시하기 위해 메인 스레드에 아무것도 할 필요가 없고, 브라우저는 적합하다고 판단되는 대로 교차 관리를 자유롭게 최적화할 수 있습니다.
+
+Intersection Observer API가 알려주지 않는 한 가지: 겹치는 픽셀의 정확한 수나 구체적으로 어떤 픽셀인지를 알려주지 못합니다. 그러나 이 API는 "약 N% 정도 겹친다면 어떤 작업을 수행해야 한다"는 더 일반적인 사용 사례를 다룹니다.
+
+## 교차 관찰자 개념과 사용
+
+Intersection Observer API는 다음과 같은 상황이 발생했을 때 호출되는 콜백 함수를 구성할 수 있습니다.
+
+- **대상** 요소는 기기의 뷰포트 또는 특정 요소와 교차합니다. 특정 요소는 Intersection Observer API의 목적에 따라 **루트 요소** 또는 **루트**라고 불립니다.
+- observer가 최초로 대상 요소를 관찰하라고 요청 받은 시점입니다.
+
+일반적으로, 대상 요소와 가장 가까운 스크롤 가능한 상위 요소나 타겟요소가 스크롤 가능한 요소의 하위 요소가 아닌 경우, 장치 뷰포트와 관련된 교차 변화를 관찰하고 싶어합니다. 장치 뷰포트와 관련된 교차를 관찰하기 위해서는 `root` 옵션에 `null`을 지정해야 합니다. 교차 관찰자 옵션에 대한 더 자세한 설명을 위해서 계속 읽어야 합니다.
+
+뷰포트를 루트로 사용하던지 다른 요소들을 루트로 사용하던지, API는 같은 방식으로 동작하여 대상 요소의 가시성이 변화하여 요청한 양만큼 루트와 교차할 때마다 사용자가 제공한 콜백함수를 실행합니다.
+
+타겟 요소와 타겟 요소의 루트 사이의 교차의 정도는 **intersection ratio** 입니다. 0.0과 1.0 사이의 값으로 보이는 대상 요소의 백분율을 나타냅니다.
+
+### 교차 관찰자 생성하기
+
+intersection observer는 생성자를 호출하고, threshold가 한 방향 혹은 다른 방향으로 교차할 때마다 실행하기 위한 callback 함수를 전달하여 생성합니다.
+
+```js
+let options = {
+ root: document.querySelector("#scrollArea"),
+ rootMargin: "0px",
+ threshold: 1.0,
+};
+
+let observer = new IntersectionObserver(callback, options);
+```
+
+threshold가 1.0이라는 의미는 `root` 옵션으로 지정된 요소 내에서 타겟 요소가 100% 보이면 콜백이 호출된다는 의미입니다. 다음과 같은 필드가 있습니다.
+
+#### 교차 관찰자 옵션
+
+{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 생성자에 전달되는 `options` 객체는 observer의 콜백이 언제 호출되는지를 제어할 수 있게 해줍니다. 이 객체는 다음과 같은 필드를 가지고 있습니다.
+
+- `root`
+ - : 대상 가시성을 체크하기 위한 뷰포트로 사용되는 요소. 반드시 타겟의 상위 요소이어야 합니다. 만약 뷰포트를 지정하지 않거나 `null` 이면 브라우저 뷰포트가 기본으로 설정됩니다.
+- `rootMargin`
+ - : 루트 주위의 여백입니다. CSS {{cssxref("margin")}} 속성과 비슷한 값을 가질 수 있습니다. 예시. `"10px 20px 30px 40px"` (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 이 값의 집합은 교차 지점을 계산하기 전에 루트 요소 경계 박스의 각 사이드 값을 늘리거나 줄일 수 있습니다. 기본 값은 0입니다.
+- `threshold`
+ - : 관찰자의 콜백이 무조건 실행되어야 하는 대상의 가시성 백분율을 나타내는 숫자 또는 숫자 배열입니다. 만약 가시성이 50% 지점을 넘는 경우만 감지하고 싶다면, 0.5를 지정하여 사용할 수 있습니다. 만약 가시성이 25%만큼 넘어갈 때마다 콜백을 실행하고 싶다면, \[0, 0.25, 0.5, 0.75, 1]을 지정하여 사용할 수 있습니다. 기본 값은 0 입니다. (1 픽셀이라도 보이면, 콜백이 실행됩니다.) 1.0의 값은 모든 픽셀이 가시 상태가 될 때까지 임계값이 통과되지 않는다는 것을 의미합니다.
+
+#### 관찰할 요소를 대상으로 하기
+
+관찰자를 생성했다면, 관찰할 타겟 요소를 전달해야 합니다.
+
+```js
+let target = document.querySelector("#listItem");
+observer.observe(target);
+
+// observer를 위해 설정한 콜백은 바로 지금 최초로 실행됩니다
+// 대상을 관찰자에 할당할 때까지 기다립니다. (타겟이 현재 보이지 않더라도)
+```
+
+언제든지 타겟 요소가 `IntersectionObserver`에 지정된 임계값을 만족시키면, 콜백은 호출됩니다. 콜백은 {{domxref("IntersectionObserverEntry")}} 객체와 관찰자 목록을 받습니다.
+
+```js
+let callback = (entries, observer) => {
+ entries.forEach((entry) => {
+ // 각 엔트리는 관찰된 하나의 교차 변화을 설명합니다.
+ // 대상 요소:
+ // entry.boundingClientRect
+ // entry.intersectionRatio
+ // entry.intersectionRect
+ // entry.isIntersecting
+ // entry.rootBounds
+ // entry.target
+ // entry.time
+ });
+};
+```
+
+콜백이 수신한 엔트리 목록은 교차 상태의 변화를 보고한 각 대상에 대한 하나의 엔트리를 포함합니다. 엔트리가 현재 루트와 교차하는 요소를 나타내는지 보기 위해 {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} 속성 값을 확인합니다.
+
+콜백이 메인스레드에서 실행되는 것을 유의해야 합니다. 가능한 한 최대한 빨리 동작해야 합니다. 만약 시간 소비가 필요한 일이 마무리 되어야 한다면, {{domxref("Window.requestIdleCallback()")}}을 사용하세요.
+
+또한, `root` 옵션을 지정했다면, 대상은 반드시 루트 요소의 하위 요소이어야만 한다는 점을 명심해야 합니다.
+
+### 교차 계산 방법
+
+Intersection Observer API가 고려하는 모든 영역은 직사각형입니다. 불규칙한 모양의 요소는 모든 요소를 둘러싸는 부분들을 가장 작은 직사각형이 차지하는 것으로 여겨집니다. 비슷하게, 요소의 보이는 부분이 직사각형이 아니면, 요소의 교차하는 직사각형이 요소의 보이는 모든 부분을 포함하는 가장 작은 직사각형으로 간주됩니다.
+
+{{domxref("IntersectionObserverEntry")}}에서 제공하는 다양한 속성이 교차를 어떻게 설명하는지를 조금 이해하는 것이 유용합니다.
+
+#### 교차 루트와 루트 여백
+
+컨테이너와 요소의 교차를 따라가기 전에, 우리는 컨테이너가 무엇인지를 알아야 합니다. 컨테이너는 **교차 루트** 또는 **루트 요소** 입니다. 관찰 대상 요소의 상위 요소인 document의 특정 요소이거나 컨테이너로 문서 뷰포트를 사용하기 위한 `null`이 될 수 있습니다.
+
+**루트 교차 직사각형**은 대상 요소를 확인하기 위한 직사각형입니다. 이 직사각형은 다음과 같이 결정됩니다.
+
+- 만약 교차 루트가 절대적인 루트라면(즉, 최상단 {{domxref("Document")}}), 루트 교차 직사각형은 뷰포트 직사각형입니다.
+- 교차 루트에 overflow clip이 있는 경우, 루트 교차 직사각형은 루트 요소의 컨텐츠 영역입니다.
+- 위 두 가지 경우가 아니라면, root 교차 직사각형은 교차 루트 경계 클라이언트 직사각형입니다.({{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}}를 호출하여 반환된)
+
+루트 교차 직사각형은 {{domxref("IntersectionObserver")}}를 생성할 때, **root margin** , `rootMargin`을 설정함으로 인해 조정될 수 있습니다. `rootMargin` 값은 최종 교차 루트 경계 (콜백이 실행될 때 {{domxref("IntersectionObserverEntry.rootBounds")}}에 공개된)를 생성하기 위해 교차 루트 경계 박스의 각 측면을 더해 오프셋을 정의합니다.
+
+#### Thresholds
+
+매번 대상 요소가 얼마나 보이는지의 극미한 변화마다 보고하는 것보다 Intersection Observer API는 **thresholds** 를 사용합니다. 관찰자를 생성할 때, 하나 또는 하나 이상의 보이는 대상 요소의 백분율을 나타내는 숫자 값을 제공할 수 있습니다. 그런 다음, API는 이러한 임계값을 넘어가는 가시성 변경 사항만 보고합니다.
+
+예를 들어, 대상의 가시성이 각 25% 지점보다 크거나 작을 때마다 보고를 받고 싶다면, 관찰자를 생성할 때 \[0, 0.25, 0.5, 0.75, 1]로 이루어진 임계값 목록을 지정해야 합니다.
+
+콜백이 호출될 때, 어느 방향에서든 노출된 양이 임계값 중 하나를 초과하는 루트 변화를 교차하는 정도가 관찰된 각 대상에 대한 `IntersectionObserverEntry` 객체 목록을 받습니다.
+
+엔트리의 {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} 속성을 관찰함으로써 대상이 현재 루트를 교차하는 것을 볼 수 있습니다. 만약 해당 값이 `true` 라면, 대상은 최소한 부분적으로 루트 요소나 문서와 교차하고 있습니다. 이를 통해 엔트리는 교차하는 요소에서 더 이상 교차하지 않는 요소로의 전환을 나타내거나 교차하지 않음에서 교차하는 전환으로 나타낼 수 있습니다.
+
+교차가 정확이 두 개 사이의 경계 또는 {{domxref("IntersectionObserverEntry.boundingClientRect", "boundingClientRect")}}가 0인 영역을 따르는 경우에 발생하는 무조건 교차하는 직사각형이 존재할 수 있다는 것을 주목해야 합니다. 경계선을 공유하는 대상과 루트의 상태는 교차 상태로의 전환이 충분하지 않다고 여겨질 수 있습니다.
+
+어떻게 임계값이 동작하는 지를 느껴보기 위해서, 아래 상자를 스크롤 해봅시다. 그 안의 각 색칠된 상자는 네 모서리의 보이는 영역의 백분율을 보여주고, 따라서 컨테이너를 스크롤할 때 시간이 지남에 따라 이 비율이 변화하는 것을 볼 수 있습니다. 각 상자는 다른 임계값을 가지고 있습니다.
+
+- 첫번째 상자는 각 가시성 백분율에 대한 임계값을 가지고 있습니다. 즉, {{domxref("IntersectionObserver.thresholds")}} 목록은 `[0.00, 0.01, 0.02, /*…,*/ 0.99, 1.00]` 입니다.
+- 두번째 상자는 50% 지점에 하나의 임계값을 가지고 있습니다.
+- 세번째 상자는 가시성의 10% 마다 임계값을 가지고 있습니다. (0%, 10%, 20%, 등.).
+- 마지막 상자는 각 25% 마다 임계값을 가지고 있습니다.
+
+```html hidden
+
+
+
+
+
+
+
+```
+
+```css hidden
+.contents {
+ position: absolute;
+ width: 700px;
+ height: 1725px;
+}
+
+.wrapper {
+ position: relative;
+ top: 600px;
+}
+
+.sampleBox {
+ position: relative;
+ left: 175px;
+ width: 150px;
+ background-color: rgb(245, 170, 140);
+ border: 2px solid rgb(201, 126, 17);
+ padding: 4px;
+ margin-bottom: 6px;
+}
+
+#box1 {
+ height: 200px;
+}
+
+#box2 {
+ height: 75px;
+}
+
+#box3 {
+ height: 150px;
+}
+
+#box4 {
+ height: 100px;
+}
+
+.label {
+ font:
+ 14px "Open Sans",
+ "Arial",
+ sans-serif;
+ position: absolute;
+ margin: 0;
+ background-color: rgba(255, 255, 255, 0.7);
+ border: 1px solid rgba(0, 0, 0, 0.7);
+ width: 3em;
+ height: 18px;
+ padding: 2px;
+ text-align: center;
+}
+
+.topLeft {
+ left: 2px;
+ top: 2px;
+}
+
+.topRight {
+ right: 2px;
+ top: 2px;
+}
+
+.bottomLeft {
+ bottom: 2px;
+ left: 2px;
+}
+
+.bottomRight {
+ bottom: 2px;
+ right: 2px;
+}
+```
+
+```js hidden
+let observers = [];
+
+startup = () => {
+ let wrapper = document.querySelector(".wrapper");
+
+ // 관찰자를 위한 옵션
+
+ let observerOptions = {
+ root: null,
+ rootMargin: "0px",
+ threshold: [],
+ };
+
+ // An array of threshold sets for each of the boxes. The
+ // first box's thresholds are set programmatically
+ // since there will be so many of them (for each percentage
+ // point).
+
+ let thresholdSets = [
+ [],
+ [0.5],
+ [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+ [0, 0.25, 0.5, 0.75, 1.0],
+ ];
+
+ for (let i = 0; i <= 1.0; i += 0.01) {
+ thresholdSets[0].push(i);
+ }
+
+ // Add each box, creating a new observer for each
+
+ for (let i = 0; i < 4; i++) {
+ let template = document
+ .querySelector("#boxTemplate")
+ .content.cloneNode(true);
+ let boxID = `box${i + 1}`;
+ template.querySelector(".sampleBox").id = boxID;
+ wrapper.appendChild(document.importNode(template, true));
+
+ // Set up the observer for this box
+
+ observerOptions.threshold = thresholdSets[i];
+ observers[i] = new IntersectionObserver(
+ intersectionCallback,
+ observerOptions,
+ );
+ observers[i].observe(document.querySelector(`#${boxID}`));
+ }
+
+ // Scroll to the starting position
+
+ document.scrollingElement.scrollTop =
+ wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
+ document.scrollingElement.scrollLeft = 750;
+};
+
+intersectionCallback = (entries) => {
+ entries.forEach((entry) => {
+ let box = entry.target;
+ let visiblePct = `${Math.floor(entry.intersectionRatio * 100)}%`;
+
+ box.querySelector(".topLeft").innerHTML = visiblePct;
+ box.querySelector(".topRight").innerHTML = visiblePct;
+ box.querySelector(".bottomLeft").innerHTML = visiblePct;
+ box.querySelector(".bottomRight").innerHTML = visiblePct;
+ });
+};
+
+startup();
+```
+
+{{EmbedLiveSample("Thresholds", 500, 500)}}
+
+#### 잘라내기와 교차 직사각형
+
+브라우저는 다음과 같이 최종 교차 직사각형을 계산합니다. 교차가 일어날 때를 더 정확히 이해하기 위해서 아래 순서를 이해하는 것은 도움이 됩니다.
+
+1. 대상 요소의 경계 직사각형 (즉, 요소를 구성하는 모든 컴포넌트의 경계 상자를 완전히 둘러싸는 제일 작은 직사각형)은 타겟의 {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}}로부터 얻습니다. 이건 아마 가장 큰 교차 직사각형입니다. 아래 남은 순서에서 교차 되지 않는 어떤 부분도 제거합니다.
+2. 대상의 직계 상위 블록에서 시작하여 밖으로 뻗어 나가면서, 포함된 블록의 잘라낸 조각이 있는 경우 교차 직사각형에 적용됩니다. 블록의 잘라낸 조각은 두 개 블록의 교차와 {{cssxref("overflow")}} 속성에 의해 특정된 잘라내기 모드가 있다면 이를 기반으로 결정됩니다. `overflow` 를 `visible` 이 아닌 것에 설정하면 clipping이 발생할 수 있습니다.
+3. 포함된 요소 중 하나가 중첩된 브라우징 컨텍스트({{HTMLElement("iframe")}}에 들어있는 문서와 같은)의 루트라면, 교차 사각형은 포함된 컨텍스트의 뷰포트에 고정되고, 컨테이너를 따라 컨테이너의 포함된 블록과 위쪽으로의 반복이 계속됩니다. `