使用値
使用値 (used value) は CSS プロパティにおいて、計算値で行われたすべての計算が実行された後の値です。
ユーザーエージェントが計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ (width
や line-height
など) の使用値はピクセル数です。一括指定プロパティ (background
など) の使用値は、各成分 (background-color
や background-size
など) のプロパティに、 position
や float
が加味されたものと一致します。
メモ:
DOM の getComputedStyle()
API が返すのは解決値であり、これはプロパティによって計算値または使用値のどちらかになります。
例
この例は、3 つの要素の width
の使用値を計算および表示します (大きさを変更すると更新されます)。
HTML
<div id="no-width">
<p>明示的な幅の指定なし</p>
<p class="show-used-width">..</p>
<div id="width-50">
<p>明示的な幅: 50%</p>
<p class="show-used-width">..</p>
<div id="width-inherit">
<p>明示的な幅: inherit</p>
<p class="show-used-width">..</p>
</div>
</div>
</div>
CSS
#no-width {
width: auto;
}
#width-50 {
width: 50%;
}
#width-inherit {
width: inherit;
}
/* 結果を見やすくする */
div {
border: 1px solid red;
padding: 8px;
}
JavaScript
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);
結果
計算値との違い
CSS 2.0 では、プロパティの計算の最後のステップとして計算値のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (display
, font-size
, line-height
など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 (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 |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # used-value |