convert content to md

2 files changed, 119 insertions, 129 deletions

diff --git a/files/fr/web/api/touch_events/index.md b/files/fr/web/api/touch_events/index.md
index 5853459757..5fcaf9e3f0 100644
--- a/files/fr/web/api/touch_events/index.md
+++ b/files/fr/web/api/touch_events/index.md
@@ -7,45 +7,40 @@ tags:
 translation_of: Web/API/Touch_events
 original_slug: Web/Guide/DOM/Events/Touch_events
 ---
-<p>{{DefaultAPISidebar("Touch Events")}}</p>
+{{DefaultAPISidebar("Touch Events")}}
 
-<p>Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (<em>touch events</em>) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).</p>
+Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (_touch events_) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).
 
-<h2 id="Définitions">Définitions</h2>
+## Définitions
 
-<dl>
- <dt>Surface</dt>
- <dd>La surface tactile. Cela peut être un écran ou un trackpad.</dd>
- <dt>Point de toucher (<em>Touch point</em>)</dt>
- <dd>Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).</dd>
-</dl>
+- Surface
+  - : La surface tactile. Cela peut être un écran ou un trackpad.
+- Point de toucher (_Touch point_)
+  - : Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{ domxref("TouchEvent") }}</dt>
- <dd>Représente l'événement qui se produit quand l'action de toucher change.</dd>
- <dt>{{ domxref("Touch") }}</dt>
- <dd>Représente un point unique de contact entre l'utilisateur et la surface tactile.</dd>
- <dt>{{ domxref("TouchList") }}</dt>
- <dd>Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.</dd>
- <dt>{{ domxref("DocumentTouch") }}</dt>
- <dd>Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.</dd>
-</dl>
+- {{ domxref("TouchEvent") }}
+  - : Représente l'événement qui se produit quand l'action de toucher change.
+- {{ domxref("Touch") }}
+  - : Représente un point unique de contact entre l'utilisateur et la surface tactile.
+- {{ domxref("TouchList") }}
+  - : Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.
+- {{ domxref("DocumentTouch") }}
+  - : Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</p>
+Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.
 
-<div class="note">
-  <p><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</p>
-</div>
+> **Note :** Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).
 
-<h3 id="Initialiser_les_gestionnaires_d'événements">Initialiser les gestionnaires d'événements</h3>
+### Initialiser les gestionnaires d'événements
 
-<p>Quand la page charge, la fonction <code>startup()</code> décrite ci-dessous est appelée par l'attribut <code>onload</code> de l'élément {{ HTMLElement("body") }}.</p>
+Quand la page charge, la fonction `startup()` décrite ci-dessous est appelée par l'attribut `onload` de l'élément {{ HTMLElement("body") }}.
 
-<pre class="brush: js">function startup() {
+```js
+function startup() {
   var el = document.getElementsByTagName("canvas")[0];
   el.addEventListener("touchstart", handleStart, false);
   el.addEventListener("touchend", handleEnd, false);
@@ -53,38 +48,40 @@ original_slug: Web/Guide/DOM/Events/Touch_events
   el.addEventListener("touchleave", handleLeave, false);
   el.addEventListener("touchmove", handleMove, false);
 }
-</pre>
+```
 
-<p>Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.</p>
+Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.
 
-<h3 id="Gérer_les_nouveaux_touchers">Gérer les nouveaux touchers</h3>
+### Gérer les nouveaux touchers
 
-<p>Quand un événement <code>touchstart</code> se produit, cela indique qu'un nouveau toucher s'est produit. La fonction <code>handleStart()</code> est alors appelée.</p>
+Quand un événement `touchstart` se produit, cela indique qu'un nouveau toucher s'est produit. La fonction `handleStart()` est alors appelée.
 
-<pre class="brush: js">function handleStart(evt) {
+```js
+function handleStart(evt) {
   evt.preventDefault();
   var el = document.getElementsByTagName("canvas")[0];
   var ctx = el.getContext("2d");
   var touches = evt.changedTouches;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     ongoingTouches.push(touches[i]);
     var color = colorForTouch(touches[i]);
     ctx.fillStyle = color;
     ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
   }
 }
-</pre>
+```
 
-<p>Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.</p>
+Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.
 
-<p>Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).</p>
+Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).
 
-<h3 id="Dessiner_avec_les_déplacements">Dessiner avec les déplacements</h3>
+### Dessiner avec les déplacements
 
-<p>Chaque fois que le(s) doigt(s) bouge(nt), un événement <code>touchmove</code> est déclenché, ce qui provoque l'appel de la fonction <code>handleMove()</code> que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.</p>
+Chaque fois que le(s) doigt(s) bouge(nt), un événement `touchmove` est déclenché, ce qui provoque l'appel de la fonction `handleMove()` que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.
 
-<pre class="brush: js">function handleMove(evt) {
+```js
+function handleMove(evt) {
   evt.preventDefault();
   var el = document.getElementsByTagName("canvas")[0];
   var ctx = el.getContext("2d");
@@ -92,7 +89,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events
 
   ctx.lineWidth = 4;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     var color = colorForTouch(touches[i]);
     var idx = ongoingTouchIndexById(touches[i].identifier);
 
@@ -105,19 +102,20 @@ original_slug: Web/Guide/DOM/Events/Touch_events
     ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
   }
 }
-</pre>
+```
 
-<p>Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.</p>
+Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.
 
-<p>Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.</p>
+Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.
 
-<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p>
+Une fois le segment dessiné, on appelle [`Array.splice()`](/fr/JavaScript/Reference/Global_Objects/Array/splice) pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau `ongoingTouches`.
 
-<h3 id="Gérer_la_fin_d'un_toucher">Gérer la fin d'un toucher</h3>
+### Gérer la fin d'un toucher
 
-<p>Lorsqu'un utilisateur enlève son doigt de la surface, un événement <code>touchend</code> est envoyé. De la même manière, un événement <code>touchleave</code> sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction <code>handleEnd()</code> ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.</p>
+Lorsqu'un utilisateur enlève son doigt de la surface, un événement `touchend` est envoyé. De la même manière, un événement `touchleave` sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction `handleEnd()` ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.
 
-<pre class="brush: js">function handleEnd(evt) {
+```js
+function handleEnd(evt) {
   evt.preventDefault();
   var el = document.getElementsByTagName("canvas")[0];
   var ctx = el.getContext("2d");
@@ -125,7 +123,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events
 
   ctx.lineWidth = 4;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     var color = colorForTouch(touches[i]);
     var idx = ongoingTouchIndexById(touches[i].identifier);
 
@@ -136,49 +134,52 @@ original_slug: Web/Guide/DOM/Events/Touch_events
     ongoingTouches.splice(i, 1);  // On enlève le point
   }
 }
-</pre>
+```
 
-<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p>
+Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant [`Array.splice()`](/en/JavaScript/Reference/Global_Objects/Array/splice), on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.
 
-<h3 id="Gérer_l'annulation_d'un_toucher">Gérer l'annulation d'un toucher</h3>
+### Gérer l'annulation d'un toucher
 
-<p>Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement <code>touchcancel</code> est envoyé et on appelle alors la fonction <code>handleCancel()</code>.</p>
+Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement `touchcancel` est envoyé et on appelle alors la fonction `handleCancel()`.
 
-<pre class="brush: js">function handleCancel(evt) {
+```js
+function handleCancel(evt) {
   evt.preventDefault();
   var touches = evt.changedTouches;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     ongoingTouches.splice(i, 1);  // on retire le point
   }
 }
-</pre>
+```
 
-<p>L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.</p>
+L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.
 
-<h3 id="Fonctions_auxiliaires">Fonctions auxiliaires</h3>
+### Fonctions auxiliaires
 
-<p>Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.</p>
+Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.
 
-<h4 id="Sélectionner_une_couleur_pour_chaque_toucher">Sélectionner une couleur pour chaque toucher</h4>
+#### Sélectionner une couleur pour chaque toucher
 
-<p>Afin que chaque contact soit différent, on utilisera la fonction <code>colorForTouch()</code> pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.</p>
+Afin que chaque contact soit différent, on utilisera la fonction `colorForTouch()` pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.
 
-<pre class="brush: js">function colorForTouch(touch) {
+```js
+function colorForTouch(touch) {
   var id = touch.identifier;
   id = id.toString(16); // creer un nombre hexadécimal
   return "#" + id + id + id;
 }
-</pre>
+```
 
-<p>Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".</p>
+Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".
 
-<h4 id="Retrouver_un_toucher_en_cours">Retrouver un toucher en cours</h4>
+#### Retrouver un toucher en cours
 
-<p>La fonction <code>ongoingTouchIndexById()</code> analyse le tableau <code>ongoingTouches</code> pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.</p>
+La fonction `ongoingTouchIndexById()` analyse le tableau `ongoingTouches` pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.
 
-<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
-  for (var i=0; i&lt;ongoingTouches.length; i++) {
+```js
+function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i<ongoingTouches.length; i++) {
     var id = ongoingTouches[i].identifier;
 
     if (id == idToFind) {
@@ -187,21 +188,22 @@ original_slug: Web/Guide/DOM/Events/Touch_events
   }
   return -1;    // toucher non trouvé
 }
-</pre>
+```
 
-<p><a href="/samples/domref/touchevents.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/domref/touchevents.html)
 
-<h2 id="Astuces_supplémentaires">Astuces supplémentaires</h2>
+## Astuces supplémentaires
 
-<p>Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.</p>
+Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.
 
-<h3 id="Gérer_les_clics">Gérer les clics</h3>
+### Gérer les clics
 
-<p>Étant donné que l'appel de la méthode <code>preventDefault()</code> sur l'événement  <code>touchstart</code> ou le premier événement <code>touchmove</code> de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  <code>preventDefault()</code> sur <code>touchmove</code> plutôt que sur <code>touchstart</code>. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)</p>
+Étant donné que l'appel de la méthode `preventDefault()` sur l'événement  `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)
 
-<pre class="brush: js">function onTouch(evt) {
+```js
+function onTouch(evt) {
   evt.preventDefault();
-  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
     return;
 
   var newEvt = document.createEvent("MouseEvents");
@@ -217,27 +219,22 @@ original_slug: Web/Guide/DOM/Events/Touch_events
     evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
   event.originalTarget.dispatchEvent(newEvt);
 }
-</pre>
+```
 
-<h3 id="Appeler_preventDefault()_uniquement_pour_un_deuxième_toucher">Appeler preventDefault() uniquement pour un deuxième toucher</h3>
+### Appeler preventDefault() uniquement pour un deuxième toucher
 
-<p>Pour éviter que des événements de zoom (comme <code>pinchZoom</code>) ne se produisent sur la page, il est possible d'appeler la méthode <code>preventDefault()</code> sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (<em>viewport</em>) pour éviter un zoom quelconque.</p>
+Pour éviter que des événements de zoom (comme `pinchZoom`) ne se produisent sur la page, il est possible d'appeler la méthode `preventDefault()` sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (_viewport_) pour éviter un zoom quelconque.
 
-<dl>
-</dl>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.Touch")}}
 
-<p>{{Compat("api.Touch")}}</p>
+### Notes relatives à Gecko
 
-<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+Le paramètre `dom.w3c_touch_events.enabled` peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.
 
-<p>Le paramètre <code>dom.w3c_touch_events.enabled</code> peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.</p>
+{{ gecko_callout_heading("12.0") }}
 
-<p>{{ gecko_callout_heading("12.0") }}</p>
+Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.
 
-<p>Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</p>
-</div>
+> **Note :** Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une [API propriétaire pour les événements tactile.](</en/DOM/Touch_events_(Mozilla_experimental)>) Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.
diff --git a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md
index 51773f1c64..d3ab597400 100644
--- a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md
+++ b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md
@@ -5,61 +5,54 @@ translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
 original_slug: >-
   Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris
 ---
-<p>{{DefaultAPISidebar("Touch Events")}}</p>
+{{DefaultAPISidebar("Touch Events")}}
 
-<p>Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à <em>émuler</em> les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours <em>tel quel </em>sans modification directe.</p>
+Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à *émuler* les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours *tel quel* sans modification directe.
 
-<p>Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.</p>
+Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.
 
-<h2 id="Déclenchement_de_l'événement">Déclenchement de l'événement</h2>
+## Déclenchement de l'événement
 
-<p>La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> pour plus de détails), noter que <em>le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.</em> Cette section décrit les exigences pouvant affecter une application.</p>
+La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section [_Interaction with Mouse Events and click_](https://w3c.github.io/touch-events/#mouse-events) pour plus de détails), noter que *le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.* Cette section décrit les exigences pouvant affecter une application.
 
-<p>Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur <em>doit</em> déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.</p>
+Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur *doit* déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.
 
-<p>Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle <code>preventDefault()</code>.</p>
+Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle `preventDefault()`.
 
-<pre class="brush: js">// touchmove handler
+```js
+// touchmove handler
 function process_touchmove(ev) {
   // Call preventDefault() to prevent any further handling
   ev.preventDefault();
 }
-</pre>
+```
 
-<h2 id="Ordre_des_événements">Ordre des événements</h2>
+## Ordre des événements
 
-<p>Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est <em>représentatif:</em> pour une entrée :</p>
+Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est _représentatif:_ pour une entrée :
 
-<ul>
- <li><code>touchstart</code></li>
- <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
- <li><code>touchend</code></li>
- <li><code>mousemove</code></li>
- <li><code>mousedown</code></li>
- <li><code>mouseup</code></li>
- <li><code>click</code></li>
-</ul>
+- `touchstart`
+- Zero ou plus d'événements `touchmove`, suivant le mouvement de(s) doigt(s)
+- `touchend`
+- `mousemove`
+- `mousedown`
+- `mouseup`
+- `click`
 
-<p>Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :</p>
+Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :
 
-<ul>
- <li><code>touchstart</code></li>
- <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
- <li><code>touchend</code></li>
-</ul>
+- `touchstart`
+- Zero ou plus d'événements `touchmove`, suivant le mouvement de(s) doigt(s)
+- `touchend`
 
-<h2 id="Community">Community</h2>
+## Community
 
-<ul>
- <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li>
- <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
- <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
-</ul>
+- [Touch Events Community Group](https://github.com/w3c/touch-events)
+- [Mail list](https://lists.w3.org/Archives/Public/public-touchevents/)
+- [W3C #touchevents IRC channel](irc://irc.w3.org:6667/)
 
-<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+## Related topics and resources
 
-<ul>
- <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li>
- <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
- <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
-</ul>
+- [Touch Events Overview](/Web/API/Touch_events)
+- [Using Touch Events](/Web/API/Touch_events/Using_Touch_Events)
+- [Touch and Mouse (Together Again for the First Time)](http://www.html5rocks.com/en/mobile/touchandmouse/)