aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/performanceelementtiming/intersectionrect
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/performanceelementtiming/intersectionrect
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/performanceelementtiming/intersectionrect')
-rw-r--r--files/fr/web/api/performanceelementtiming/intersectionrect/index.md62
1 files changed, 27 insertions, 35 deletions
diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md
index 4954876475..a430ef9821 100644
--- a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md
+++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md
@@ -10,57 +10,49 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/intersectionRect
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>intersectionRect</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le rectangle de l'élément dans la zone d'affichage (<i>viewport</i>).</p>
+La propriété en lecture seule **`intersectionRect`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie le rectangle de l'élément dans la zone d'affichage (_viewport_).
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>rect</var> = PerformanceElementTiming.intersectionRect;</pre>
+```js
+var rect = PerformanceElementTiming.intersectionRect;
+```
-<h3>Valeur</h3>
-<p>Un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la zone d'affichage.</p>
+### Valeur
-<p>Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.</p>
+Un objet [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) qui est le rectangle de l'élément dans la zone d'affichage.
-<h2 id="Examples">Exemples</h2>
+Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.
-<p>Dans cet exemple, l'appel à <code>entry.intersectionRect</code> renvoie un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> avec le rectangle d'affichage de l'image.</p>
+## Exemples
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, l'appel à `entry.intersectionRect` renvoie un objet [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) avec le rectangle d'affichage de l'image.
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
- let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+ let entries = list.getEntries().forEach(function (entry) {
if (entry.identifier === "big-image") {
console.log(entry.intersectionRect);
}
});
});
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
-<div class="note">
- <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
-<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('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}</td>
- <td>{{Spec2('Element Timing API')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.intersectionRect")}}</p>
+{{Compat("api.PerformanceElementTiming.intersectionRect")}}