mozilla

Revision 68784 of used value

  • Revision slug: CSS/used_value
  • Revision title: used value
  • Revision id: 68784
  • Created:
  • Creator: yonathan
  • Is current revision? No
  • Comment page created, 215 words added

Revision Content

The used value of any CSS property is the value of that property after cascading, inheritance, and layout have been calculated. All widths and heights are measured in px. Confusingly, window.getComputedStyle returns used values properties, not the official computed value.

 

<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

The used value definition was introduced in CSS 2.1 to be distinct from the computed 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, the computed values and used values are the same. These are the properties that 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

 

 

Example

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

Specification

CSS Level 2: Used Values

See also

window.getComputedStyle

Revision Source

<p>The used value of any CSS property is the value of that property after cascading, inheritance, and layout have been calculated. All widths and heights are measured in px. Confusingly, <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> returns used values properties, not the official <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>.</p>
<p>
 </p>&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
<p>The used value definition was introduced in CSS 2.1 to be distinct from the <a href="/en/CSS/computed_value" title="en/CSS/computed value">computed value</a> 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, the computed values and used values are the same. These are the properties that 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> <li>background-position</li> <li>bottom, left, right, top</li> <li>height, width</li> <li>margin-bottom, margin-left, margin-right, margin-top,</li> <li>min-height, min-width</li> <li>padding-bottom, padding-left, padding-right, padding-top</li> <li>text-indent</li>
</ul>
<p> </p>
<p> </p>
<h3>Example</h3>
<div style="border: 1px solid red">No specified width (default auto). Computed width: auto. Used width: 998px (for example).
<div style="border: 1px solid green; width: 50%">Specified width: 50%. Computed width: 50%. Used width: 447px (for example).
<div style="border: 1px solid blue; width: inherit">Specified width: inherit. Computed width: 50%. Used width: 221px (for example).</div>
</div>
</div>
<h3>Specification</h3>
<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>
<h3>See also</h3>
<p><a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></p>
Revert to this revision