diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-26 13:11:47 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-26 13:11:47 +0200 |
| commit | 6772831200d14c2436aea2d0c837f40dbf12156f (patch) | |
| tree | e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/css_object_model | |
| parent | 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff) | |
| download | translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip | |
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
Diffstat (limited to 'files/fr/web/api/css_object_model')
3 files changed, 16 insertions, 18 deletions
diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index 04bb432759..4b0fc4ff56 100644 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -9,27 +9,27 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements <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> -<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/width" title="https://developer.mozilla.org/fr/docs/Web/CSS/width">width</a></code> et <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/height" title="https://developer.mozilla.org/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p> +<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> -<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2> +<h2 id="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2> -<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" title="/en/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight" title="/en/DOM/element.offsetHeight">offsetHeight</a></code>.</p> +<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> -<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect" title="/en/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> +<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> <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> -<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> +<p><img src="dimensions-offset.png"></p> -<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2> +<h2 id="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2> -<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" title="/en/DOM/element.clientWidth">clientWidth</a></code> et <a href="/fr/DOM/element.clientHeight" title="/en/DOM/element.clientHeight"><code> clientHeight</code></a> :</p> +<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> -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> +<p><img src="dimensions-client.png"></p> -<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">Grandeur totale</h2> +<h2 id="How_big_is_the_content.3F">Grandeur totale</h2> -<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" title="/en/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight" title="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p> +<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> <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> @@ -38,6 +38,6 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li> + <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> diff --git a/files/fr/web/api/css_object_model/index.html b/files/fr/web/api/css_object_model/index.html index 81547c72c2..ae59f591a9 100644 --- a/files/fr/web/api/css_object_model/index.html +++ b/files/fr/web/api/css_object_model/index.html @@ -13,7 +13,6 @@ translation_of: Web/API/CSS_Object_Model <h2 id="Référence">Référence</h2> -<div class="index"> <ul> <li>{{domxref("AnimationEvent")}}</li> <li>{{domxref("CaretPosition")}}</li> @@ -51,7 +50,6 @@ translation_of: Web/API/CSS_Object_Model <li>{{domxref("StylesheetList")}}</li> <li>{{domxref("TransitionEvent")}}</li> </ul> -</div> <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> diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html index 39b279e9d3..73406a99b5 100644 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation <h2 id="Sommaire">Sommaire</h2> -<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/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> +<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> <p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p> <ul> - <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation" title="en-US/CSS/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 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> @@ -132,7 +132,7 @@ li { <h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2> <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" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/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> +<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> <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> @@ -175,6 +175,6 @@ 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" title="en-US/CSS/Media queries#orientation">Media query orientation</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></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> |
