mozilla

Compare Revisions

used value

Change Revisions

Revision 495115:

Revision 495115 by kscarfone on

Revision 584757:

Revision 584757 by Dholbert on

Title:
used value
used value
Slug:
Web/CSS/used_value
Web/CSS/used_value
Tags:
"CSS", "NeedsLiveSample", "Web", "Guide"
"CSS", "NeedsLiveSample", "Web", "Guide"
Content:

Revision 495115
Revision 584757
n11      The used value of any CSS property is the final value of thn11      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. For some 
>es can be retrieved by calling&nbsp;<a href="/en-US/docs/DOM/wind>properties, used values can be retrieved by calling&nbsp;<a href=
>ow.getComputedStyle" style="text-decoration: none; color: rgb(4, >"/en-US/docs/DOM/window.getComputedStyle" style="text-decoration:
>137, 183) !important; cursor: default;" title="en/DOM/window.getC> none; color: rgb(4, 137, 183) !important; cursor: default;" titl
>omputedStyle">window.getComputedStyle</a>. Dimensions (e.g. <code>e="en/DOM/window.getComputedStyle">window.getComputedStyle</a>. D
>>width</code>, <code>line-height</code>) are all in pixels, short>imensions (e.g. <code>width</code>, <code>line-height</code>) are
>hand properties (e.g. background) are consistent with their compo> all in pixels, shorthand properties (e.g. background) are consis
>nent properties (e.g. <code>background-color</code>),&nbsp;<code>>tent with their component properties (e.g. <code>background-color
>display</code> is consistent with <code>position</code> and <code></code>),&nbsp;<code>display</code> is consistent with <code>posi
>>float</code>, and every CSS&nbsp;property has a value.>tion</code> and <code>float</code>, and every CSS&nbsp;property h
 >as a value.
n17      There are three steps to calculating any CSS property's finn17      There are three steps to calculating any CSS property's fin
>al value. First, the <a href="/en-US/docs/CSS/specified_value" ti>al value. First, the <a href="/en-US/docs/CSS/specified_value" ti
>tle="https://developer.mozilla.org/en/CSS/specified_value">specif>tle="https://developer.mozilla.org/en/CSS/specified_value">specif
>ied value</a>&nbsp;is the result of cascading (choosing the most >ied value</a>&nbsp;is the result of cascading (choosing the most 
>specific stylesheet rule that changes the property), <a href="/en>specific stylesheet rule that changes the property), <a href="/en
>-US/docs/CSS/inheritance" title="en/CSS/inheritance">inheritance<>-US/docs/CSS/inheritance" title="en/CSS/inheritance">inheritance<
>/a>&nbsp;(using the same computed value as a parent if the proper>/a>&nbsp;(using the same computed value as a parent if the proper
>ty is inheritable), or using the default. Then, the <a href="/en->ty is inheritable), or using the default. Then, the <a href="/en-
>US/docs/CSS/computed_value" title="en/CSS/computed value">compute>US/docs/CSS/computed_value" title="en/CSS/computed value">compute
>d value</a>&nbsp;is calculated according to the specification (fo>d value</a>&nbsp;is calculated according to the specification (fo
>r example, a <code>span</code> with <code>position: absolute</cod>r example, a <code>span</code> with <code>position: absolute</cod
>e> will have its computed&nbsp;<code>display</code> changed to <c>e> will have its computed&nbsp;<code>display</code> changed to <c
>ode>block</code>). Finally, layout is calculated (dimensions that>ode>block</code>). Finally, layout is calculated (dimensions that
> are&nbsp;<code>auto</code>&nbsp;or percentages relative to a par> are&nbsp;<code>auto</code>&nbsp;or percentages relative to a par
>ent are replaced with pixel values), and the result is the <stron>ent are replaced with pixel values), and the result is the <stron
>g>used value</strong>. These steps are calculated internally; a s>g>used value</strong>. These steps are calculated internally; a s
>cript can read only the final used values with&nbsp;<a href="/en->cript can read only the final used values with&nbsp;<a href="/en-
>US/docs/DOM/window.getComputedStyle" style="text-decoration: none>US/docs/DOM/window.getComputedStyle" style="text-decoration: none
>; color: rgb(4, 137, 183) !important; cursor: default;" title="en>; color: rgb(4, 137, 183) !important; cursor: default;" title="en
>/DOM/window.getComputedStyle">window.getComputedStyle</a>.>/DOM/window.getComputedStyle">window.getComputedStyle</a> (though
 > this method may instead return computed values, depending on the
 > property; the values it returns are generically called {{cssxref
 >("resolved_value", "resolved values")}}).
t35      CSS 2.0 defined only&nbsp;<a href="/en-US/docs/CSS/computedt35      CSS 2.0 defined only&nbsp;<a href="/en-US/docs/CSS/computed
>_value" style="text-decoration: none; color: rgb(4, 137, 183) !im>_value" style="text-decoration: none; color: rgb(4, 137, 183) !im
>portant; cursor: default;" title="en/CSS/computed value">computed>portant; cursor: default;" title="en/CSS/computed value">computed
> value</a> as the last step in a property's calculation. Then, CS> value</a> as the last step in a property's calculation. Then, CS
>S 2.1 introduced the&nbsp;distinct definition of used value&nbsp;>S 2.1 introduced the&nbsp;distinct definition of used value&nbsp;
>so that an element could explicitly inherit a width/height of a p>so that an element could explicitly inherit a width/height of a p
>arent whose computed value&nbsp;is a percentage.&nbsp;For CSS pro>arent whose computed value&nbsp;is a percentage.&nbsp;For CSS pro
>perties that don't depend on layout (e.g. display, font-size, lin>perties that don't depend on layout (e.g. display, font-size, lin
>e-height), the computed values and used values are the same. Thes>e-height), the computed values and used values are the same. Thes
>e are the properties that do depend on layout so have a different>e are the CSS 2.1 properties that do depend on layout so have a d
> computed value and used value: (taken from&nbsp;<a class="extern>ifferent computed value and used value: (taken from&nbsp;<a class
>al" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http>="external" href="http://www.w3.org/TR/CSS2/changes.html#q36" tit
>://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specifie>le="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: 
>d, computed, and actual values</a>):>Specified, computed, and actual values</a>):

Back to History