aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/performanceelementtiming
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
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')
-rw-r--r--files/fr/web/api/performanceelementtiming/element/index.md60
-rw-r--r--files/fr/web/api/performanceelementtiming/id/index.md58
-rw-r--r--files/fr/web/api/performanceelementtiming/identifier/index.md58
-rw-r--r--files/fr/web/api/performanceelementtiming/index.md95
-rw-r--r--files/fr/web/api/performanceelementtiming/intersectionrect/index.md62
-rw-r--r--files/fr/web/api/performanceelementtiming/loadtime/index.md60
-rw-r--r--files/fr/web/api/performanceelementtiming/naturalheight/index.md60
-rw-r--r--files/fr/web/api/performanceelementtiming/naturalwidth/index.md71
-rw-r--r--files/fr/web/api/performanceelementtiming/rendertime/index.md74
-rw-r--r--files/fr/web/api/performanceelementtiming/tojson/index.md63
-rw-r--r--files/fr/web/api/performanceelementtiming/url/index.md60
11 files changed, 313 insertions, 408 deletions
diff --git a/files/fr/web/api/performanceelementtiming/element/index.md b/files/fr/web/api/performanceelementtiming/element/index.md
index 1a40658ff7..d307ff909b 100644
--- a/files/fr/web/api/performanceelementtiming/element/index.md
+++ b/files/fr/web/api/performanceelementtiming/element/index.md
@@ -10,55 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/element
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>element</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est une représentation littérale de l'élément associé.</p>
+La propriété en lecture seule **`element`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie un [`Element`](/fr/docs/Web/API/Element) qui est une représentation littérale de l'élément associé.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>element</var> = <var>PerformanceElementTiming</var>.element;</pre>
+```js
+var element = PerformanceElementTiming.element;
+```
-<h3>Valeur</h3>
-<p>Un objet de type <a href="/fr/docs/Web/API/Element"><code>Element</code></a>.</p>
+### Valeur
-<h2 id="Examples">Exemples</h2>
+Un objet de type [`Element`](/fr/docs/Web/API/Element).
-<p>Dans cet exemple, l'appel à <code>entry.element</code> va enregistrer dans la console <code>&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image"&gt;</code>.</p>
+## Exemples
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image"&gt;</pre>
+Dans cet exemple, l'appel à `entry.element` va enregistrer dans la console `<img src="image.jpg" alt="une belle image" elementtiming="big-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">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+ let entries = list.getEntries().forEach(function (entry) {
if (entry.identifier === "big-image") {
console.log(entry.element);
}
});
});
-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-element','PerformanceElementTiming.element')}}</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-element','PerformanceElementTiming.element')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.element")}}</p>
+{{Compat("api.PerformanceElementTiming.element")}}
diff --git a/files/fr/web/api/performanceelementtiming/id/index.md b/files/fr/web/api/performanceelementtiming/id/index.md
index f3083cd256..f178f4ea8f 100644
--- a/files/fr/web/api/performanceelementtiming/id/index.md
+++ b/files/fr/web/api/performanceelementtiming/id/index.md
@@ -10,55 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/id
---
-<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p>
+La propriété en lecture seule **`id`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie l'[`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) de l'élément associé.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>id</var> = <var>PerformanceElementTiming</var>.id;</pre>
+```js
+var id = PerformanceElementTiming.id;
+```
-<h3>Valeur</h3>
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+### Valeur
-<h2 id="Examples">Exemples</h2>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
-<p>Dans cet exemple, l'appel à <code>entry.id</code> entraînera l'affichage dans la console du code <code>myImage</code>, qui est l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément 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.id` entraînera l'affichage dans la console du code `myImage`, qui est l'[`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) de l'élément image.
-<pre class="brush:js">const observer = new PerformanceObserver((list) => {
+```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.id);
}
});
});
-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>entryType</code></a> <code>element</code> 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 [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) `element` 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-id','PerformanceElementTiming.id')}}</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-id','PerformanceElementTiming.id')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.id")}}</p>
+{{Compat("api.PerformanceElementTiming.id")}}
diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.md b/files/fr/web/api/performanceelementtiming/identifier/index.md
index 1fb524cf4f..b75eebe995 100644
--- a/files/fr/web/api/performanceelementtiming/identifier/index.md
+++ b/files/fr/web/api/performanceelementtiming/identifier/index.md
@@ -10,55 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/identifier
---
-<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>identifier</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la valeur de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> sur l'élément.</p>
+La propriété en lecture seule **`identifier`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie la valeur de l'attribut [`elementtiming`](/fr/docs/Web/HTML/Attributes/elementtiming) sur l'élément.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>identifier</var> = <var>PerformanceElementTiming</var>.identifier;</pre>
+```js
+var identifier = PerformanceElementTiming.identifier;
+```
-<h3>Valeur</h3>
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+### Valeur
-<h2 id="Examples">Examples</h2>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
-<p>Dans cet exemple, la valeur de <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> est <code>big-image</code>. L'appel à <code>entry.indentifier</code> renvoie donc la chaîne de caractères <code>big-image</code>.</p>
+## Examples
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, la valeur de [`elementtiming`](/fr/docs/Web/HTML/Attributes/elementtiming) est `big-image`. L'appel à `entry.indentifier` renvoie donc la chaîne de caractères `big-image`.
-<pre class="brush:js">const observer = new PerformanceObserver((list) => {
+```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.naturalWidth);
}
});
});
-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>entryType</code></a> <code>element</code> 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 [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) `element` 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-identifier','PerformanceElementTiming.identifier')}}</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-identifier','PerformanceElementTiming.identifier')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.identifier")}}</p>
+{{Compat("api.PerformanceElementTiming.identifier")}}
diff --git a/files/fr/web/api/performanceelementtiming/index.md b/files/fr/web/api/performanceelementtiming/index.md
index 3a591036d7..f396e7d647 100644
--- a/files/fr/web/api/performanceelementtiming/index.md
+++ b/files/fr/web/api/performanceelementtiming/index.md
@@ -8,75 +8,62 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming
---
-<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
-<p>L'interface <strong><code>PerformanceElementTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing API</a> rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.</p>
+L'interface **`PerformanceElementTiming`** de l'API [Element Timing API](/fr/docs/Web/API/Element_timing_API) rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
-<dl>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/element"><code>PerformanceElementTiming.element</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> représentant l'élément pour lequel nous retournons des informations.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/id"><code>PerformanceElementTiming.id</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'identifiant (attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) de l'élément.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/identifier"><code>PerformanceElementTiming.identifier</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la valeur de l'attribut <a href="/fr/docs/Web/HTML/Attributes/elementtiming"><code>elementtiming</code></a> de l'élément.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/intersectionRect"><code>PerformanceElementTiming.intersectionRect</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la fenêtre d'affichage.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/loadTime"><code>PerformanceElementTiming.loadTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec l'heure de chargement de l'élément.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalHeight"><code>PerformanceElementTiming.naturalHeight</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalWidth"><code>PerformanceElementTiming.naturalWidth</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/renderTime"><code>PerformanceElementTiming.renderTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le renderTime de l'élément.</dd>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/url"><code>PerformanceElementTiming.url</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.</dd>
-</dl>
+- [`PerformanceElementTiming.element`](/fr/docs/Web/API/PerformanceElementTiming/element) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un [`Element`](/fr/docs/Web/API/Element) représentant l'élément pour lequel nous retournons des informations.
+- [`PerformanceElementTiming.id`](/fr/docs/Web/API/PerformanceElementTiming/id) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'identifiant (attribut [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id)) de l'élément.
+- [`PerformanceElementTiming.identifier`](/fr/docs/Web/API/PerformanceElementTiming/identifier) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Une [`DOMString`](/fr/docs/Web/API/DOMString) qui est la valeur de l'attribut [`elementtiming`](/fr/docs/Web/HTML/Attributes/elementtiming) de l'élément.
+- [`PerformanceElementTiming.intersectionRect`](/fr/docs/Web/API/PerformanceElementTiming/intersectionRect) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) qui est le rectangle de l'élément dans la fenêtre d'affichage.
+- [`PerformanceElementTiming.loadTime`](/fr/docs/Web/API/PerformanceElementTiming/loadTime) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec l'heure de chargement de l'élément.
+- [`PerformanceElementTiming.naturalHeight`](/fr/docs/Web/API/PerformanceElementTiming/naturalHeight) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un entier de 32 bits non signé (_unsigned long_) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
+- [`PerformanceElementTiming.naturalWidth`](/fr/docs/Web/API/PerformanceElementTiming/naturalWidth) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un entier de 32 bits non signé (_unsigned long_) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
+- [`PerformanceElementTiming.renderTime`](/fr/docs/Web/API/PerformanceElementTiming/renderTime) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec le renderTime de l'élément.
+- [`PerformanceElementTiming.url`](/fr/docs/Web/API/PerformanceElementTiming/url) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Une [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
-<dl>
- <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/toJSON"><code>PerformanceElementTiming.toJSON()</code></a> {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
- <dd>Génère une description JSON de l'objet.</dd>
-</dl>
+- [`PerformanceElementTiming.toJSON()`](/fr/docs/Web/API/PerformanceElementTiming/toJSON) {{Experimental_Inline}} {{Non-Standard_Inline}}
+ - : Génère une description JSON de l'objet.
-<h2 id="Examples">Exemples</h2>
+## Exemples
-<p>Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons 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, l'observation de l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entrytype</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément [`PerformanceEntry.entrytype`](/fr/docs/Web/API/PerformanceEntry/entryType) `element` afin d'utiliser l'interface `PerformanceElementTiming`.
-<p>Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.</p>
+Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.
-<pre class="brush: html">&lt;img src="image.jpg" elementtiming="big-image"&gt;
-&lt;p elementtiming="text" id="text-id"&gt;le texte ici&lt;/p&gt;</pre>
+```html
+<img src="image.jpg" elementtiming="big-image">
+<p elementtiming="text" id="text-id">le texte ici</p>
+```
-<pre class="brush: js">const observer = new PerformanceObserver((list) => {
+```js
+const observer = new PerformanceObserver((list) => {
let entries = list.getEntries().forEach(function (entry) {
console.log(entry);
});
});
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
-<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','#sec-performance-element-timing','PerformanceElementTiming')}}</td>
- <td>{{Spec2('Element Timing API')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming")}}</p>
+{{Compat("api.PerformanceElementTiming")}}
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")}}
diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.md b/files/fr/web/api/performanceelementtiming/loadtime/index.md
index 28e33d6384..21da532b76 100644
--- a/files/fr/web/api/performanceelementtiming/loadtime/index.md
+++ b/files/fr/web/api/performanceelementtiming/loadtime/index.md
@@ -10,55 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/loadTime
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>loadTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.</p>
+La propriété en lecture seule **`loadTime`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>loadTime</var> = <var>PerformanceElementTiming</var>.loadTime;</pre>
+```js
+var loadTime = PerformanceElementTiming.loadTime;
+```
-<h3>Valeur</h3>
-<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de chargement de l'élément.</p>
+### Valeur
-<h2 id="Examples">Exemples</h2>
+Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec le temps de chargement de l'élément.
-<p>Dans cet exemple, l'appel à <code>entry.loadTime</code> renvoie le temps de chargement 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.loadTime` renvoie le temps de chargement 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.loadTime);
}
});
});
-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-loadtime','PerformanceElementTiming.loadTime')}}</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-loadtime','PerformanceElementTiming.loadTime')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.loadTime")}}</p>
+{{Compat("api.PerformanceElementTiming.loadTime")}}
diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.md b/files/fr/web/api/performanceelementtiming/naturalheight/index.md
index 204efdc562..0fc7a49636 100644
--- a/files/fr/web/api/performanceelementtiming/naturalheight/index.md
+++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.md
@@ -10,55 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/naturalHeight
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>naturalHeight</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la hauteur intrinsèque de l'élément image.</p>
+La propriété en lecture seule **`naturalHeight`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie la hauteur intrinsèque de l'élément image.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>height</var> = PerformanceElementTiming.naturalHeight;</pre>
+```js
+var height = PerformanceElementTiming.naturalHeight;
+```
-<h3>Valeur</h3>
-<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+### Valeur
-<h2 id="Examples">Exemples</h2>
+Un entier de 32 bits non signé (_unsigned long_) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
-<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalHeight</code> renvoie <code>750</code>, c'est-à-dire la hauteur intrinsèque en pixels.</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, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de `entry.naturalHeight` renvoie `750`, c'est-à-dire la hauteur intrinsèque en pixels.
-<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.naturalHeight);
}
});
});
-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">Specifications</h2>
+## Specifications
-<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-naturalheight','PerformanceElementTiming.naturalHeight')}}</td>
- <td>{{Spec2('Element Timing API')}}</td>
- <td>Initial definition.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}} | {{Spec2('Element Timing API')}} | Initial definition. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.naturalHeight")}}</p>
+{{Compat("api.PerformanceElementTiming.naturalHeight")}}
diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.md b/files/fr/web/api/performanceelementtiming/naturalwidth/index.md
index 3e254d3289..1843a6a58f 100644
--- a/files/fr/web/api/performanceelementtiming/naturalwidth/index.md
+++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.md
@@ -10,54 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/naturalWidth
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p>
-<h2 id="Syntax">Syntax</h2>
+La propriété en lecture seule **`naturalWidth`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie la largeur intrinsèque de l'élément image.
-<pre class="brush:js">var <var>width</var> = <var>PerformanceElementTiming</var>.naturalWidth;</pre>
+## Syntax
-<h3>Valeur</h3>
-<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+```js
+var width = PerformanceElementTiming.naturalWidth;
+```
-<h2 id="Examples">Exemples</h2>
+### Valeur
-<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalWidth</code> renvoie <code>1000</code>, c'est-à-dire la largeur intrinsèque en pixels.</p>
+Un entier de 32 bits non signé (_unsigned long_) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+## Exemples
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
- let <var>entries</var> = list.getEntries().forEach(function (entry) {
+Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de `entry.naturalWidth` renvoie `1000`, c'est-à-dire la largeur intrinsèque en pixels.
+
+```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.naturalWidth);
}
});
});
-observer.observe({ entryTypes: ["element"] });</pre>
-
-<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>
-
-<h2 id="Specifications">Specifications</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('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}</td>
- <td>{{Spec2('Element Timing API')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceElementTiming.naturalWidth")}}</p>
+observer.observe({ entryTypes: ["element"] });
+```
+
+> **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`.
+
+## Specifications
+
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceElementTiming.naturalWidth")}}
diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.md b/files/fr/web/api/performanceelementtiming/rendertime/index.md
index b541771563..3614a4f1cf 100644
--- a/files/fr/web/api/performanceelementtiming/rendertime/index.md
+++ b/files/fr/web/api/performanceelementtiming/rendertime/index.md
@@ -10,59 +10,51 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/renderTime
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>renderTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le temps écoulé pour le rendu de l'élément associé.</p>
+La propriété en lecture seule **`renderTime`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie le temps écoulé pour le rendu de l'élément associé.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>renderTime</var> = PerformanceElementTiming.renderTime;</pre>
+```js
+var renderTime = PerformanceElementTiming.renderTime;
+```
-<h3>Valeur</h3>
-<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de rendu de l'élément.</p>
+### Valeur
-<p>Pour les images, il s'agira de l'<strong>horodatage du rendu de l'image</strong>. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin">Timing-allow-origin</a>), ceci retournera 0.</p>
+Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec le temps de rendu de l'élément.
-<p>Pour les nœuds de texte, il s'agira de l'<strong>horodatage du rendu du texte</strong>. Ceci est défini comme le moment où l'élément est affiché à l'écran.</p>
+Pour les images, il s'agira de l'**horodatage du rendu de l'image**. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête [Timing-allow-origin](/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin)), ceci retournera 0.
-<h2 id="Examples">Exemples</h2>
+Pour les nœuds de texte, il s'agira de l'**horodatage du rendu du texte**. Ceci est défini comme le moment où l'élément est affiché à l'écran.
-<p>Dans cet exemple, appeler <code>entry.renderTime</code> renvoie le temps de rendu de l'élément 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, appeler `entry.renderTime` renvoie le temps de rendu de l'élément 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.renderTime);
}
});
});
-observer.observe({ entryTypes: ["element"] });</pre>
-
-<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>
-
-<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('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}}</td>
- <td>{{Spec2('Element Timing API')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceElementTiming.renderTime")}}</p>
+observer.observe({ entryTypes: ["element"] });
+```
+
+> **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`.
+
+## Spécifications
+
+| Spécification | Statut | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceElementTiming.renderTime")}}
diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.md b/files/fr/web/api/performanceelementtiming/tojson/index.md
index b0dd7affae..bf0eb51cb8 100644
--- a/files/fr/web/api/performanceelementtiming/tojson/index.md
+++ b/files/fr/web/api/performanceelementtiming/tojson/index.md
@@ -10,59 +10,48 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/toJSON
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.</p>
+La méthode **`toJSON()`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>json</var> = PerformanceElementTiming.toJSON();</pre>
+```js
+var json = PerformanceElementTiming.toJSON();
+```
-<h3 id="Returns">Valeur de retour</h3>
+### Valeur de retour
-<dl>
- <dt><code>json</code></dt>
- <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>.</dd>
-</dl>
+- `json`
+ - : Un objet JSON qui est la sérialisation de l'objet [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming).
-<h2 id="Examples">Exemples</h2>
+## Exemples
-<p>Dans cet exemple, l'appel de <code>entry.toJSON()</code> renvoie une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>, avec les informations sur l'élément image.</p>
+Dans cet exemple, l'appel de `entry.toJSON()` renvoie une représentation JSON de l'objet [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming), avec les informations sur l'élément image.
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
- let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```js
+const observer = new PerformanceObserver((list) => {
+ let entries = list.getEntries().forEach(function (entry) {
if (entry.identifier === "big-image") {
console.log(entry.toJSON());
}
});
});
-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-tojson','PerformanceElementTiming.toJson()')}}</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-tojson','PerformanceElementTiming.toJson()')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.toJSON")}}</p>
+{{Compat("api.PerformanceElementTiming.toJSON")}}
diff --git a/files/fr/web/api/performanceelementtiming/url/index.md b/files/fr/web/api/performanceelementtiming/url/index.md
index 6828122328..bc22f2c6e6 100644
--- a/files/fr/web/api/performanceelementtiming/url/index.md
+++ b/files/fr/web/api/performanceelementtiming/url/index.md
@@ -10,55 +10,47 @@ tags:
- PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/url
---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
-<p>La propriété en lecture seule <strong><code>url</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.</p>
+La propriété en lecture seule **`url`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:js">var <var>url</var> = <var>PerformanceElementTiming</var>.url;</pre>
+```js
+var url = PerformanceElementTiming.url;
+```
-<h3>Valeur</h3>
-<p>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.</p>
+### Valeur
-<h2 id="Examples">Exemples</h2>
+Une [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.
-<p>Dans cet exemple, appeler <code>entry.url</code> renvoie <code>https://example.com/image.jpg</code>.</p>
+## Exemples
-<pre class="brush:html">&lt;img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, appeler `entry.url` renvoie `https://example.com/image.jpg`.
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
- let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="https://example.com/image.jpg" alt="une belle imahe" 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.url);
}
});
});
-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-url','PerformanceElementTiming.url')}}</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-url','PerformanceElementTiming.url')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("api.PerformanceElementTiming.url")}}</p>
+{{Compat("api.PerformanceElementTiming.url")}}