Valeur utilisée

  • Raccourci de la révision : CSS/Valeur_utilisée
  • Titre de la révision : Valeur utilisée
  • ID de la révision : 347093
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • Commentaire Created the translation of this page

Contenu de la révision

La valeur utilisée de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés. Les valeurs utilisées peuvent être retrouvée en appelant window.getComputedStyle. Les dimensions (p. ex. width, line-height) sont toutes en pixels, les propriétés raccourcies (p. ex. background) sont cohérentes avec leurs propriétés composantes (p. ex. background-color), display est cohérente avec position et float, et toutes les propriétés CSS ont une valeur.

Détails

Il y a trois étapes pour calculer la valeur finale de n'importe quelle propriété CSS. Premièrement, la valeur spécifiée est le résultat de la cascade (choisir la règle la plus spécifique qui change la propriété), de l'héritage (utiliser la même valeur calculée qu'un parent si la propriété peut être héritée), ou la valeur par défaut est utilisée. Puis, la valeur calculée est déterminée selon la spécification (par exemple, un span avec position: absolute vera la valeur calculée de display changer à block). Finalement, la mise en page est calculée (les dimensions qui ont pour valeur auto ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la valeur utilisée. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à window.getComputedStyle.

Exemple

Pas de largeur explicite. Valeur spécifiée width: auto (par défaut). Valeur calculée width: auto. Largeur utilisée width: 998px (par exemple).
Valeur explicite width: 50%. Valeur spécifiée width: 50%. Valeur calculée width: 50%. Valeur utiliséewidth: 447px (par exemple).
Valeur explicite width: inherit. Valeur spécifiée width: 50%. Valeur calculée width: 50%. Valeur utilisée width: 221px (par exemple).

Différence avec les valeurs calculées

CSS 2.0 définissait la valeur calculée comme la dernière étape du calcul de la valeur. Puis, CSS 2.1 a introduit une définition distincte de la valeur utilisée de manière à ce qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (p. ex. display, font-size, line-height), les valeurs calculées et les valeurs utilisées sont identiques. Ces propriétés dépendent de la mise en page et ont donc des valeurs calculées et utilisées différentes (extrait depuis CSS 2.1 Changes: Specified, computed, and actual values) :

  • background-position
  • bottom, left, right, top
  • height, width
  • margin-bottom, margin-left, margin-right, margin-top,
  • min-height, min-width
  • padding-bottom, padding-left, padding-right, padding-top
  • text-indent

Spécification

CSS Level 2: Used Values

Voir également

Source de la révision

<p>La valeur utilisée de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés. Les valeurs utilisées peuvent être retrouvée en appelant <a href="/fr/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>. Les dimensions (p. ex. <code>width</code>, <code>line-height</code>) sont toutes en pixels, les propriétés raccourcies (p. ex. <code>background</code>) sont cohérentes avec leurs propriétés composantes (p. ex. <code>background-color</code>),&nbsp;<code>display</code> est cohérente avec <code>position</code> et <code>float</code>, et toutes les propriétés CSS ont une valeur.</p>
<h2 id="Details">Détails</h2>
<p>Il y a trois étapes pour calculer la valeur finale de n'importe quelle propriété CSS. Premièrement, la <a href="/fr/docs/CSS/Valeur_spécifiée" title="https://developer.mozilla.org/en/CSS/specified_value">valeur spécifiée</a> est le résultat de la cascade (choisir la règle la plus spécifique qui change la propriété), de l'<a href="/fr/docs/CSS/Héritage" title="en/CSS/inheritance">héritage</a> (utiliser la même valeur calculée qu'un parent si la propriété peut être héritée), ou la valeur par défaut est utilisée. Puis, la <a href="/fr/docs/CSS/Valeur_calculée" title="en/CSS/computed value">valeur calculée</a> est déterminée selon la spécification (par exemple, un <code>span</code> avec <code>position: absolute</code> vera la valeur calculée de <code>display</code> changer à <code>block</code>). Finalement, la mise en page est calculée (les dimensions qui ont pour valeur <code>auto</code> ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la <strong>valeur utilisée</strong>. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à <a href="/fr/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>.</p>
<h2 id="Example">Exemple</h2>
<div style="border: 1px solid red">
  Pas de largeur explicite. Valeur spécifiée width: auto (par défaut). Valeur calculée width: auto. Largeur utilisée width: 998px (par exemple).
  <div style="border: 1px solid green; width: 50%">
    Valeur explicite width: 50%. Valeur spécifiée width: 50%. Valeur calculée width: 50%. Valeur utiliséewidth: 447px (par exemple).
    <div style="border: 1px solid blue; width: inherit">
      Valeur explicite width: inherit. Valeur spécifiée width: 50%. Valeur calculée width: 50%. Valeur utilisée width: 221px (par exemple).</div>
  </div>
</div>
<h2 id="Difference_from_computed_values">Différence avec les valeurs calculées</h2>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/CSS/computed value">valeur calculée</a> comme la dernière étape du calcul de la valeur. Puis, CSS 2.1 a introduit une définition distincte de la valeur utilisée de manière à ce qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (p. ex. <code>display</code>, <code>font-size</code>, <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Ces propriétés dépendent de la mise en page et ont donc des valeurs calculées et utilisées différentes (extrait depuis <a class="external" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>) :</p>
<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
  <li style="margin-bottom: 0.25em; ">background-position</li>
  <li style="margin-bottom: 0.25em; ">bottom, left, right, top</li>
  <li style="margin-bottom: 0.25em; ">height, width</li>
  <li style="margin-bottom: 0.25em; ">margin-bottom, margin-left, margin-right, margin-top,</li>
  <li style="margin-bottom: 0.25em; ">min-height, min-width</li>
  <li style="margin-bottom: 0.25em; ">padding-bottom, padding-left, padding-right, padding-top</li>
  <li style="margin-bottom: 0.25em; ">text-indent</li>
</ul>
<h2 id="Specification">Spécification</h2>
<p><a class="external" href="http://www.w3.org/TR/CSS2/cascade.html#used-value" title="http://www.w3.org/TR/CSS2/cascade.html#used-value">CSS Level 2: Used Values</a></p>
<h2 id="See_also">Voir également</h2>
<ul>
  <li>{{ CSS_key_concepts() }}</li>
  <li><a href="/en-US/docs/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></li>
</ul>
Revenir à cette révision