Skip to content

CSS Value的计算过程 #6

Description

@uxsi

当User Agent解析HTML文档并构造DOM tree的同时,它必须为DOM tree上的每个元素的每个样式属性赋值。当然,不同类型的Media(屏幕、纸张、盲人设备等)会有不同的结果。

要得到属性的最终值必须经过四个阶段的计算:the "specified value"、the "computed value"、the "used value",还有最后的"actual value"。

一、specified value

User Agent首先必须根据以下原则为属性赋上specified value:

  1. 如果层叠所有的样式表后得到一个明确的值,那就直接应用它;
  2. 否则,如果该属性是可继承的,并且该元素不是根元素,就使用该元素父辈计算后的值;
  3. 否则就使用该属性的默认值。

二、computed value

在层叠过程中,specified value会转换成computed value,例如:URI和“em”、“ex”等相对的值会被转为绝对的值,此转换过程不需要UA对文档进行渲染。就算该属性没有被应用,computed value也会存在。

三、used value

但是事实上,有一些值必须是在文档其它值被确定时才能决定的,例如,某个元素的width值设定为百分比,这时候该值就依赖于父辈元素的containing block。used value是在computed value的基础上消除所有依赖后计算出来的绝对值。

四、actual value

理论上,used value就是用来呈现文档的值,但是UA在一些特定的情况下可能不会应用该值。例如UA只能为边框赋上整数值,因此不得不对used value取近似值,或者可能被强制使用黑白的色调而不是全彩色。所以actual value才是最后用来呈现的值。

附上一些相关链接

W3C CSS2: Specified, computed, and actual values

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions