diff options
Diffstat (limited to 'files/fr/web/api/css_object_model')
3 files changed, 352 insertions, 0 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 new file mode 100644 index 0000000000..04bb432759 --- /dev/null +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,43 @@ +--- +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> + +<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> + +<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> + +<h2 id="How_much_room_does_it_use_up.3F" name="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>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>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> + +<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> + +<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><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h2 id="How_big_is_the_content.3F" name="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>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> + +<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> + +<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="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 new file mode 100644 index 0000000000..81547c72c2 --- /dev/null +++ b/files/fr/web/api/css_object_model/index.html @@ -0,0 +1,129 @@ +--- +title: CSS Object Model +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM + - Reference +translation_of: Web/API/CSS_Object_Model +--- +<p>{{DefaultAPISidebar('CSSOM')}}</p> + +<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> + +<h2 id="Référence">Référence</h2> + +<div class="index"> +<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> +</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> + +<h2 id="Tutoriels">Tutoriels</h2> + +<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> + +<h2 id="Spécifications">Spécifications</h2> + +<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> + +<h2 id="Notes_sur_la_compatibilité_des_navigateurs">Notes sur la compatibilité des navigateurs</h2> + +<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> 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 new file mode 100644 index 0000000000..39b279e9d3 --- /dev/null +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,180 @@ +--- +title: Gérer l'orientation de l'écran +slug: Web/API/CSS_Object_Model/Managing_screen_orientation +tags: + - Avancé + - CSSOM View + - Guide + - Screen Orientation +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +<p>{{SeeCompatTable}}{{APIRef}}</p> + +<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>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 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> + +<h2 id="Ajuster_la_mise_en_page_selon_l'orientation">Ajuster la mise en page selon l'orientation</h2> + +<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> + +<p>Prenons pour exemple le code HTML suivant:</p> + +<pre class="brush: html"><ul id="toolbar"> + <li>A</li> + <li>B</li> + <li>C</li> +</ul> + +<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> +</pre> + +<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> + +<pre class="brush: css">/* D'abord, on définit les styles communs */ + +html, body { + width : 100%; + height: 100%; +} + +body { + border: 1px solid black; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +p { + font : 1em sans-serif; + margin : 0; + padding: .5em; +} + +ul { + list-style: none; + + font : 1em monospace; + margin : 0; + padding: .5em; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; +} + +li { + display: inline-block; + margin : 0; + 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> + +<pre class="brush: css">/* En mode portrait, on veut la barre d'outils en haut */ + +@media screen and (orientation: portrait) { + #toolbar { + width: 100%; + } +} + +/* En mode paysage, on veut la barre d'outils à gauche */ + +@media screen and (orientation: landscape) { + #toolbar { + position: fixed; + width: 2.65em; + height: 100%; + } + + p { + margin-left: 2em; + } + + li + li { + margin-top: .5em; + } +} +</pre> + +<p>Et voici le résultat:</p> + +<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> + +<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> + +<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> +</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> + +<p>L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.</p> + +<h3 id="Écouter_les_changements_d'orientation">Écouter les changements d'orientation</h3> + +<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> + +<pre class="brush: 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> + +<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> + +<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> + +<pre class="brush: js">screen.lockOrientation('landscape');</pre> + +<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> + +<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> + +<h2 id="Firefox_OS_et_Android_Verrouiller_l'orientation_avec_le_manifeste">Firefox OS et Android: Verrouiller l'orientation avec le manifeste</h2> + +<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> + +<pre class="brush: json">"orientation": "portrait"</pre> + +<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" 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> +</ul> |