css 元素 property value计算过程的学习笔记
css 元素 property value计算过程的学习笔记
The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).
步骤1：确认specified value
- If the cascade results in a value, use it. 如果cascade导致值，则使用cascade过后的值。具体逻辑后面会介绍。
- 如果元素的property继承自parent，则使用parent元素的computed值。
- 使用property的初始值，该初始值定义在property definition里。
步骤2：确认computed value
在cascade过程中，specified value被解析成computed value.
Specified values are resolved to computed values during the cascade; for example URIs are made absolute and ‘em’ and ‘ex’ units are computed to pixel or absolute lengths.
比如em和ex单位被计算成pixel或者绝对长度。
Computing a value never requires the user agent to render the document.
计算value绝不需要user agent去执行渲染document的动作。
The computed value of URIs that the UA cannot resolve to absolute URIs is the specified value.
The computed value of a property is determined as specified by the Computed Value line in the definition of the property. See the section on inheritance for the definition of computed values when the specified value is ‘inherit’.
The computed value exists even when the property does not apply, as defined by the ‘Applies To’ line. However, some properties may define the computed value of a property for an element to depend on whether the property applies to that element.
步骤3：确认used value
Computed values are processed as far as possible without formatting the document.
computed value的处理尽可能地不去触发文档格式化的动作。
Some values, however, can only be determined when the document is being laid out.
然而对有些property的值来说，如果文档布局尚未完成，则无法决定出来。
For example, if the width of an element is set to be a certain percentage of its containing block, the width cannot be determined until the width of the containing block has been determined.
比如一个element的宽度被设置成其所在容器(containing block)宽度的百分比，则该element width属性，直到其containing block的width被决定出来之后，才能被计算出来。
used value
The used value is the result of taking the computed value and resolving any remaining dependencies into an absolute value.
computed value作为输入，再加上其他剩余的依赖因素一齐考虑，计算出的结果为used value.
actual value
A used value is in principle the value used for rendering, but a user agent may not be able to make use of the value in a given environment.
原则上来说，used value被用来渲染，但是在某些环境下，user agent可能无法直接使用该used value来进行渲染。
For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the computed width;
比如某种user agent只能根据整型的pixel宽度来渲染border，而computed width带有小数，此时只能将其做近似处理。
or the user agent may be forced to use only black and white shades instead of full color.
或者某种user agent只能渲染黑或者白，而color property计算出来是彩色的。
The actual value is the used value after any approximations have been applied.
因此，actual value是used value施加了approximation之后的结果值。
属性值的继承
<H1>The headline <EM>is</EM> important!</H1>em节点内的值继承自其父节点h1：
当继承发生时，元素从其父元素继承computed value, 将computed value作为其specified value和computed value.
When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child.
例子：
<html>
<style>
body { font-size: 10pt }
h1 { font-size: 130% }
div { font-size: 13pt }
</style>
<BODY>
<H1>A <EM>large</EM> heading</H1>
<div>large</div>
</BODY>
</html>最终，em元素继承了h1的计算后的font-size：13pt，而不是user agent自带的 2em：
如果手动启用user agent的font-size: 2em, 效果如下：
css cascade 过程
- Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
- User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
- User agent: Conforming user agents must apply a default style sheet (or behave as if they did).
A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language.
User Agent默认的style sheet应当为特定document language而设计的元素，进行满足通常需求的呈现。
比如在浏览器的user agent里, HTML里的EM元素应该使用italic 字体呈现。
Note that the user may modify system settings (e.g., system colors) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet.
用户也可能会通过修改系统设置的方式，去影响默认的style sheet.
权重问题 - weight
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for “!important” rules. All user and author rules have more weight than rules in the UA’s default style sheet.
selector的优先级
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
selector的优先级按照specificity从高到低排序。
if two declarations have the same weight, origin and specificity, the latter specified wins.
同样优先级的selector，后定义的会覆盖先定义的。
selector specificity计算
使用公式：
A selector’s specificity is calculated as follows:
- count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.
虽然[id=p33], 从语义上说是id selector，但形式上仍然是attribute selector.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
将abcd连接起来，就形成了最后的specifity数字。
一些例子：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */在下面这个例子里：
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>运行时p为绿色，因为inline style attribute优先级比style node里定义的red color高。