CSS3 取值與單位模組

时间取值被表示为<code><time></code>。其不同的单位标识符如下：

s

秒。

ms

毫秒。1000毫秒为1秒。

不同的属性可以在一定范围内限制时间取值。如果取值超出了被允许的范围，则声明无效且被忽略。

频率：‘<code><frequency></code>’类型和‘Hz’、‘kHz’单位

频率取值被表示为<code><frequency></code>。其不同的单位标识符如下：

Hz

赫兹，它代表了每秒触发的次数

kHz

千赫，它代表了1000赫兹。

比如，当表示音准的时候，200Hz(或200hz)是低音，而6kHz(或6khz)是高音。

分辨率：‘<code><resolution></code>’类型和‘dpi’、‘dpcm’、‘dppx’单位

分辨率取值被表示为<code><resolution></code>。其不同的单位标识符如下：

dpi

每英寸的点数。

dpcm

每厘米的点数。

dppx

每像素的点数。

<code><resolution></code>单位通过定义每个CSS的‘in’、‘cm’或‘px’中包含的点数(dot)，标识单个点在图形显示时的尺寸。具体用法可参考媒体查询[MEDIAQ]规范中的‘resolution’章节或[CSS3-IMAGES]规范中定义的‘image-resolution’属性。

@media (min-resolution: 2dppx) { ... }

其他地方定義的資料型態

有些資料型態的定義在資料型態自己的模組裡，其中兩個常用的是 <color> 與 <image>。

顏色 ― ‘<color>’ 型態

資料型態 <color> 在 [CSS21] 定義並由 [CSS3COLOR] 擴展。支援《CSS3 顏色模組》以上的 UA 必須以該模組定義的方法解讀 <color>。

圖像 ― ‘<image>’ 型態

這裡定義資料型態 <image> 為與 <url> 等同的資料型態，並由[CSS3IMAGES] 擴展 ― 支援《CSS3 圖像取值與取代元素模組》以上的 UA 必須以該模組定義的方法解讀 <image>。

2D 定位 ― ‘<position>’ 型態

這裡定義資料型態 <position> 為 [CSS21] 定義的 <'background-position'> 的等同語法，表示物件區域（例：背景圖片）在定位區域（例：背景定位區域）的位置。[CSS3BG] 擴展了 <position> ― 支援《CSS3 背景與邊框模組》以上的 UA 必須以該模組定義的方法解讀 <position>。

函數記號

有些取值使用函數記號來進行型態轉換或是將取值綁在一起。函數記號的語法是函數的名稱，馬上緊接著左誇號，接著可選的空白，接著記號的參數，接著可選的空白，接著右誇號。若函數接受一個列的參數，則參數以逗號（‘<code>,</code>’ ）分隔，逗號的前、後面可以有空白。

background: url(http://www.example.org/image);
color: rgb(100, 200, 50 );
content: counter(list-item) ". ";
width: calc(50% - 2em);

數學表達式 ― ‘<code>calc()</code>’ 型態

calc() 函數可以用來將有加法（‘<code>+</code>’）、減法（‘<code>-</code>’）、乘法（‘<code>*</code>’）與除法（‘<code>/</code>’）的數學表達式作為取值部件使用。‘<code>calc()</code>’表达式代表了通过标准的优先级规则进行运算的结果。该表达式可以用在任何<code><length></code>, <code><frequency></code>, <code><angle></code>, <code><time></code>, <code><number></code>, or <code><integer></code>的值中。‘<code>calc()</code>’表达式可以是字面量值、‘<code>attr()</code>’或‘<code>calc()</code>’表达式，或之前各种类型的<code><precentage></code>的值。

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}

:root {
    font-size: calc(100vw / 40);
}

.foo {
    background: url(top.png), url(bottom.png);
    background-repeat: no-repeat;
    background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
}

.foo {
    background-image: linear-gradient(to right, silver, 
                                                white 50px, 
                                               white calc(100% - 50px), 
                                               silver);
}

语法

下面的文法與規範內容描述了這些函數的表達語言。

另外，下面重定义了CSS2.1附录G中的非正式语法：

term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function

用户代理必须支持‘<code>calc()</code>’的表达式至少20“条”，每一条是一个数字、度量或百分数。如果一个‘<code>calc()</code>’表达式包含的条数比支持的条数更多，则必须以无效对待。

类型检测

每个数学表达式都有一个解析类型，范围是<code><length></code>, <code><frequency></code>, <code><angle></code>, <code><time></code>, <code><number></code>, 或<code><integer></code>。解析类型必须是表达式的有效值；否则，表达式为无效。表达式的解析类型取决于其包含的取值类型。NUMBER token是<code><number></code>或<code><integer></code>类型的。DIMENSION token的配型是根据其单位的(‘cm’是<code><length></code>的，‘deg’是<code><angle></code>的，等等)。一个‘<code>attr()</code>’表达式的类型是取决于其<code><type-or-unit></code>参数的。如果表达式语境中运行百分比，则PERCENTAGE token具有其百分比相对的值的类型；否则一个包含百分比的数学表达式是无效的。

子表达式中的运算符，会基于其参数获得类型。为了让表达式更简单，运算符对可以接受的类型有严格的限制。每个运算符的左右参数类型都会根据不同的限制进行检测。如果兼容的话，类型会根据下面的描述进行解析(为了简化描述，这里忽略了运算符的优先级规则)：

• 对于‘,’, ‘+’, 或 ‘-’运算符，检测两侧类型是否相同，或一侧是<code><number></code>另一侧是<code><integer></code>。如果两侧类型相同，则按该类型解析。如果一侧是<code><number></code>另一侧是<code><integer></code>，则按<code><number></code>类型进行解析。
• 对于‘*’运算符，检测是否至少一侧的参数是<code><number></code>。如果两侧都是<code><integer></code>，则解析为<code><integer></code>。否则解析为另一侧的类型。
• 对于‘/’运算符，检测右侧是否是<code><number></code>。如果左侧是<code><integer></code>，则解析为<code><number></code>类型。否则，解析为左侧的类型。

如果一个运算符没有通过上述检测，则该表达式为无效。同时，0作除数也是无效的。这同时包含了用字面量0或计算结果为0的情况(以为纯数字表达式在解析时不能排除任何额外的信息进行评估)。

计算值

‘<code>calc()</code>’表达式的计算值是在运算符两边类型相同的情况下，根据其所有组件、先解析所有的乘除的子表达式、再解析所有的加减子表达式的结果。

百分比并不解析为计算值，他们并不在‘<code>calc()</code>’表达式中被解析。比如‘<code>calc(100% - 100% + 1em)</code>’解析为‘<code>calc(0% + 1em)</code>’，而不是‘<code>calc(1em)</code>’。如果有一些计算百分比的特殊规则(比如‘<code>height</code>’属性)，他们会提供一个包含百分比的‘<code>calc()</code>’表达式。

对于给定的表格和表格单元格的宽高计算的复杂度来说，数学表达式会针对表格列、表格列组、表格行、表格行组、表格单元格，在自动布局表格和固定布局表格中的‘auto’值处理宽和高中的百分数。

范围检测

表达式的值的结果必须在目标语境被允许的范围内。

width: calc(5px - 10px);
width: 0px;

开关值 ― ‘<code>toggle()</code>’

toggle() 表達式允許子嗣元素循環使用一個列裡的值，而不是繼承相同的值。

‘<code>toggle()</code>’ 表達式的語法為：

toggle( <value># )

其中 <value> 是一個在表達式所處位置合法的 CSS 值。若任何一個裡面的值不合法，則整個 ‘<code>toggle()</code>’ 表達式不合法。

本規範不允許巢狀 ‘<code>toggle()</code>’ 記號，且 ‘<code>toggle()</code>’ 不能包含 ‘<code>attr()</code>’ 或 ‘<code>calc()</code>’ 記號。包含這些構造的宣告不合法。

‘<code>toggle()</code>’ 回傳的值必須透過比較繼承值 I（一般是父元素的計算值，若對象是根元素的時候，使用屬性的初始值）與 ‘<code>toggle()</code>’ 的第 n 個參數的計算值 C_n 來決定。若 C_n 是滿足 C_n = I 的最前面的值，則 ‘<code>toggle()</code>’ 回傳 C_n+1。不然，若 C_n 是最後的值，又或沒有等於 I 的 C_n，則回傳第一個值的計算值。

ul { list-style-type: disk; }
ul ul { list-style-type: toggle(disk, circle, square, box); }

屬性參引 ― ‘<code>attr()</code>’

attr()函数应用在元素或伪元素的属性中的组件值，并返回其元素的特性值。如果是用在伪元素上的，则取该伪元素源元素的特性值。

‘<code>attr()</code>’表达式的计算值是其元素遵照下面的规定指定的特性的值。

新的‘<code>attr()</code>’表达是语法是：

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

这里的<code><attr-name></code>是一个CSS限定的([CSS3NAMESPACE]中的wqname)代表一个特性名的名称(如果没有命名空间，则它是一个CSS标识符)。

可选的<code><type-or-unit></code>参数是一个用来告诉用户代理如何解释其特性值的关键字，它定义了attr()表达式的类型。关键字取自下面的列表。如果被忽略，则被视为‘<code>string</code>’。

可选的<code><fallback></code>参数代表了一个备选值。如果指定的特性不存在，或该特性值解析失败，或该特性值的解析结果不在该属性的有效范围内。那么这个备选值就会发挥作用。如果备选值不存在，则它会是给定的<code><type-or-unit></code>的默认值。

attr()表达式只在下面情况下有效：

• attr()表达式的类型在其放置的地方是有效的。
• 备选值<code><fallback></code>在其attr()表达式放置的地方是有效的。
• 备选值<code><fallback></code>不包含其它attr()表达式。
• 如果attr()表达式并不是该属性唯一的组件值，则备选值<code><fallback></code>还必须匹配attr()的类型。

如果元素上被指定的特性存在，则特性的取值必须按照<code><type-or-unit></code>参数的方式进行解析。除非类型是‘<code>string</code>’，否则特性值必须首先去掉头尾的空格。处理结果即为该attr()表达式的值。如果特性值无法解析为有效值，则attr()表达式的值为备选值。

<code><type-or-unit></code>的关键字如下：

‘<code>string</code>’

该特性值将会解析为一段CSS<code><string></code>的内容。默认为空字符串。

‘<code>color</code>’

该特性值必须解析为一个HASH或IDENT的CSS token，且成功解释为<code><color></code>。默认值是‘<code>currentColor</code>’。

‘<code>url</code>’

该特性值将会解析为一段CSS<code><string></code>的内容。它会解释为‘<code>url()</code>’内引用的一段字符串。默认值是‘<code>about:invalid</code>’，代表一个不存在的文档，并伴随一个通用的错误环境。相对地址必须根据原始元素的地址进行绝对化，他们对于样式表来说并不是相对的。

‘<code>integer</code>’

该特性值必须解析为一个NUMBER的CSS token，并成功解释为<code><integer></code>。默认值是‘<code>0</code>’，如果‘<code>0</code>’在当前属性中是无效，则默认值是该属性的最小值。如果特性值超出了既定范围，则同样使用默认值。

‘<code>number</code>’

该特性值必须解析为一个NUMBER的CSS token，并解释为<code><number></code>。默认值是‘<code>0</code>’，如果‘<code>0</code>’在当前属性中是无效，则默认值是该属性的最小值。如果特性值超出了既定范围，则同样使用默认值。

‘<code>length</code>’、‘<code>angle</code>’、‘<code>time</code>’、‘<code>frequency</code>’

该特性值必须解析为一个DIMENSION的CSS token，并成功解释为既定类型。默认值是‘<code>0</code>’个相应的单位，如果‘<code>0</code>’在当前属性中是无效，则默认值是该属性的最小值。如果特性值超出了既定范围，则同样使用默认值。如果单位是一个相对长度，则它必须计算为一个绝对长度。

‘<code>em</code>’、‘<code>ex</code>’、‘<code>px</code>’、‘<code>rem</code>’、‘<code>vw</code>’、‘<code>vh</code>’、‘<code>vmin</code>’、‘<code>vmax</code>’、‘<code>mm</code>’、‘<code>cm</code>’、‘<code>in</code>’、‘<code>pt</code>’、‘<code>pc</code>’、‘<code>deg</code>’、‘<code>grad</code>’、‘<code>rad</code>’、‘<code>ms</code>’、‘<code>s</code>’、‘<code>Hz</code>’、‘<code>kHz</code>’、‘<code>%</code>’

该特性值必须解析为一个NUMBER的CSS token，并解释为一个相应的度量单位值。默认值是‘<code>0</code>’个相应的单位，如果‘<code>0</code>’在当前属性中是无效，则默认值是该属性的最小值。如果特性值超出了既定范围，则同样使用默认值。如果单位是一个相对长度，则它必须计算为一个绝对长度。

<stock>
    <wood length="12"/>
    <wood length="5"/>
    <metal length="19"/>
    <wood length="4"/>
</stock>

stock::before {
    display: block;
    content: "To scale, the lengths of materials in stock are:";
}
stock > * {
    display: block;
    width: attr(length em); /* default 0 */
    height: 1em;
    border: solid thin;
    margin: 0.5em;
}
wood {
    background: orange url(wood.png);
}
metal {
    background: silver url(metal.png);
}

content: attr(title color); /* 'content' 不接受颜色值 */

content: attr(end-of-quote string, inherit) close-quote; 
/* 这里不允许 'inherit' 值，因为最终结果会是 'inherit close-quote'，这是无效的。 */

margin: attr(vertical length) attr(horizontal deg); 
/* deg 单位在这里是无效的 */

color: attr(color); /* 'color' 不接受字符串 */

附录A：IANA注意事项

注册 about:invalid URL方案

本章节按照the about: uri scheme RFC draft的章程定义并注册了 about:invalid URI。

该注册的官方记录可以在 http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml 找到。

致谢