used value

  • Revision slug: CSS/used_value
  • Revision title: used value
  • Revision id: 68789
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 6 words added

Revision Content

The used value of any CSS property is the final value of that property after all calculations have been performed. Used values can be retrieved by calling window.getComputedStyle. Dimensions (e.g. width, line-height) are all in pixels, shorthand properties (e.g. background) are consistent with their component properties (e.g. background-color), display is consistent with position and float, and every CSS property has a value.

Details

There are three steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Finally, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value. These steps are calculated internally; a script can read only the final used values with window.getComputedStyle.

Example

No explicit width. Specified width: auto (default). Computed width: auto. Used width: 998px (for example).
Explicit width: 50%. Specified width: 50%. Computed width: 50%. Used width: 447px (for example).
Explicit width: inherit. Specified width: 50%. Computed width: 50%. Used width: 221px (for example).

Difference from computed values

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value so that an element could explicitly inherit a width/height of a parent whose computed value is a percentage. For CSS properties that don't depend on layout (e.g. display, font-size, line-height), the computed values and used values are the same. These are the properties that do depend on layout so have a different computed value and used value: (taken from 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

Specification

CSS Level 2: Used Values

See also

Revision Source

<p>The used value of any CSS property is the final value of that property after all calculations have been performed. Used values can be retrieved by calling <a href="/en/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>. Dimensions (e.g. <code>width</code>, <code>line-height</code>) are all in pixels, shorthand properties (e.g. background) are consistent with their component properties (e.g. <code>background-color</code>), <code>display</code> is consistent with <code>position</code> and <code>float</code>, and every CSS property has a value.</p>
<h2 id="Details">Details</h2>
<p>There are three steps to calculating any CSS property's final value. First, the <a href="/en/CSS/specified_value" title="https://developer.mozilla.org/en/CSS/specified_value">specified value</a> is the result of cascading (choosing the most specific stylesheet rule that changes the property), <a href="/en/CSS/inheritance" title="en/CSS/inheritance">inheritance</a> (using the same computed value as a parent if the property is inheritable), or using the default. Then, the <a href="/en/CSS/computed_value" title="en/CSS/computed value">computed value</a> is calculated according to the specification (for example, a <code>span</code> with <code>position: absolute</code> will have its computed <code>display</code> changed to <code>block</code>). Finally, layout is calculated (dimensions that are <code>auto</code> or percentages relative to a parent are replaced with pixel values), and the result is the <strong>used value</strong>. These steps are calculated internally; a script can read only the final used values with <a href="/en/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">Example</h2>
<div style="border: 1px solid red">No explicit width. Specified width: auto (default). Computed width: auto. Used width: 998px (for example). <div style="border: 1px solid green; width: 50%">Explicit width: 50%. Specified width: 50%. Computed width: 50%. Used width: 447px (for example). <div style="border: 1px solid blue; width: inherit">Explicit width: inherit. Specified width: 50%. Computed width: 50%. Used width: 221px (for example).</div> </div>
</div>
<h2 id="Difference_from_computed_values">Difference from computed values</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 defined only <a href="/en/CSS/computed_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/CSS/computed value">computed value</a> as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value so that an element could explicitly inherit a width/height of a parent whose computed value is a percentage. For CSS properties that don't depend on layout (e.g. display, font-size, line-height), the computed values and used values are the same. These are the properties that do depend on layout so have a different computed value and used value: (taken from <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">Specification</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">See also</h2>
<ul> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li>{{ CSS_key_concepts() }}</li> <li><a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></li>
</ul>
Revert to this revision