aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/intersectionobserver
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-10-02 17:20:24 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-02 17:30:20 +0200
commit1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch)
tree30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/intersectionobserver
parentc05efa8d7ae464235cf83d7c0956e42dc6974103 (diff)
downloadtranslated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz
translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2
translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip
convert content to md
Diffstat (limited to 'files/fr/web/api/intersectionobserver')
-rw-r--r--files/fr/web/api/intersectionobserver/disconnect/index.md51
-rw-r--r--files/fr/web/api/intersectionobserver/index.md107
-rw-r--r--files/fr/web/api/intersectionobserver/intersectionobserver/index.md110
-rw-r--r--files/fr/web/api/intersectionobserver/observe/index.md54
-rw-r--r--files/fr/web/api/intersectionobserver/root/index.md53
-rw-r--r--files/fr/web/api/intersectionobserver/rootmargin/index.md43
-rw-r--r--files/fr/web/api/intersectionobserver/takerecords/index.md53
-rw-r--r--files/fr/web/api/intersectionobserver/thresholds/index.md45
-rw-r--r--files/fr/web/api/intersectionobserver/unobserve/index.md75
9 files changed, 223 insertions, 368 deletions
diff --git a/files/fr/web/api/intersectionobserver/disconnect/index.md b/files/fr/web/api/intersectionobserver/disconnect/index.md
index b2d7220fc3..253e8d9a5f 100644
--- a/files/fr/web/api/intersectionobserver/disconnect/index.md
+++ b/files/fr/web/api/intersectionobserver/disconnect/index.md
@@ -11,50 +11,33 @@ tags:
- Reference
translation_of: Web/API/IntersectionObserver/disconnect
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>La méthode <code><strong>disconnect()</strong></code>, rattachée à l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>, arrête l'observation des changements de visibilité de l'ensemble des éléments cibles.</p>
+La méthode **`disconnect()`**, rattachée à l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver), arrête l'observation des changements de visibilité de l'ensemble des éléments cibles.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>intersectionObserver</var>.disconnect();</pre>
+ intersectionObserver.disconnect();
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
-<p>Aucun.</p>
+Aucun.
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
-<p><code>undefined</code>.</p>
+`undefined`.
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- {{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}}
- </td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.IntersectionObserver.disconnect")}}</p>
+{{Compat("api.IntersectionObserver.disconnect")}}
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
-<ul>
- <li><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>observe()</code></a></li>
- <li><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>unobserve()</code></a></li>
-</ul>
+- [`observe()`](/fr/docs/Web/API/IntersectionObserver/observe)
+- [`unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve)
diff --git a/files/fr/web/api/intersectionobserver/index.md b/files/fr/web/api/intersectionobserver/index.md
index cd9eb647cd..4c4e1de213 100644
--- a/files/fr/web/api/intersectionobserver/index.md
+++ b/files/fr/web/api/intersectionobserver/index.md
@@ -10,83 +10,64 @@ tags:
- observers
translation_of: Web/API/IntersectionObserver
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API <i>Intersection Observer</i></a> fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (<a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a>). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.</p>
+L'interface **`IntersectionObserver`** de l'[API _Intersection Observer_](/fr/docs/Web/API/Intersection_Observer_API) fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document ([_viewport_](/fr/docs/Glossary/Viewport)). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.
-<p>Lorsqu'un objet implémentant <code>IntersectionObserver</code> est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'<code>IntersectionObserver</code>. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.</p>
+Lorsqu'un objet implémentant `IntersectionObserver` est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'`IntersectionObserver`. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.
-<h2 id="constructor">Constructeur</h2>
+## Constructeur
-<dl>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver.IntersectionObserver()</code></a> {{Experimental_inline}}</dt>
- <dd>Crée un nouvel objet <code>IntersectionObserver</code> qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.</dd>
-</dl>
+- [`IntersectionObserver.IntersectionObserver()`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver) {{Experimental_inline}}
+ - : Crée un nouvel objet `IntersectionObserver` qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.
-<h2 id="properties">Propriétés</h2>
+## Propriétés
-<dl>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/root"><code>IntersectionObserver.root</code></a> {{readonlyinline}} {{Experimental_inline}}</dt>
- <dd>L'<a href="/fr/docs/Web/API/Element">élément</a> ou le <a href="/fr/docs/Web/API/Document">document</a> dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est <code>null</code>, c'est la zone d'affichage (<i>viewport</i>) de plus haut niveau qui est utilisée.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/rootMargin"><code>IntersectionObserver.rootMargin</code></a> {{readonlyinline}} {{Experimental_inline}}</dt>
- <dd>Un rectangle de décalage appliqué à <a href="/fr/docs/Glossary/bounding_box">la boîte englobante</a> de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est <code>"0px 0px 0px 0px"</code>.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a> {{readonlyinline}} {{Experimental_inline}}</dt>
- <dd>Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.</dd>
-</dl>
+- [`IntersectionObserver.root`](/fr/docs/Web/API/IntersectionObserver/root) {{readonlyinline}} {{Experimental_inline}}
+ - : L'[élément](/fr/docs/Web/API/Element) ou le [document](/fr/docs/Web/API/Document) dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est `null`, c'est la zone d'affichage (_viewport_) de plus haut niveau qui est utilisée.
+- [`IntersectionObserver.rootMargin`](/fr/docs/Web/API/IntersectionObserver/rootMargin) {{readonlyinline}} {{Experimental_inline}}
+ - : Un rectangle de décalage appliqué à [la boîte englobante](/fr/docs/Glossary/bounding_box) de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est `"0px 0px 0px 0px"`.
+- [`IntersectionObserver.thresholds`](/fr/docs/Web/API/IntersectionObserver/thresholds) {{readonlyinline}} {{Experimental_inline}}
+ - : Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.
-<h2 id="methods">Méthodes</h2>
+## Méthodes
-<dl>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/disconnect"><code>IntersectionObserver.disconnect()</code></a> {{Experimental_inline}}</dt>
- <dd>Indique à l'objet <code>IntersectionObserver</code> de ne plus observer aucune cible.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>IntersectionObserver.observe()</code></a> {{Experimental_inline}}</dt>
- <dd>Indique à l'objet <code>IntersectionObserver</code> un nouvel élément à observer.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/takeRecords"><code>IntersectionObserver.takeRecords()</code></a> {{Experimental_inline}}</dt>
- <dd>Retourne un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> pour toutes les cibles observées et cesse de surveiller chacune d'elles.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a> {{Experimental_inline}}</dt>
- <dd>Indique à l'objet <code>IntersectionObserver</code> de cesser d'observer un élément cible particuler.</dd>
-</dl>
+- [`IntersectionObserver.disconnect()`](/fr/docs/Web/API/IntersectionObserver/disconnect) {{Experimental_inline}}
+ - : Indique à l'objet `IntersectionObserver` de ne plus observer aucune cible.
+- [`IntersectionObserver.observe()`](/fr/docs/Web/API/IntersectionObserver/observe) {{Experimental_inline}}
+ - : Indique à l'objet `IntersectionObserver` un nouvel élément à observer.
+- [`IntersectionObserver.takeRecords()`](/fr/docs/Web/API/IntersectionObserver/takeRecords) {{Experimental_inline}}
+ - : Retourne un tableau d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry) pour toutes les cibles observées et cesse de surveiller chacune d'elles.
+- [`IntersectionObserver.unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve) {{Experimental_inline}}
+ - : Indique à l'objet `IntersectionObserver` de cesser d'observer un élément cible particuler.
-<h2 id="example">Exemple</h2>
+## Exemple
-<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+```js
+var intersectionObserver = new IntersectionObserver(function(entries) {
// Si intersectionRatio vaut 0 ou moins, la cible
// est hors de vue et rien n'est alors fait
- if (entries[0].intersectionRatio &lt;= 0) return;
+ if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log('Nouveaux éléments chargés');
});
// début de l'observation
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserver")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/MutationObserver"><code>MutationObserver</code></a></li>
- <li><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></li>
- <li><a href="/fr/docs/Web/API/ResizeObserver"><code>ResizeObserver</code></a></li>
-</ul>
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+```
+
+## Spécifications
+
+| Spécification | Statut | Commentaire |
+| ------------------------------------------------ | -------------------------------------------- | ----------- |
+| {{SpecName('IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserver")}}
+
+## Voir aussi
+
+- [`MutationObserver`](/fr/docs/Web/API/MutationObserver)
+- [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver)
+- [`ResizeObserver`](/fr/docs/Web/API/ResizeObserver)
diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.md b/files/fr/web/api/intersectionobserver/intersectionobserver/index.md
index 4d90eff28d..e6089dc86f 100644
--- a/files/fr/web/api/intersectionobserver/intersectionobserver/index.md
+++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.md
@@ -11,79 +11,63 @@ tags:
- Visible
translation_of: Web/API/IntersectionObserver/IntersectionObserver
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Les marges appliquées à la zone racine (indiquée dans l'objet <code>options</code> via la propriété <code>rootMargin</code>, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété <code>thresholds</code> d'<code>options</code>) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].</p>
+Le constructeur **`IntersectionObserver()`** crée et retourne un nouvel objet [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver). Les marges appliquées à la zone racine (indiquée dans l'objet `options` via la propriété `rootMargin`, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété `thresholds` d'`options`) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est \[0.0].
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">let <var>observer</var> = new IntersectionObserver(<var>callback</var>[, <var>options</var>]);</pre>
+ let observer = new IntersectionObserver(callback[, options]);
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
-<dl>
- <dt><code>callback</code></dt>
- <dd>Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres :
- <dl>
- <dt><code>entries</code></dt>
- <dd>Une liste d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.</dd>
- <dt><code>observateur</code></dt>
- <dd>L'objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> pour lequel la fonction de rappel est invoquée.</dd>
- </dl>
- </dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet optionnel qui paramètre l'observateur. Si <code>options</code> n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration :
- <dl>
- <dt><code>root</code></dt>
- <dd>Un objet <a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou <a href="/fr/docs/Web/API/Document"><code>Document</code></a> qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (<i>viewport</i>). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.</dd>
- <dt><code>rootMargin</code></dt>
- <dd>Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>. Voir <a href="/fr/docs/Web/API/Intersection_Observer_API">L'élément racine et sa marge externe</a> pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est <code>"0px 0px 0px 0px"</code>.</dd>
- <dt><code>threshold</code></dt>
- <dd>Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils définis comme ratios de la part visible d'un élément cible observé par rapport à sa surface totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir <a href="/fr/docs/Web/API/Intersection_Observer_API#Thresholds">cette section sur les seuils</a> pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.</dd>
- </dl>
- </dd>
-</dl>
+- `callback`
-<h3 id="return_value">Valeur de retour</h3>
+ - : Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres :
-<p>Un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode <a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>observe()</code></a> de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.</p>
+ - `entries`
+ - : Une liste d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry), chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.
+ - `observateur`
+ - : L'objet [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) pour lequel la fonction de rappel est invoquée.
-<h3 id="exceptions">Exceptions</h3>
+- `options` {{optional_inline}}
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>La propriété <code>rootMargin</code> de l'argument <code>options</code> est invalide.</dd>
- <dt><code>RangeError</code></dt>
- <dd>Une ou plusieurs des valeurs de <code>threshold</code> (portée par l'argument <code>options</code>) est en dehors de l'intervalle allant de 0.0 à 1.0.</dd>
-</dl>
+ - : Un objet optionnel qui paramètre l'observateur. Si `options` n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration :
-<h2 id="example">Exemple</h2>
+ - `root`
+ - : Un objet [`Element`](/fr/docs/Web/API/Element) ou [`Document`](/fr/docs/Web/API/Document) qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (_viewport_). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.
+ - `rootMargin`
+ - : Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). Voir [L'élément racine et sa marge externe](/fr/docs/Web/API/Intersection_Observer_API) pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est `"0px 0px 0px 0px"`.
+ - `threshold`
+ - : Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils définis comme ratios de la part visible d'un élément cible observé par rapport à sa surface totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir [cette section sur les seuils](/fr/docs/Web/API/Intersection_Observer_API#Thresholds) pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.
-<p>Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction <code>myObserverCallback</code> chaque fois que la zone visible de l'élément observé change d'au moins 10%.</p>
+### Valeur de retour
-<pre class="brush: js">let observer = new IntersectionObserver(myObserverCallback, {
+Un nouvel objet [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode [`observe()`](/fr/docs/Web/API/IntersectionObserver/observe) de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.
+
+### Exceptions
+
+- `SyntaxError`
+ - : La propriété `rootMargin` de l'argument `options` est invalide.
+- `RangeError`
+ - : Une ou plusieurs des valeurs de `threshold` (portée par l'argument `options`) est en dehors de l'intervalle allant de 0.0 à 1.0.
+
+## Exemple
+
+Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction `myObserverCallback` chaque fois que la zone visible de l'élément observé change d'au moins 10%.
+
+```js
+let observer = new IntersectionObserver(myObserverCallback, {
threshold: 0.1
-});</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserver.IntersectionObserver")}}
diff --git a/files/fr/web/api/intersectionobserver/observe/index.md b/files/fr/web/api/intersectionobserver/observe/index.md
index 7fc8411cbb..c38e896027 100644
--- a/files/fr/web/api/intersectionobserver/observe/index.md
+++ b/files/fr/web/api/intersectionobserver/observe/index.md
@@ -11,53 +11,35 @@ tags:
- observe
translation_of: Web/API/IntersectionObserver/observe
---
-<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
-<p>La méthode <code><strong>observe()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode <a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a>.</p>
+La méthode **`observe()`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) ajoute un élément à l'ensemble des éléments cibles étant observés par l'`IntersectionObserver`. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode [`IntersectionObserver.unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve).
-<p>Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans <a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a>, la fonction de rappel de l'observateur est executée avec comme argument un objet <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets <code>IntersectionObserverEntry</code>.</p>
+Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans [`IntersectionObserver.thresholds`](/fr/docs/Web/API/IntersectionObserver/thresholds), la fonction de rappel de l'observateur est executée avec comme argument un objet [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry) représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets `IntersectionObserverEntry`.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>IntersectionObserver</var>.observe(<var>targetElement</var>);</pre>
+ IntersectionObserver.observe(targetElement);
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
-<dl>
- <dt><code>targetElement</code></dt>
- <dd>Un <a href="/fr/docs/Web/API/Element">élément</a> dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).</dd>
-</dl>
+- `targetElement`
+ - : Un [élément](/fr/docs/Web/API/Element) dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
-<p><code>undefined</code>.</p>
+`undefined`.
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+{{Compat("api.IntersectionObserver.observe")}}
+## Voir aussi
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a></li>
-</ul>
+- [`IntersectionObserver.unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve)
diff --git a/files/fr/web/api/intersectionobserver/root/index.md b/files/fr/web/api/intersectionobserver/root/index.md
index 3778b82c7f..bc4d737cea 100644
--- a/files/fr/web/api/intersectionobserver/root/index.md
+++ b/files/fr/web/api/intersectionobserver/root/index.md
@@ -11,51 +11,38 @@ tags:
- root
translation_of: Web/API/IntersectionObserver/root
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>La propriété en lecture seule <strong><code>root</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> identifie l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou le <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont les bornes sont considérées comme la zone englobante (<i>bounding box</i>) de la zone d'affichage (<i>viewport</i>) au sein de laquelle les intersections avec la cible sont observées. Si <code>root</code> vaut <code>null</code>, ce sont les limites de la zone d'affichage (<i>viewport</i>) courantes qui sont utilisées.</p>
+La propriété en lecture seule **`root`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) identifie l'[`Element`](/fr/docs/Web/API/Element) ou le [`Document`](/fr/docs/Web/API/Document) dont les bornes sont considérées comme la zone englobante (_bounding box_) de la zone d'affichage (_viewport_) au sein de laquelle les intersections avec la cible sont observées. Si `root` vaut `null`, ce sont les limites de la zone d'affichage (_viewport_) courantes qui sont utilisées.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>root</var> = IntersectionObserver.root;</pre>
+ root = IntersectionObserver.root;
-<h3 id="value">Valeur</h3>
+### Valeur
-<p>Un objet <a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'<a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver()</code></a> (voir <code>options.rootMargin</code>), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.</p>
+Un objet [`Element`](/fr/docs/Web/API/Element) ou [`Document`](/fr/docs/Web/API/Document) dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'[`IntersectionObserver()`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver) (voir `options.rootMargin`), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.
-<p>Si <code>root</code> vaut <code>null</code>, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (<i>viewport</i>).</p>
+Si `root` vaut `null`, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (_viewport_).
-<h2 id="example">Exemple</h2>
+## Exemple
-<p>Cet exemple définit la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.</p>
+Cet exemple définit la propriété [`border`](/fr/docs/Web/CSS/border) de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.
-<pre class="brush: js">observer.root.style.border = "2px solid #44aa44";</pre>
+```js
+observer.root.style.border = "2px solid #44aa44";
+```
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.IntersectionObserver.root")}}</p>
+{{Compat("api.IntersectionObserver.root")}}
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
-<ul>
- <li><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Mesurer la visibilité d'un élément dans le temps l'API <i>Intersection Observer</i></a></li>
-</ul>
+- [Mesurer la visibilité d'un élément dans le temps l'API _Intersection Observer_](/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)
diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.md b/files/fr/web/api/intersectionobserver/rootmargin/index.md
index 87e13a1306..a8c5ba7dac 100644
--- a/files/fr/web/api/intersectionobserver/rootmargin/index.md
+++ b/files/fr/web/api/intersectionobserver/rootmargin/index.md
@@ -11,43 +11,30 @@ tags:
- rootMargin
translation_of: Web/API/IntersectionObserver/rootMargin
---
-<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
-<p>La propriété <strong><code>rootMargin</code></strong> est une propriété en lecture seule de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>. Chaque côté de la zone rectangulaire représentée par <code>rootMargin</code> est ajouté au côté correspondant de la boîte englobante de la <a href="/fr/docs/Web/API/IntersectionObserver/root">racine</a> de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.</p>
+La propriété **`rootMargin`** est une propriété en lecture seule de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver). C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). Chaque côté de la zone rectangulaire représentée par `rootMargin` est ajouté au côté correspondant de la boîte englobante de la [racine](/fr/docs/Web/API/IntersectionObserver/root) de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.
-<p>Voir <a href="/fr/docs/Web/API/Intersection_Observer_API">la section sur l'élément racine et sa marge externe</a> pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.</p>
+Voir [la section sur l'élément racine et sa marge externe](/fr/docs/Web/API/Intersection_Observer_API) pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>marginString</var> = IntersectionObserver.rootMargin;</pre>
+ marginString = IntersectionObserver.rootMargin;
-<h3 id="value">Valeur</h3>
+### Valeur
-<p>Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.</p>
+Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS [`margin`](/fr/docs/Web/CSS/margin), contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.
-<p>La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'<a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Le navigateur a la possibilité de modifier la valeur.</p>
+La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'[`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver). Le navigateur a la possibilité de modifier la valeur.
-<p>Si <code>rootMargin</code> n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra <code>"0px 0px 0px 0px"</code>, signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. <a href="/fr/docs/Web/API/Intersection_Observer_API">La section sur l'élément racine et sa marge externe</a> décrit avec plus de détails comment <code>rootMargin</code> est utilisée.</p>
+Si `rootMargin` n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra `"0px 0px 0px 0px"`, signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. [La section sur l'élément racine et sa marge externe](/fr/docs/Web/API/Intersection_Observer_API) décrit avec plus de détails comment `rootMargin` est utilisée.
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
+{{Compat("api.IntersectionObserver.rootMargin")}}
diff --git a/files/fr/web/api/intersectionobserver/takerecords/index.md b/files/fr/web/api/intersectionobserver/takerecords/index.md
index ceb2a5db1e..0e04aefea1 100644
--- a/files/fr/web/api/intersectionobserver/takerecords/index.md
+++ b/files/fr/web/api/intersectionobserver/takerecords/index.md
@@ -12,53 +12,34 @@ tags:
- takeRecords
translation_of: Web/API/IntersectionObserver/takeRecords
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>La méthode <code><strong>takeRecords()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> renvoie un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.</p>
+La méthode **`takeRecords()`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) renvoie un tableau d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry), un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.
-<div class="note">
- <p><strong>Note :</strong> Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.</p>
-</div>
+> **Note :** Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>intersectionObserverEntries</var> = <var>intersectionObserver</var>.takeRecords();</pre>
+ intersectionObserverEntries = intersectionObserver.takeRecords();
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
-<p>Aucun.</p>
+Aucun.
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
-<p>Un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, un pour chaque élément cible dont l'intersection avec la racine a changé depuis la dernière vérification des intersections.</p>
+Un tableau d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry), un pour chaque élément cible dont l'intersection avec la racine a changé depuis la dernière vérification des intersections.
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- {{SpecName('IntersectionObserver','#dom-intersectionobserver-takerecords','IntersectionObserver.takeRecords()')}}
- </td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-takerecords','IntersectionObserver.takeRecords()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.IntersectionObserver.takeRecords")}}</p>
+{{Compat("api.IntersectionObserver.takeRecords")}}
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
-<ul>
- <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">L'API <i>Intersection Observer</i></a></li>
-</ul>
+- [L'API _Intersection Observer_](/en-US/docs/Web/API/Intersection_Observer_API)
diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.md b/files/fr/web/api/intersectionobserver/thresholds/index.md
index 1ecebadf18..295a53060c 100644
--- a/files/fr/web/api/intersectionobserver/thresholds/index.md
+++ b/files/fr/web/api/intersectionobserver/thresholds/index.md
@@ -12,45 +12,30 @@ tags:
- Reference
translation_of: Web/API/IntersectionObserver/thresholds
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>La propriété en lecture seule <strong><code>thresholds</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver()</code></a>. Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.</p>
+La propriété en lecture seule **`thresholds`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec [`IntersectionObserver()`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver). Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.
-<p>Voir <a href="/fr/docs/Web/API/Intersection_Observer_API#Thresholds">la section sur les seuils</a> pour apprendre comment fonctionnent les seuils d'intersection.</p>
+Voir [la section sur les seuils](/fr/docs/Web/API/Intersection_Observer_API#Thresholds) pour apprendre comment fonctionnent les seuils d'intersection.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>thresholds</var> = IntersectionObserver.thresholds;</pre>
+ thresholds = IntersectionObserver.thresholds;
-<h3 id="value">Valeur</h3>
+### Valeur
-<p>Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via <code>options.threshold</code>. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par <code>thresholds</code> sera trié par ordre croissant.</p>
+Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via `options.threshold`. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par `thresholds` sera trié par ordre croissant.
-<p>Si aucune option <code>threshold</code> n'est fournie lors de l'instanciation avec <code>IntersectionObserver()</code>, la valeur par défaut de <code>thresholds</code> est définie à <code>[0]</code>.</p>
+Si aucune option `threshold` n'est fournie lors de l'instanciation avec `IntersectionObserver()`, la valeur par défaut de `thresholds` est définie à `[0]`.
-<div class="warning">
- <p><strong>Attention :</strong> Bien que l'objet d'<code>options</code> qu'on peut spécifier à la création d'un <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> possède une propriété champ nommée <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>threshold</code></a>, cette propriété-ci s'appelle <code>thresholds</code> (avec un « s » supplémentaire donc). <em>Cela peut porter à confusion</em>. Si vous utilisez <code>thresholds</code> par erreur comme nom pour la propriété de l'objet <code>options</code>, le tableau porté par <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p>
-</div>
+> **Attention :** Bien que l'objet d'`options` qu'on peut spécifier à la création d'un [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) possède une propriété champ nommée [`threshold`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver), cette propriété-ci s'appelle `thresholds` (avec un « s » supplémentaire donc). _Cela peut porter à confusion_. Si vous utilisez `thresholds` par erreur comme nom pour la propriété de l'objet `options`, le tableau porté par `thresholds` va se retrouver égal à `[0.0]`, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.IntersectionObserver.thresholds")}}</p>
+{{Compat("api.IntersectionObserver.thresholds")}}
diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.md b/files/fr/web/api/intersectionobserver/unobserve/index.md
index c307d129e3..1437a9de7b 100644
--- a/files/fr/web/api/intersectionobserver/unobserve/index.md
+++ b/files/fr/web/api/intersectionobserver/unobserve/index.md
@@ -11,62 +11,47 @@ tags:
- unobserve
translation_of: Web/API/IntersectionObserver/unobserve
---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
-<p>La méthode <code><strong>unobserve()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> indique à l'objet <code>IntersectionObserver</code> courant de cesser d'observer l'élément cible spécifié.</p>
+La méthode **`unobserve()`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) indique à l'objet `IntersectionObserver` courant de cesser d'observer l'élément cible spécifié.
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>IntersectionObserver</var>.unobserve(<var>target</var>);</pre>
+ IntersectionObserver.unobserve(target);
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
-<dl>
- <dt><code>target</code></dt>
- <dd>L'<a href="/fr/docs/Web/API/Element"><code>élément</code></a> à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.</dd>
-</dl>
+- `target`
+ - : L'[`élément`](/fr/docs/Web/API/Element) à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
-<p><code>undefined</code>.</p>
+`undefined`.
-<h2 id="example">Exemple</h2>
+## Exemple
-<p>Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.</p>
+Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.
-<pre class="brush: js">let observer = new IntersectionObserver(callback);
+```js
+let observer = new IntersectionObserver(callback);
observer.observe(document.getElementById("elementAObserver"));
/* ... */
-observer.unobserve(document.getElementById("elementAObserver"));</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaire</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td>
- <td>{{Spec2('IntersectionObserver')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Intersection_Observer_API">L'API <i>Intersection Observer</i></a></li>
- <li><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>IntersectionObserver.observe()</code></a></li>
-</ul>
+observer.unobserve(document.getElementById("elementAObserver"));
+```
+
+## Spécifications
+
+| Spécification | Statut | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserver.unobserve")}}
+
+## Voir aussi
+
+- [L'API _Intersection Observer_](/fr/docs/Web/API/Intersection_Observer_API)
+- [`IntersectionObserver.observe()`](/fr/docs/Web/API/IntersectionObserver/observe)