Used value
The used value of a CSS property is its value after all calculations have been performed on the computed value.
After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width
, line-height
) are in pixels. The used values of shorthand properties (e.g., background
) are consistent with those of their component properties (e.g., background-color
or background-size
) and with position
and float
.
Note: The getComputedStyle()
DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.
Example
This example computes and displays the used width
value 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.querySelector(`#${id}`);
var par = div.querySelector('.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 value
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. An element could then 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
, or line-height
), the computed values and used values are the same. The following 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
Specifications
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # used-value |
See also
window.getComputedStyle
- 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.