From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: 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
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 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
---
 .../index.html                                     | 22 +++++++++++-----------
 files/fr/web/api/css_object_model/index.html       |  2 --
 .../managing_screen_orientation/index.html         | 10 +++++-----
 3 files changed, 16 insertions(+), 18 deletions(-)

(limited to 'files/fr/web/api/css_object_model')

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
 
 

Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .

-

Si vous voulez définir la largeur et la hauteur d'un élément, utilisez width et height; ou les propriétés min-width, max-width, min-height et max-height.

+

Si vous voulez définir la largeur et la hauteur d'un élément, utilisez width et height; ou les propriétés min-width, max-width, min-height et max-height.

-

Que faut-il utiliser ?

+

Que faut-il utiliser ?

-

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 et offsetHeight.

+

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 et offsetHeight.

-

La plupart du temps ce sont les mêmes que la largeur et la hauteur de 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.

+

La plupart du temps ce sont les mêmes que la largeur et la hauteur de 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.

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.

-

Image:Dimensions-offset.png

+

-

Quelle est la taille du contenu affiché ?

+

Quelle est la taille du contenu affiché ?

-

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 et  clientHeight :

+

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 et  clientHeight :

-

Image:Dimensions-client.png

+

-

Grandeur totale

+

Grandeur totale

-

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 et scrollHeight.

+

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 et scrollHeight.

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.

@@ -38,6 +38,6 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Voir aussi

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

Référence

-
  • {{domxref("AnimationEvent")}}
  • {{domxref("CaretPosition")}}
  • @@ -51,7 +50,6 @@ translation_of: Web/API/CSS_Object_Model
  • {{domxref("StylesheetList")}}
  • {{domxref("TransitionEvent")}}
-

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")}}.

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

Sommaire

-

L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil. 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.

+

L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil. 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.

Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:

    -
  • La première est la media query 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 première est la media query 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.
@@ -132,7 +132,7 @@ li {

Verrouiller l'orientation de l'écran

-

Attention: Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe moz, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe ms.

+

Attention : Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe moz, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe ms.

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.

@@ -175,6 +175,6 @@ li {
  • {{domxref("Screen.lockOrientation()")}}
  • {{domxref("Screen.unlockOrientation()")}}
  • {{domxref("Screen.onorientationchange")}}
  • -
  • Media query orientation
  • -
  • A short introduction to media queries in Firefox 3.5
  • +
  • Media query orientation
  • +
  • A short introduction to media queries in Firefox 3.5
  • -- cgit v1.2.3-54-g00ecf