mozilla

Compare Revisions

used value

Change Revisions

Revision 68786:

Revision 68786 by yonathan on

Revision 68787:

Revision 68787 by yonathan on

Title:
used value
used value
Slug:
CSS/used_value
CSS/used_value
Content:

Revision 68786
Revision 68787
n8      The used value of any CSS property is the value of that pron8      The used value of any CSS property is the final value of th
>perty after cascading, inheritance, and layout have been calculat>at property after all calculations have been performed. Used valu
>ed. All widths and heights are measured in px. Confusingly, the p>es can be retrieved by calling&nbsp;<a href="/en/DOM/window.getCo
>roperties of&nbsp;<a href="/en/DOM/window.getComputedStyle" style>mputedStyle" style="text-decoration: none; color: rgb(4, 137, 183
>="text-decoration: none; color: rgb(4, 137, 183) !important; curs>) !important; cursor: default;" title="en/DOM/window.getComputedS
>or: default;" title="en/DOM/window.getComputedStyle">window.getCo>tyle">window.getComputedStyle</a>. Dimensions (e.g. <code>width</
>mputedStyle</a>&nbsp;are used values, not <a href="/en/CSS/comput>code>, <code>line-height</code>) are all in pixels, shorthand pro
>ed_value" style="text-decoration: none; color: rgb(4, 137, 183) !>perties (e.g. background) are consistent with their component pro
>important; cursor: default;" title="en/CSS/computed value">comput>perties (e.g. <code>background-color</code>),&nbsp;<code>display<
>ed values</a>.>/code> is consistent with <code>position</code> and <code>float</
 >code>, and every CSS&nbsp;property has a value.
9    </p>
10    <h3>
11      Details
12    </h3>
13    <p>
14      There are three steps to calculating any CSS property's fin
 >al value. First, the <a href="/en/CSS/specified_value" title="htt
 >ps://developer.mozilla.org/en/CSS/specified_value">specified valu
 >e</a>&nbsp;is the result of cascading (choosing the most specific
 > stylesheet rule that changes the property), <a href="/en/CSS/inh
 >eritance" title="en/CSS/inheritance">inheritance</a>&nbsp;(using 
 >the same computed value as a parent if the property is inheritabl
 >e), or using the default. Then, the <a href="/en/CSS/computed_val
 >ue" title="en/CSS/computed value">computed value</a>&nbsp;is calc
 >ulated according to the specification (for example, a <code>span<
 >/code> with <code>position: absolute</code> will have its compute
 >d&nbsp;<code>display</code> changed to <code>block</code>). Final
 >ly, layout is calculated (dimensions that are&nbsp;<code>auto</co
 >de>&nbsp;or percentages relative to a parent are replaced with pi
 >xel values), and the result is the <strong>used value</strong>. T
 >hese steps are calculated internally; a script can read only the 
 >final used values with&nbsp;<a href="/en/DOM/window.getComputedSt
 >yle" style="text-decoration: none; color: rgb(4, 137, 183) !impor
 >tant; cursor: default;" title="en/DOM/window.getComputedStyle">wi
 >ndow.getComputedStyle</a>.
n11      The used value definition was introduced in CSS 2.1 to be dn17      &nbsp;
>istinct from the <a href="/en/CSS/computed_value" title="en/CSS/c 
>omputed value">computed value</a>&nbsp;so that an element could e 
>xplicitly inherit a width/height of a parent whose computed value 
>&nbsp;is a percentage.&nbsp;For CSS properties that don't depend  
>on layout, the computed values and used values are the same. Thes 
>e are the properties that have a different computed value and use 
>d value: (taken from <a class=" external" href="http://www.w3.org 
>/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/chang 
>es.html#q36">CSS 2.1 Changes: Specified, computed, and actual val 
>ues</a>): 
12    </p>18    </p>&lt;meta http-equiv="content-type" content="text/html; ch
 >arset=utf-8"/&gt;
13    <ul>
14      <li>background-position
15      </li>
16      <li>bottom, left, right, top
17      </li>
18      <li>height, width
19      </li>
20      <li>margin-bottom, margin-left, margin-right, margin-top,
21      </li>
22      <li>min-height, min-width
23      </li>
24      <li>padding-bottom, padding-left, padding-right, padding-to
>p 
25      </li>
26      <li>text-indent
27      </li>
28    </ul>
n33      No specified width (default auto). Computed width: auto. Usn23      No explicit width. Specified width: auto (default). Compute
>ed width: 998px (for example).>d width: auto. Used width: 998px (for example).
n35        Specified width: 50%. Computed width: 50%. Used width: 44n25        Explicit width: 50%.&nbsp;Specified width: 50%. Computed 
>7px (for example).>width: 50%. Used width: 447px (for example).
n37          Specified width: inherit. Computed width: 50%. Used widn27          Explicit width: inherit.&nbsp;Specified width: 50%. Com
>th: 221px (for example).>puted width: 50%. Used width: 221px (for example).
tt31    <h3>
32      Difference from computed values
33    </h3>
34    <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 
 >1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; pa
 >dding-bottom: 0px; padding-left: 0px;">
35      CSS 2.0 defined only&nbsp;<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 in
 >troduced the&nbsp;distinct definition of used value&nbsp;so that 
 >an element could explicitly inherit a width/height of a parent wh
 >ose computed value&nbsp;is a percentage.&nbsp;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 th
 >e properties that do depend on layout so have a different compute
 >d value and used value: (taken from&nbsp;<a class=" external" hre
 >f="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.
 >w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, comp
 >uted, and actual values</a>):
36    </p>
37    <p>
38      &nbsp;
39    </p>&lt;meta http-equiv="content-type" content="text/html; ch
 >arset=utf-8"/&gt;
40    <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;">
41      <li style="margin-bottom: 0.25em;">background-position
42      </li>
43      <li style="margin-bottom: 0.25em;">bottom, left, right, top
44      </li>
45      <li style="margin-bottom: 0.25em;">height, width
46      </li>
47      <li style="margin-bottom: 0.25em;">margin-bottom, margin-le
 >ft, margin-right, margin-top,
48      </li>
49      <li style="margin-bottom: 0.25em;">min-height, min-width
50      </li>
51      <li style="margin-bottom: 0.25em;">padding-bottom, padding-
 >left, padding-right, padding-top
52      </li>
53      <li style="margin-bottom: 0.25em;">text-indent
54      </li>
55    </ul>
56    <p>
57      &nbsp;
58    </p>

Back to History