CSS: Concept: Specified, Computed, Used, and Actual Values

20th August 2020 at 2:19pm

这一块的概念,CSS 规范 有简明扼要的描述。

简单地说,user agent 从确定某个属性应该用什么值,到最终渲染出来是怎么样,会依次有这些步骤:

  1. 确定属性的 specified value 是什么
    1. 如果 cascade 规则下属性有值,使用它
    2. 否则,如果有继承到父结点及祖先结点的值,则用它的 computed value
    3. 否则就用该属性的初始值
  2. 有了 specified value 后,有些情况下还要将值变成 computed value,比如将超链接从相对路径转为绝对路径,将 em 等相对单位转为绝对单位。注意这个过程似乎不会转换 unitless value,至少于 line-height 不会做转换
  3. 再然后,有些属性的值必须在文档被渲染出来时才能知道。比如将一个容器宽度设为百分比,那么需要文档在渲染时才能知道具体的值。这个具体的值被称为 used value
  4. 有了 used value 后,有时候这个值并不一定能被相应的设备渲染出来,比如在一个黑白的屏幕上使用了彩色,或者在一个仅支持整数宽度的 user agent 上渲染小数宽度。此时 user agent 实际做渲染用的值,被称为 actual value