指定値・計算値・使用値・実際の値
アセンブラの魔女 ⧫ CSS ⧫ 値 ⧫ 指定値・計算値・使用値・実際の値
アセンブラの魔女 ⧫ CSS ⧫ 値 ⧫ 指定値・計算値・使用値・実際の値

 ユーザー・エージェントはドキュメントを解析してドキュメントツリーを構築した後、ツリー内のすべての要素に対して属性値を割り当てます。

 最終的な属性値は次の4段階の処理を通して決定します。

STEP値説明
1指定値スタイルシート上で記述された値
2計算値継承に使用される値。相対値は絶対値に変換
3使用値包含関係を解決した値
4実際の値ローカル環境の制限に適合するように近似変換

 ユーザー・エージェントは、まず以下の優先順位で各属性に「指定された値」を割り当てます。

if ( カスケードの結果が値 )
{
	カスケードの結果を使用
}
else if (属性が継承された物であり、その要素がドキュメントツリーのルートでない場合)
{
	親要素の計算値を使用します
}
else
{
	属性の初期値を使用(*1)
}

 (*1) 属性の初期値は、それぞれの属性の定義によって示さています。

 指定値は、カスケード中に計算値に解決されます。計算値では、相対的な指定値(相対URIやemやexなどの相対単位値)は絶対的な値に変換されます。

 計算値は、出来るだけ文書をレイアウトする前に処理されますが、一部の値は文書のレイアウト時にのみ決定できます。例えば、要素の幅がその包含ブロックのあるパーセンテージに設定されている場合、その包含ブロックの幅が決定されるまで幅を決定することは出来ません。

 使用値は、計算値から残りの依存関係を絶対値に解決した結果の値です。

 使用値は原則としてレンダリングに使用可能な値ですが、ユーザー・エージェントは指定された環境でこの値を使用できない場合があります。

 例えば、ユーザ・エージェントは整数ピクセル幅を持つ境界線をレンダリングすることしかできないため、計算された幅に近似する必要があります。また、ユーザエージェントはフルカラーの代わりに黒と白の色合いを使用することがあります。

 このように、近似が適用された後の使用された値を「実際の値」と呼びます。

▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-28
authorアセンブラの魔女
headlineCSSで用いられる指定値・計算値・使用値・実際の値に関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywords指定値
keywords計算値
keywords使用値
keywords実際の値
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel