This article needs a technical review. How you can help.
This article needs an editorial review. How you can help.
The used value of any CSS property is the final value of that property after all calculations have been performed. For some properties, 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)
and 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 (though this method may instead return computed values, depending on the property; the values it returns are generically called resolved values
).
Example
Compute and show the used width of three elements. (updates on resize)
HTML
<div id="no-width"> <p>No explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>Explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>Explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div>
CSS
#no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* Make results easier to see: */ div { border: 1px solid red; padding: 8px; }
Javascript
function updateUsedWidth(id) { var div = document.getElementById(id); var par = document.querySelector(`#${id} .show-used-width`); var wid = window.getComputedStyle(div)["width"]; par.textContent = `Used width: ${wid}.`; } function updateAllUsedWidths() { updateUsedWidth("no-width"); updateUsedWidth("width-50"); updateUsedWidth("width-inherit"); } updateAllUsedWidths(); window.addEventListener('resize', updateAllUsedWidths);
Result
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 CSS 2.1 properties that do depend on layout, so they 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
See also
- CSS Reference
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.
- window.getComputedStyle