語法
<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-rule 一起使用時,首先宣告該 at-rule,然後在 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-rule 一起使用時,首先宣告該 at-rule,然後將其用作 font-palette 屬性的值。
css
@font-palette-values --my-palette {
font-family: "Bixa";
base-palette: 1;
override-colors: 0 red;
}
h1,
h2,
h3,
h4 {
font-palette: --my-palette;
}
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # dashed-idents |
瀏覽器相容性
由於此型別不是真實的型別,而是用於簡化其他 CSS 語法定義的便捷型別,因此沒有此類瀏覽器相容性資訊。