1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: Valor usado
slug: Web/CSS/used_value
translation_of: Web/CSS/used_value
original_slug: Web/CSS/Valor_usado
---
<div>{{cssref}}</div>
<p>O <strong>valor usado</strong> de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.</p>
<p>After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., <code>width</code>, <code>line-height</code>) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., <code>background-color</code>, <code>display)</code> and with <code>position</code> and <code>float</code>.</p>
<p>For some properties, JavaScript can retrieve the used value through the <a href="/en-US/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> method.</p>
<h2 id="Detalhes">Detalhes</h2>
<p>There are four steps to calculating any CSS property's final value. First, the <a href="/en-US/docs/CSS/specified_value" title="https://developer.mozilla.org/en/CSS/specified_value">specified value</a> is the result of cascading (choosing the most specific stylesheet rule that changes the property), <a href="/en-US/docs/CSS/inheritance" title="en/CSS/inheritance">inheritance</a> (using the same computed value as a parent if the property is inheritable), or using the default. Then, the <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed value">computed value</a> is calculated according to the specification (for example, a <code>span</code> with <code>position: absolute</code> will have its computed <code>display</code> changed to <code>block</code>). Then, layout is calculated (dimensions that are <code>auto</code> or percentages relative to a parent are replaced with pixel values), and the result is the <strong>used value</strong>.</p>
<p>Finally, transformed according to the limitations of the local environment, the result is <a href="/en-US/docs/Web/CSS/actual_value">actual value</a>. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.</p>
<p>JavaScript can read only the final used values with <a href="/en-US/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).</p>
<h2 id="Exemplo">Exemplo</h2>
<p>Compute and show the used width of three elements (updates on resize):</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">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);
</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{ EmbedLiveSample('Example', '80%', '372px') }}</p>
<p> </p>
<h2 id="Diferentes_valores_computados">Diferentes valores computados</h2>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">CSS 2.0 defined only <a href="/en-US/docs/CSS/computed_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/CSS/computed value">computed value</a> 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, 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 <a class="external" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p>
<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
<li style="margin-bottom: 0.25em;">background-position</li>
<li style="margin-bottom: 0.25em;">bottom, left, right, top</li>
<li style="margin-bottom: 0.25em;">height, width</li>
<li style="margin-bottom: 0.25em;">margin-bottom, margin-left, margin-right, margin-top,</li>
<li style="margin-bottom: 0.25em;">min-height, min-width</li>
<li style="margin-bottom: 0.25em;">padding-bottom, padding-left, padding-right, padding-top</li>
<li style="margin-bottom: 0.25em;">text-indent</li>
</ul>
<h2 id="Especificações">Especificações</h2>
<p><a class="external" href="http://www.w3.org/TR/CSS2/cascade.html#used-value" title="http://www.w3.org/TR/CSS2/cascade.html#used-value">CSS Level 2: Used Values</a></p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
<li>{{ CSS_key_concepts() }}</li>
<li><a href="/en-US/docs/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></li>
</ul>
|
