convert content to md

3 files changed, 136 insertions, 202 deletions

diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md
index 4b0fc4ff56..a462fb28d2 100644
--- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md
+++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md
@@ -3,41 +3,39 @@ title: Déterminer les dimensions des éléments
 slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
 translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
 ---
-<p>{{APIRef("CSSOM View")}}</p>
+{{APIRef("CSSOM View")}}
 
-<p>Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.</p>
+Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.
 
-<p>Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .</p>
+Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .
 
-<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="/fr/docs/Web/CSS/width">width</a></code> et <code><a href="/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p>
+Si vous voulez définir la largeur et la hauteur d'un élément, utilisez [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height); ou les propriétés [`min-width`](/fr/docs/Web/CSS/min-width), [`max-width`](/fr/docs/Web/CSS/max-width), [`min-height`](/fr/docs/Web/CSS/min-height) et [`max-height`](/fr/docs/Web/CSS/max-height).
 
-<h2 id="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2>
+## Que faut-il utiliser ?
 
-<p>Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight">offsetHeight</a></code>.</p>
+Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés [`offsetWidth`](/fr/DOM/element.offsetWidth) et [`offsetHeight`](/fr/DOM/element.offsetHeight).
 
-<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, <code>offsetWidth</code> et <code>offsetHeight</code> renvoie la disposition de la largeur et la hauteur de l'élément, tandis que <code>getBoundingClientRect()</code> retourne le rendu de la largeur et de la hauteur.</p>
+La plupart du temps ce sont les mêmes que la largeur et la hauteur de [`getBoundingClientRect()`](/fr/DOM/element.getBoundingClientRect), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, `offsetWidth` et `offsetHeight` renvoie la disposition de la largeur et la hauteur de l'élément, tandis que `getBoundingClientRect()` retourne le rendu de la largeur et de la hauteur.
 
-<p>A titre d'exemple, si l'élément a <code>width: 100px;</code> et <code>transform: scale(0.5);</code> <code>getBoundingClientRect()</code> retournera 50 comme largeur, tandis que <code>offsetWidth</code> retournera 100.</p>
+A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` `getBoundingClientRect()` retournera 50 comme largeur, tandis que `offsetWidth` retournera 100.
 
-<p><img src="dimensions-offset.png"></p>
+![](dimensions-offset.png)
 
-<h2 id="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2>
+## Quelle est la taille du contenu affiché ?
 
-<p>Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.clientWidth">clientWidth</a></code> et  <a href="/fr/DOM/element.clientHeight"><code> clientHeight</code></a> :</p>
+Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et  [`clientHeight`](/fr/DOM/element.clientHeight) :
 
-<p><img src="dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<h2 id="How_big_is_the_content.3F">Grandeur totale</h2>
+## Grandeur totale
 
-<p>Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés <code><a href="/fr/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p>
+Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés [`scrollWidth`](/fr/DOM/element.scrollWidth) et [`scrollHeight`](/fr/docs/Web/API/Element.scrollHeight).
 
-<p>Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.</p>
+Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.
 
-<p>Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, <code>scrollWidth</code> retourne 600 tandis que <code>scrollHeight</code> retourne 400.</p>
+Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, `scrollWidth` retourne 600 tandis que `scrollHeight` retourne 400.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li>
- <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
-</ul>
+- <http://www.w3.org/TR/cssom-view/>
+- [MSDN: Measuring Element Dimension and Location](<https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)>)
diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md
index ae59f591a9..e4d30ca91e 100644
--- a/files/fr/web/api/css_object_model/index.md
+++ b/files/fr/web/api/css_object_model/index.md
@@ -7,121 +7,70 @@ tags:
   - Reference
 translation_of: Web/API/CSS_Object_Model
 ---
-<p>{{DefaultAPISidebar('CSSOM')}}</p>
+{{DefaultAPISidebar('CSSOM')}}
 
-<p>Le <strong>CSS Object Model</strong> est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.</p>
+Le **CSS Object Model** est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<ul>
- <li>{{domxref("AnimationEvent")}}</li>
- <li>{{domxref("CaretPosition")}}</li>
- <li>{{domxref("CSS")}}</li>
- <li>{{domxref("CSSCharsetRule")}}</li>
- <li>{{domxref("CSSConditionRule")}}</li>
- <li>{{domxref("CSSCounterStyleRule")}}</li>
- <li>{{domxref("CSSFontFaceRule")}}</li>
- <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
- <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
- <li>{{domxref("CSSGroupingRule")}}</li>
- <li>{{domxref("CSSImportRule")}}</li>
- <li>{{domxref("CSSKeyframeRule")}}</li>
- <li>{{domxref("CSSKeyframesRule")}}</li>
- <li>{{domxref("CSSMarginRule")}}</li>
- <li>{{domxref("CSSMediaRule")}}</li>
- <li>{{domxref("CSSNamespaceRule")}}</li>
- <li>{{domxref("CSSPageRule")}}</li>
- <li>{{domxref("CSSRule")}}</li>
- <li>{{domxref("CSSRuleList")}}</li>
- <li>{{domxref("CSSStylesheet")}}</li>
- <li>{{domxref("CSSStyleDeclaration")}}</li>
- <li>{{domxref("CSSSupportsRule")}}</li>
- <li>{{domxref("CSSVariablesMap")}}</li>
- <li>{{domxref("CSSViewportRule")}}</li>
- <li>{{domxref("ElementCSSInlineStyle")}}</li>
- <li>{{domxref("GeometryUtils")}}</li>
- <li>{{domxref("GetStyleUtils")}}</li>
- <li>{{domxref("LinkStyle")}}</li>
- <li>{{domxref("MediaList")}}</li>
- <li>{{domxref("MediaQueryList")}}</li>
- <li>{{domxref("PseudoElement")}}</li>
- <li>{{domxref("Screen")}}</li>
- <li>{{domxref("Stylesheet")}}</li>
- <li>{{domxref("StylesheetList")}}</li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- {{domxref("AnimationEvent")}}
+- {{domxref("CaretPosition")}}
+- {{domxref("CSS")}}
+- {{domxref("CSSCharsetRule")}}
+- {{domxref("CSSConditionRule")}}
+- {{domxref("CSSCounterStyleRule")}}
+- {{domxref("CSSFontFaceRule")}}
+- {{domxref("CSSFontFeatureValuesMap")}}
+- {{domxref("CSSFontFeatureValuesRule")}}
+- {{domxref("CSSGroupingRule")}}
+- {{domxref("CSSImportRule")}}
+- {{domxref("CSSKeyframeRule")}}
+- {{domxref("CSSKeyframesRule")}}
+- {{domxref("CSSMarginRule")}}
+- {{domxref("CSSMediaRule")}}
+- {{domxref("CSSNamespaceRule")}}
+- {{domxref("CSSPageRule")}}
+- {{domxref("CSSRule")}}
+- {{domxref("CSSRuleList")}}
+- {{domxref("CSSStylesheet")}}
+- {{domxref("CSSStyleDeclaration")}}
+- {{domxref("CSSSupportsRule")}}
+- {{domxref("CSSVariablesMap")}}
+- {{domxref("CSSViewportRule")}}
+- {{domxref("ElementCSSInlineStyle")}}
+- {{domxref("GeometryUtils")}}
+- {{domxref("GetStyleUtils")}}
+- {{domxref("LinkStyle")}}
+- {{domxref("MediaList")}}
+- {{domxref("MediaQueryList")}}
+- {{domxref("PseudoElement")}}
+- {{domxref("Screen")}}
+- {{domxref("Stylesheet")}}
+- {{domxref("StylesheetList")}}
+- {{domxref("TransitionEvent")}}
 
-<p>Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.</p>
+Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.
 
-<h2 id="Tutoriels">Tutoriels</h2>
+## Tutoriels
 
-<ul>
- <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions l’un élément</a> (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).</li>
- <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l’orientation de l’écran</a></li>
-</ul>
+- [Déterminer les dimensions l’un élément](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).
+- [Gérer l’orientation de l’écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSSOM")}}</td>
-   <td>{{Spec2("CSSOM")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSSOM View")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Screen Orientation")}}</td>
-   <td>{{Spec2("Screen Orientation")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Fonts")}}</td>
-   <td>{{Spec2("CSS3 Fonts")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Animations")}}</td>
-   <td>{{Spec2("CSS3 Animations")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Transitions")}}</td>
-   <td>{{Spec2("CSS3 Transitions")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Variables")}}</td>
-   <td>{{Spec2("CSS3 Variables")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Conditional")}}</td>
-   <td>{{Spec2("CSS3 Conditional")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Device")}}</td>
-   <td>{{Spec2("CSS3 Device")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Counter Styles")}}</td>
-   <td>{{Spec2("CSS3 Counter Styles")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | Statut                                       | Commentaire |
+| ------------------------------------------------ | -------------------------------------------- | ----------- |
+| {{SpecName("CSSOM")}}                     | {{Spec2("CSSOM")}}                     |             |
+| {{SpecName("CSSOM View")}}             | {{Spec2("CSSOM View")}}             |             |
+| {{SpecName("Screen Orientation")}}     | {{Spec2("Screen Orientation")}}     |             |
+| {{SpecName("CSS3 Fonts")}}             | {{Spec2("CSS3 Fonts")}}             |             |
+| {{SpecName("CSS3 Animations")}}         | {{Spec2("CSS3 Animations")}}         |             |
+| {{SpecName("CSS3 Transitions")}}     | {{Spec2("CSS3 Transitions")}}     |             |
+| {{SpecName("CSS3 Variables")}}         | {{Spec2("CSS3 Variables")}}         |             |
+| {{SpecName("CSS3 Conditional")}}     | {{Spec2("CSS3 Conditional")}}     |             |
+| {{SpecName("CSS3 Device")}}             | {{Spec2("CSS3 Device")}}             |             |
+| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} |             |
 
-<h2 id="Notes_sur_la_compatibilité_des_navigateurs">Notes sur la compatibilité des navigateurs</h2>
+## Notes sur la compatibilité des navigateurs
 
-<p>Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.</p>
+Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.
diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md
index 73406a99b5..3af0577eb9 100644
--- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md
+++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md
@@ -8,37 +8,37 @@ tags:
   - Screen Orientation
 translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
 ---
-<p>{{SeeCompatTable}}{{APIRef}}</p>
+{{SeeCompatTable}}{{APIRef}}
 
-<h2 id="Sommaire">Sommaire</h2>
+## Sommaire
 
-<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation">l'orientation de l'appareil</a>. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.</p>
+L'orientation de l'écran est quelque chose de légèrement différent de [l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation). Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.
 
-<p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p>
+Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:
 
-<ul>
- <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation">media query orientation</a>. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).</li>
- <li>La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.</li>
-</ul>
+- La première est la [media query orientation](/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation). Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
+- La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.
 
-<h2 id="Ajuster_la_mise_en_page_selon_l'orientation">Ajuster la mise en page selon l'orientation</h2>
+## Ajuster la mise en page selon l'orientation
 
-<p>Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.</p>
+Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.
 
-<p>Prenons pour exemple le code HTML suivant:</p>
+Prenons pour exemple le code HTML suivant:
 
-<pre class="brush: html">&lt;ul id="toolbar"&gt;
-  &lt;li&gt;A&lt;/li&gt;
-  &lt;li&gt;B&lt;/li&gt;
-  &lt;li&gt;C&lt;/li&gt;
-&lt;/ul&gt;
+```html
+<ul id="toolbar">
+  <li>A</li>
+  <li>B</li>
+  <li>C</li>
+</ul>
 
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
-</pre>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+```
 
-<p>Le CSS s'appuie sur une media query <code>orientation</code> pour gérer les styles spécifiques liés à l'orientation de l'écran.</p>
+Le CSS s'appuie sur une media query `orientation` pour gérer les styles spécifiques liés à l'orientation de l'écran.
 
-<pre class="brush: css">/* D'abord, on définit les styles communs */
+```css
+/* D'abord, on définit les styles communs */
 
 html, body {
   width : 100%;
@@ -77,11 +77,12 @@ li {
   padding: 0.5em;
   background: white;
 }
-</pre>
+```
 
-<p>Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.</p>
+Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.
 
-<pre class="brush: css">/* En mode portrait, on veut la barre d'outils en haut */
+```css
+/* En mode portrait, on veut la barre d'outils en haut */
 
 @media screen and (orientation: portrait) {
   #toolbar {
@@ -106,75 +107,61 @@ li {
     margin-top: .5em;
   }
 }
-</pre>
+```
 
-<p>Et voici le résultat:</p>
+Et voici le résultat:
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Portrait</th>
-   <th scope="col">Landscape</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}</td>
-   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}</td>
-  </tr>
- </tbody>
-</table>
+| Portrait                                                                                                 | Landscape                                                                                                |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| {{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }} | {{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }} |
 
-<div class="note">
-<p><strong>Note:</strong> La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.</p>
-</div>
+> **Note :** La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.
 
-<h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2>
+## Verrouiller l'orientation de l'écran
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette API est expérimentale et est actuellement disponible sur <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox pour Android</a> avec le préfixe <code>moz</code>, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe <code>ms</code>.</p>
-</div>
+> **Attention :** Cette API est expérimentale et est actuellement disponible sur [Firefox OS](/en-US/docs/Mozilla/Firefox_OS) et [Firefox pour Android](/en-US/docs/Mozilla/Firefox_for_Android) avec le préfixe `moz`, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe `ms`.
 
-<p>Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.</p>
+Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.
 
-<p>L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.</p>
+L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.
 
-<h3 id="Écouter_les_changements_d'orientation">Écouter les changements d'orientation</h3>
+### Écouter les changements d'orientation
 
-<p>L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.</p>
+L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.
 
-<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+```js
+screen.addEventListener("orientationchange", function () {
   console.log("The orientation of the screen is: " + screen.orientation);
 });
-</pre>
+```
 
-<h3 id="Empêcher_le_changement_d'orientation">Empêcher le changement d'orientation</h3>
+### Empêcher le changement d'orientation
 
-<p>Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.</p>
+Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.
 
-<p>{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).</p>
+{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).
 
-<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+```js
+screen.lockOrientation('landscape');
+```
 
-<div class="note">
-<p><strong>Note:</strong> Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à <code>landscape</code> et l'application B est verrouillée à <code>portrait</code>, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.</p>
+> **Note :** Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à `landscape` et l'application B est verrouillée à `portrait`, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.
+>
+> En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.
 
-<p>En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.</p>
-</div>
+## Firefox OS et Android: Verrouiller l'orientation avec le manifeste
 
-<h2 id="Firefox_OS_et_Android_Verrouiller_l'orientation_avec_le_manifeste">Firefox OS et Android: Verrouiller l'orientation avec le manifeste</h2>
+Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ [orientation](/en-US/Apps/Build/Manifest#orientation) dans le fichier manifeste de votre application, par exemple:
 
-<p>Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> dans le fichier manifeste de votre application, par exemple:</p>
+```json
+"orientation": "portrait"
+```
 
-<pre class="brush: json">"orientation": "portrait"</pre>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Screen.orientation")}}</li>
- <li>{{domxref("Screen.lockOrientation()")}}</li>
- <li>{{domxref("Screen.unlockOrientation()")}}</li>
- <li>{{domxref("Screen.onorientationchange")}}</li>
- <li><a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation">Media query orientation</a></li>
- <li><a href="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
-</ul>
+- {{domxref("Screen.orientation")}}
+- {{domxref("Screen.lockOrientation()")}}
+- {{domxref("Screen.unlockOrientation()")}}
+- {{domxref("Screen.onorientationchange")}}
+- [Media query orientation](/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation)
+- [A short introduction to media queries in Firefox 3.5](http://hacks.mozilla.org/2009/06/media-queries/)