Valeur utilisée

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ées en appelant window.getComputedStyle. Les dimensions (par exemple width, line-height) sont exprimées en pixels, les propriétés raccourcies (comme background) sont cohérentes avec leurs propriétés composantes (par exemple background-color), display est cohérente avec position et float. Toutes les propriétés CSS ont une valeur.

Détails

Trois étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.

Tout d'abord, la valeur spécifiée est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'héritage (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.
Ensuite, la valeur calculée est déterminée selon la spécification (par exemple, un span avec position: absolute aura display qui passera à block pour la valeur calculée).
Enfin, 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.

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. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin 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 (comme display, font-size ou line-height), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de 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

Exemples

Cet exemple illustre et calcule les largeurs utilisées pour les trois éléments.

CSS

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Permet de mieux voir les résultats */
div {
  border: 1px solid red;
  padding: 8px;
}

HTML

<div id="no-width">
  <p>Pas de largeur explicite.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Largeur explicite : 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Largeur explicite: héritée avec <code>inherit</code>.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

JavaScript

function updateUsedWidth(id) {
  var div = document.getElementById(id);
  var par = document.querySelector(`#${id} .show-used-width`);
  var wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener('resize', updateAllUsedWidths);

Résultat

Spécifications

CSS Level 2 : Valeurs utilisées (en anglais)