<dashed-ident>
语法
<dashed-ident>
的语法类似于 CSS 标识符(例如属性名),但它 区分大小写。它以两个连字符开头,后面跟着用户定义的标识符。
开头处的双连字符使它们在阅读 CSS 代码块时易于识别,并有助于避免与标准 CSS 关键字发生命名冲突。
就像 <custom-ident>
一样,<dashed-ident>
由用户定义,但与 <custom-ident>
不同,CSS 永远不会定义 <dashed-ident>
。
示例
与 CSS 自定义属性一起使用
当 <dashed-ident>
与 CSS 自定义属性 一起使用时,首先声明该属性,然后在 CSS var() 函数 中使用。
css
html {
--primary-color: red;
--secondary-color: blue;
--tertiary-color: green;
}
h1,
h4 {
color: var(--primary-color);
}
h2,
h5 {
color: var(--secondary-color);
}
h3,
h6 {
color: var(--tertiary-color);
}
与 @color-profile 一起使用
当 <dashed-ident>
与 @color-profile at 规则一起使用时,首先声明 at 规则,然后在 CSS color() 函数 中使用。
css
@color-profile --my-color-profile {
src: url("https://example.org/SWOP2006_Coated5v2.icc");
}
.header {
background-color: color(--my-color-profile 0% 70% 20% 0%);
}
与 @font-palette-values 一起使用
当 <dashed-ident>
与 @font-palette-values at 规则一起使用时,首先声明 at 规则,然后将其用作 font-palette 属性的值。
css
@font-palette-values --my-palette {
font-family: Bixa;
base-palette: 1;
override-colors: 0 #ff0000;
}
h1,
h2,
h3,
h4 {
font-palette: --my-palette;
}
规范
规范 |
---|
CSS 值和单位模块 Level 4 # dashed-idents |
浏览器兼容性
由于此类型不是真正的类型,而是一个简化其他 CSS 语法定义的便利类型,因此没有浏览器兼容性信息。