Used value

Der used value einer CSS Eigenschaft ist ihr Wert, nachdem alle Berechnungen auf den computed value durchgeführt wurden.

Nachdem der user agent seine Berechnungen abgeschlossen hat, hat jede CSS-Eigenschaft einen verwendeten Wert (used value). Die verwendeten Werte von Dimensionen (z. B. width, line-height) werden in Pixeln angegeben. Die verwendeten Werte von Kurzformeigenschaften (z. B. background) sind konsistent mit denen ihrer Komponenteneigenschaften (z. B. background-color oder background-size) sowie mit position und float.

Hinweis: Die getComputedStyle() DOM-API gibt den resolved value zurück, der je nach Eigenschaft entweder der computed value oder der verwendete Wert sein kann.

Beispiel

Dieses Beispiel berechnet und zeigt den verwendeten width-Wert von drei Elementen (Updates bei Größenänderung):

HTML

html
<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

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

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

CSS

css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Make results easier to see */
div {
  border: 1px solid red;
  padding: 8px;
}

JavaScript

js
function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const 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);

Ergebnis

Unterschied zum computed value

CSS 2.0 definierte nur computed value als den letzten Schritt in der Berechnung einer Eigenschaft. Dann führte CSS 2.1 die explizite Definition des verwendeten Wertes ein. Ein Element konnte dann explizit eine Breite/Höhe eines Elternteils erben, dessen berechneter Wert ein Prozentsatz ist. Für CSS-Eigenschaften, die nicht vom Layout abhängen (z. B. display, font-size oder line-height), sind die berechneten Werte und verwendeten Werte identisch. Folgende CSS 2.1 Eigenschaften hängen vom Layout ab und haben daher einen unterschiedlichen computed value und verwendeten Wert: (aus 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

Spezifikationen

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# used-value

Siehe auch