mozilla

Compare Revisions

used value

Change Revisions

Revision 68789:

Revision 68789 by teoli on

Revision 314153:

Revision 314153 by FredB on

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

Revision 68789
Revision 314153
n8      The used value of any CSS property is the final value of thn8      The used value of any CSS property is the final value of th
>at property after all calculations have been performed. Used valu>at property after all calculations have been performed. Used valu
>es can be retrieved by calling&nbsp;<a href="/en/DOM/window.getCo>es can be retrieved by calling&nbsp;<a href="/en-US/docs/DOM/wind
>mputedStyle" style="text-decoration: none; color: rgb(4, 137, 183>ow.getComputedStyle" style="text-decoration: none; color: rgb(4, 
>) !important; cursor: default;" title="en/DOM/window.getComputedS>137, 183) !important; cursor: default;" title="en/DOM/window.getC
>tyle">window.getComputedStyle</a>. Dimensions (e.g. <code>width</>omputedStyle">window.getComputedStyle</a>. Dimensions (e.g. <code
>code>, <code>line-height</code>) are all in pixels, shorthand pro>>width</code>, <code>line-height</code>) are all in pixels, short
>perties (e.g. background) are consistent with their component pro>hand properties (e.g. background) are consistent with their compo
>perties (e.g. <code>background-color</code>),&nbsp;<code>display<>nent properties (e.g. <code>background-color</code>),&nbsp;<code>
>/code> is consistent with <code>position</code> and <code>float</>display</code> is consistent with <code>position</code> and <code
>code>, and every CSS&nbsp;property has a value.>>float</code>, and every CSS&nbsp;property has a value.
n14      There are three steps to calculating any CSS property's finn14      There are three steps to calculating any CSS property's fin
>al value. First, the <a href="/en/CSS/specified_value" title="htt>al value. First, the <a href="/en-US/docs/CSS/specified_value" ti
>ps://developer.mozilla.org/en/CSS/specified_value">specified valu>tle="https://developer.mozilla.org/en/CSS/specified_value">specif
>e</a>&nbsp;is the result of cascading (choosing the most specific>ied value</a>&nbsp;is the result of cascading (choosing the most 
> stylesheet rule that changes the property), <a href="/en/CSS/inh>specific stylesheet rule that changes the property), <a href="/en
>eritance" title="en/CSS/inheritance">inheritance</a>&nbsp;(using >-US/docs/CSS/inheritance" title="en/CSS/inheritance">inheritance<
>the same computed value as a parent if the property is inheritabl>/a>&nbsp;(using the same computed value as a parent if the proper
>e), or using the default. Then, the <a href="/en/CSS/computed_val>ty is inheritable), or using the default. Then, the <a href="/en-
>ue" title="en/CSS/computed value">computed value</a>&nbsp;is calc>US/docs/CSS/computed_value" title="en/CSS/computed value">compute
>ulated according to the specification (for example, a <code>span<>d value</a>&nbsp;is calculated according to the specification (fo
>/code> with <code>position: absolute</code> will have its compute>r example, a <code>span</code> with <code>position: absolute</cod
>d&nbsp;<code>display</code> changed to <code>block</code>). Final>e> will have its computed&nbsp;<code>display</code> changed to <c
>ly, layout is calculated (dimensions that are&nbsp;<code>auto</co>ode>block</code>). Finally, layout is calculated (dimensions that
>de>&nbsp;or percentages relative to a parent are replaced with pi> are&nbsp;<code>auto</code>&nbsp;or percentages relative to a par
>xel values), and the result is the <strong>used value</strong>. T>ent are replaced with pixel values), and the result is the <stron
>hese steps are calculated internally; a script can read only the >g>used value</strong>. These steps are calculated internally; a s
>final used values with&nbsp;<a href="/en/DOM/window.getComputedSt>cript can read only the final used values with&nbsp;<a href="/en-
>yle" style="text-decoration: none; color: rgb(4, 137, 183) !impor>US/docs/DOM/window.getComputedStyle" style="text-decoration: none
>tant; cursor: default;" title="en/DOM/window.getComputedStyle">wi>; color: rgb(4, 137, 183) !important; cursor: default;" title="en
>ndow.getComputedStyle</a>.>/DOM/window.getComputedStyle">window.getComputedStyle</a>.
n32      CSS 2.0 defined only&nbsp;<a href="/en/CSS/computed_value" n32      CSS 2.0 defined only&nbsp;<a href="/en-US/docs/CSS/computed
>style="text-decoration: none; color: rgb(4, 137, 183) !important;>_value" style="text-decoration: none; color: rgb(4, 137, 183) !im
> cursor: default;" title="en/CSS/computed value">computed value</>portant; cursor: default;" title="en/CSS/computed value">computed
>a> as the last step in a property's calculation. Then, CSS 2.1 in> value</a> as the last step in a property's calculation. Then, CS
>troduced the&nbsp;distinct definition of used value&nbsp;so that >S 2.1 introduced the&nbsp;distinct definition of used value&nbsp;
>an element could explicitly inherit a width/height of a parent wh>so that an element could explicitly inherit a width/height of a p
>ose computed value&nbsp;is a percentage.&nbsp;For CSS properties >arent whose computed value&nbsp;is a percentage.&nbsp;For CSS pro
>that don't depend on layout (e.g. display, font-size, line-height>perties that don't depend on layout (e.g. display, font-size, lin
>), the computed values and used values are the same. These are th>e-height), the computed values and used values are the same. Thes
>e properties that do depend on layout so have a different compute>e are the properties that do depend on layout so have a different
>d value and used value: (taken from&nbsp;<a class="external" href> computed value and used value: (taken from&nbsp;<a class="extern
>="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w>al" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http
>3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, compu>://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specifie
>ted, and actual values</a>):>d, computed, and actual values</a>):
n61        <a href="/en/CSS_Reference" title="CSS Reference">CSS Refn61        <a href="/en-US/docs/CSS_Reference" title="CSS Reference"
>erence</a>>>CSS Reference</a>
t66        <a href="/en/DOM/window.getComputedStyle" title="en/DOM/wt66        <a href="/en-US/docs/DOM/window.getComputedStyle" title="
>indow.getComputedStyle">window.getComputedStyle</a>>en/DOM/window.getComputedStyle">window.getComputedStyle</a>

Back to History