syntax
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Syntax
如下是所有的有效 syntax 字符串:
syntax: '<color>'; /* 接收一个颜色值 */
syntax: '<length> | <percentage>'; /* 接收长度或百分比参数,但是二者之间不进行计算合并 */
syntax: 'small | medium | large'; /* 接收这些参数值之一作为自定义标识符 */
syntax: '*'; /* 任何有效字符 */
取值
规范定义的、受语法支持的字符串。支持的语法是CSS types的子集。这些可以单独使用,一些类型也可以结合使用。
"<length>"
-
任何有效的
<length>
值。 "<number>"
-
任何有效的
<number>
值。 "<percentage>"
-
任何有效的
<percentage>
值。 "<length-percentage>"
-
任何有效的
<length-percentage>
值。 "<color>"
-
任何有效的
<color>
值。 "<image>"
-
任何有效的
<image>
值。 "<url>"
-
任何有效的
url()
值。 "<integer>"
-
任何有效的
<integer>
值。 "<angle>"
-
任何有效的
<angle>
值。 "<time>"
-
任何有效的
<time>
值。 "<resolution>"
-
任何有效的
<resolution>
值。 "<transform-function>"
-
任何有效的
<transform-function>
值。 "<custom-ident>"
-
任何有效的
<custom-ident>
值。 "<transform-list>"
-
A list of valid
<transform-function>
值。
标准定义
标准语法
syntax = <string>
实例
为 --my-color
自定义属性
添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
使用 JavaScript 中的 CSS.registerProperty
(en-US)函数:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
标准语法
syntax =
<string>
规范
Specification |
---|
CSS Properties and Values API Level 1 # the-syntax-descriptor |
浏览器兼容性
BCD tables only load in the browser