aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/cssom_view
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/cssom_view
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/cssom_view')
-rw-r--r--files/fr/web/css/cssom_view/coordinate_systems/index.md183
-rw-r--r--files/fr/web/css/cssom_view/index.md45
2 files changed, 106 insertions, 122 deletions
diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.md b/files/fr/web/css/cssom_view/coordinate_systems/index.md
index a4de1dd910..6b1db2d4de 100644
--- a/files/fr/web/css/cssom_view/coordinate_systems/index.md
+++ b/files/fr/web/css/cssom_view/coordinate_systems/index.md
@@ -9,65 +9,64 @@ tags:
translation_of: Web/CSS/CSSOM_View/Coordinate_systems
original_slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées
---
-<div>{{cssref}}</div>
+{{cssref}}
-<p>Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.</p>
+Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.
-<p>Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.</p>
+Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.
-<h2 id="Dimensions">Dimensions</h2>
+## Dimensions
-<p>Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).</p>
+Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).
-<p>L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.</p>
+L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.
-<p>Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.</p>
+Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.
-<div class="note">
-<p><strong>Note :</strong> Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.</p>
-</div>
+> **Note :** Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.
-<h2 id="Les_systèmes_de_coordonnées_CSSOM_standard">Les systèmes de coordonnées CSSOM standard</h2>
+## Les systèmes de coordonnées CSSOM standard
-<p>Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.</p>
+Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.
-<h3 id="Offset"><em>Offset</em></h3>
+### _Offset_
-<p>Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.</p>
+Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.
-<p>Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.</p>
+Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.
-<h3 id="Client">Client</h3>
+### Client
-<p>Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (<em>viewport</em>) ou du contexte de navigation comme origine.</p>
+Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (_viewport_) ou du contexte de navigation comme origine.
-<p>Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.</p>
+Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.
-<h3 id="Page">Page</h3>
+### Page
-<p>Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).</p>
+Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).
-<p>Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.</p>
+Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.
-<h3 id="Écran">Écran</h3>
+### Écran
-<p>Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).</p>
+Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).
-<p>Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.</p>
+Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<p>Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.</p>
+Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
-<p>Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.</p>
+Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.
-<h4 id="Afficher_les_coordonnées">Afficher les coordonnées</h4>
+#### Afficher les coordonnées
-<p>Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.</p>
+Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.
-<pre class="brush: js">let inner = document.querySelector(".inner");
+```js
+let inner = document.querySelector(".inner");
let log = document.querySelector(".log");
function setCoords(e, type) {
@@ -77,17 +76,18 @@ function setCoords(e, type) {
document.getElementById(idX).innerText = e[idX];
document.getElementById(idY).innerText = e[idY];
}
-</pre>
+```
-<p>Dans <code>inner</code> On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.</p>
+Dans `inner` On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.
-<p>La fonction <code>setCoords()</code> prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables <code>idX</code> et <code>idY</code> sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si <code>type</code> vaut <code>"page"</code>, alors <code>idX</code> vaudra <code>"pageX"</code> et <code>idY</code> vaudra <code>"pageY"</code>.</p>
+La fonction `setCoords()` prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables `idX` et `idY` sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si `type` vaut `"page"`, alors `idX` vaudra `"pageX"` et `idY` vaudra `"pageY"`.
-<h4 id="Gérer_les_évènements_liés_à_la_souris">Gérer les évènements liés à la souris</h4>
+#### Gérer les évènements liés à la souris
-<p><code>setCoords()</code> est appelé par le gestionnaire d'évènements <code>update()</code> qui est lui même utilisé sur les différents évènements :</p>
+`setCoords()` est appelé par le gestionnaire d'évènements `update()` qui est lui même utilisé sur les différents évènements :
-<pre class="brush: js">function update(e) {
+```js
+function update(e) {
setCoords(e, "offset");
setCoords(e, "client");
setCoords(e, "page");
@@ -96,44 +96,48 @@ function setCoords(e, type) {
inner.addEventListener("mouseenter", update, false);
inner.addEventListener("mousemove", update, false);
-inner.addEventListener("mouseleave", update, false);</pre>
-
-<p>Le gestionnaire d'évènement <code>update()</code> appelle <code>setCoords()</code> pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.</p>
-
-<p>Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <code>&lt;div&gt;</code> avec l'identifiant <code>"log"</code>, on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.</p>
-
-<pre class="brush: html">&lt;div class="outer"&gt;
- &lt;div class="inner"&gt;
- &lt;div class="log"&gt;
- &lt;p&gt;
- Système de coordonnées Offset : &lt;span id="offsetX"&gt;0&lt;/span&gt;,
- &lt;span id="offsetY"&gt;0&lt;/span&gt;
- &lt;/p&gt;
- &lt;p&gt;
- Système de coordonnées Client : &lt;span id="clientX"&gt;0&lt;/span&gt;,
- &lt;span id="clientY"&gt;0&lt;/span&gt;
- &lt;/p&gt;
- &lt;p&gt;
- Système de coordonnées Page : &lt;span id="pageX"&gt;0&lt;/span&gt;,
- &lt;span id="pageY"&gt;0&lt;/span&gt;
- &lt;/p&gt;
- &lt;p&gt;
- Système de coordonnées Écran : &lt;span id="screenX"&gt;0&lt;/span&gt;,
- &lt;span id="screenY"&gt;0&lt;/span&gt;
- &lt;/p&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<p>Le code CSS est uniquement utilisé à des fins stylistiques. La classe <code>"outer"</code> est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir <em>scroller</em> horizontalement. La boîte <code>"inner"</code> est celle sur laquelle on suit les évènements.</p>
-
-<pre class="brush: css">.outer {
+inner.addEventListener("mouseleave", update, false);
+```
+
+Le gestionnaire d'évènement `update()` appelle `setCoords()` pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.
+
+Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.
+
+### HTML
+
+Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément `<div>` avec l'identifiant `"log"`, on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.
+
+```html
+<div class="outer">
+ <div class="inner">
+ <div class="log">
+ <p>
+ Système de coordonnées Offset : <span id="offsetX">0</span>,
+ <span id="offsetY">0</span>
+ </p>
+ <p>
+ Système de coordonnées Client : <span id="clientX">0</span>,
+ <span id="clientY">0</span>
+ </p>
+ <p>
+ Système de coordonnées Page : <span id="pageX">0</span>,
+ <span id="pageY">0</span>
+ </p>
+ <p>
+ Système de coordonnées Écran : <span id="screenX">0</span>,
+ <span id="screenY">0</span>
+ </p>
+ </div>
+ </div>
+</div>
+```
+
+### CSS
+
+Le code CSS est uniquement utilisé à des fins stylistiques. La classe `"outer"` est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir _scroller_ horizontalement. La boîte `"inner"` est celle sur laquelle on suit les évènements.
+
+```css
+.outer {
width: 1000px;
height: 200px;
background-color: red;
@@ -158,24 +162,21 @@ inner.addEventListener("mouseleave", update, false);</pre>
position: relative;
width: 100%;
text-align: center;
-}</pre>
+}
+```
+
+### Résultat
-<h3 id="Résultat">Résultat</h3>
+Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur `pageX`.
-<p>Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur <code>pageX</code>.</p>
+{{EmbedLiveSample("Exemples", 600, 250)}}
-<p>{{EmbedLiveSample("Exemples", 600, 250)}}</p>
+## Voir aussi
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) : comment modifier un système de coordonnées
+- Les coordonnées relatives aux évènements de la souris :
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li>
- <li>Les coordonnées relatives aux évènements de la souris :
- <ul>
- <li>{{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}</li>
- <li>{{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}</li>
- <li>{{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}</li>
- <li>{{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}</li>
- </ul>
- </li>
-</ul>
+ - {{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}
+ - {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}
+ - {{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}
+ - {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}
diff --git a/files/fr/web/css/cssom_view/index.md b/files/fr/web/css/cssom_view/index.md
index d052cb0abc..39cc562253 100644
--- a/files/fr/web/css/cssom_view/index.md
+++ b/files/fr/web/css/cssom_view/index.md
@@ -9,44 +9,27 @@ tags:
- Reference
translation_of: Web/CSS/CSSOM_View
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><em><strong>CSSOM View</strong></em> (ou <strong>Vue CSSOM</strong>) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (<em>scrolling</em>).</p>
+**_CSSOM View_** (ou **Vue CSSOM**) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (_scrolling_).
-<h2 id="Référence">Référence</h2>
+## Référence
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
-<ul>
- <li>{{cssxref("scroll-behavior")}}</li>
-</ul>
+- {{cssxref("scroll-behavior")}}
-<h2 id="Guide">Guide</h2>
+## Guide
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSSOM_View/Systèmes_de_coordonnées">Les systèmes de coordonnées</a></dt>
- <dd>Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.</dd>
-</dl>
+- [Les systèmes de coordonnées](/fr/docs/Web/CSS/CSSOM_View/Systèmes_de_coordonnées)
+ - : Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSSOM View')}}</td>
- <td>{{Spec2('CSSOM View')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | État | Commentaires |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSSOM View')}} | {{Spec2('CSSOM View')}} | Définition initiale. |
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("css.properties.scroll-behavior")}}</p>
+{{Compat("css.properties.scroll-behavior")}}