Prepare Web API section for Markdown conversion (#2464)

* Remove summary classes and ids

* Remove unecessary hidden

* Remove useless span filled with useless attributes / ids

* Remove useless font

* Remove notranslate

* Remove id in other elements than headings

* Remove name attributes

* Remove <pre><code> for JS w/ language-js class

* Remove <pre><code> for HTML w/ language-html class

* Remove <pre><code> for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI

1 files changed, 37 insertions, 6 deletions

diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html
index 74de1b77da..72f3d71689 100644
--- a/files/fr/web/api/element/clientleft/index.html
+++ b/files/fr/web/api/element/clientleft/index.html
@@ -24,13 +24,44 @@ browser-compat: api.Element.clientLeft
 var left = element.clientLeft;
 </pre>
 
-<h2 id="example">Exemple</h2>
+<h2 id="exemple">Exemple</h2>
 
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;"> padding-top</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
- <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;"> padding-bottom</p> </div> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
-</div>
+<p>Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure <code>border-left</code> noire de 24px. La valeur de <code>clientLeft</code> correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.</p>
+
+<h3>HTML</h3>
+
+<pre class="brush: html">
+&lt;div id="container"&gt;
+  &lt;div id="contained"&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+	  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+	  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3>CSS</h3>
+
+<pre class="brush: css">
+
+#container {
+	margin: 3rem;
+	background-color: rgb(255, 255, 204);
+	border: 4px dashed black;
+}
+
+#contained {
+	margin: 1rem;
+	border-left: 24px black solid;
+	padding: 0px 28px;
+	overflow: auto;
+	background-color: white;
+}
+</pre>
+
+<h3>Résultat</h3>
+
+{{EmbedLiveSample("Exemple", 400, 350)}}
 
 <h2 id="specifications">Spécifications</h2>