syntax
Baseline 2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Syntax
如下是所有的有效 syntax 字符串:
css
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
自定义属性
添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。
css
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
使用 JavaScript 中的 CSS.registerProperty
函数:
js
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
规范
Specification |
---|
CSS Properties and Values API Level 1 # the-syntax-descriptor |
浏览器兼容性
BCD tables only load in the browser