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
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
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
js
function updateUsedWidth(id) {
const div = document.getElementById(id);
const par = div.querySelector(".show-used-width");
const 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 |