CSS 資料型別 - <custom-ident>

CSS 資料型別<custom-ident>表示自定義識別符號。它用於表示開發者為某些 CSS 屬性或值定義的自定義名稱或識別符號。此資料型別透過啟用超出預定義關鍵字和標準識別符號的自定義名稱的使用，從而允許更廣泛的可能性。

自定義識別符號通常用於開發者希望為樣式或主題的某些方面建立和使用自己的命名約定。

例如，在 CSS 變數（自定義屬性）的上下文中，您可以使用<custom-ident>來表示變數名稱的自定義識別符號。

:root {
   --main-color: red;
}

.element {
   color: var(--main-color);
}

在此示例中，--main-color 是一個自定義識別符號，var() 函式用於引用自定義屬性中儲存的值。

禁止的值

為避免不確定性，每個使用 <custom-ident> 的屬性都禁止使用下面列出的特定值。

animation-name − 禁止使用全域性 CSS 值（unset、initial、inherit 和 none）。
counter-reset, counter-increment − 禁止使用全域性 CSS 值（unset、initial、inherit 和 none）。
@counter-style, list-style-type − 禁止使用全域性 CSS 值（unset、initial、inherit），以及 (none, inline, outside)，以及以下值：disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, disclosure-close。
grid-row-start, grid-row-end, grid-column-start, grid-column-end − 禁止使用 span 值。
view-transition-name − 禁止使用全域性 CSS 值（unset、initial、inherit），以及 none。
will-change − 禁止使用全域性 CSS 值（unset、initial、inherit），以及 (will-change, auto, scroll-position, and contents) 值。

語法

CSS <custom-ident> 的語法遵循與 CSS 屬性名稱相同的規則，但它區分大小寫。此元素包含一個或多個字元，定義如下：

A 到 Z 或 a 到 z 之間的任何字母。
0 到 9 之間的任何十進位制數字。
連字元 (-) 字元。
下劃線 (_) 字元。
跳脫字元定義為反斜槓 (/) 後面的字元。
由反斜槓 (/) 後跟一個到六個十六進位制數字表示的 Unicode 字元。

跳脫字元

可以透過轉義來將 Unicode 程式碼點包含在<custom-ident> 或帶引號的<string> 中。

CSS 提供了各種跳脫字元的方法。轉義序列以反斜槓 (\) 開頭，後跟：

一到六位十六進位制序列 (ABCDEF0123456789) 可選擇後跟空格。這些序列將被替換為與指定十六進位制數字對應的 Unicode 程式碼點，空格允許後續的實際十六進位制數字。
任何既不是十六進位制數也不是換行符的 Unicode 程式碼點。

示例

"&B" 可以表示為 \26 B 或 \000026B。
"hi.there" 可以表示為 hi\.there 或 hi\002Ethere。
"toto?" 可以寫成 toto\?, toto\3F 或 toto\00003F。

有效識別符號

以下語法表示字母數字字元和數字的組合：

tata59            A combination of alphanumeric characters and numbers.
high-level        A combination of alphanumeric characters and a dash
-nest             Alphanumeric characters are placed after a dash.
_external         Alphanumeric characters are placed after a underscore.
\11 nono          A group of alphanumeric characters that follows a Unicode character.
tili\.wow         A correctly escaped period.

無效識別符號

以下語法表示表示值的特定規則：

24rem             It must not begin with a decimal digit.
-16rad            It cannot begin with a dash followed by a decimal digit.
tili.wow          The only characters that don't require escape are alphanumeric characters, _, and -.
'tiliwow'         This would be a <string>.
"tiliwow"         This would be a <string>.

CSS <custom-ident> - animation-name

以下示例演示了透過定義@Keyframes -demoanimation 來使用animation-name 屬性。連字元 (-) 命名約定作為自定義識別符號附加到 CSS 語法：

<html>
<head>
<style>
   @keyframes -demoanimation {
      0% {
      transform: translateX(0);
      }
      50% {
      transform: translateX(100px);
      }
      100% {
      transform: translateX(0);
      }
   }
   .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      animation-name: -demoanimation; 
      animation-duration: 3s;
      animation-iteration-count: infinite;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS <custom-ident> - counter-reset, counter-increment

以下示例演示了使用自定義識別符號demo-counter 的counter-reset 屬性，並將它的初始值設定為 0。counter-increment 屬性每次都會遞增計數器的值：

<html>
<head>
<style>
   body {
      counter-reset: demo-counter; 
   }
   p::before {
      content: counter(demo-counter); 
      counter-increment: demo-counter; 
      margin: 5px;
   }
</style>
</head>
<body>
   <div>
      <p>First Paragraph</p>
      <p>Second Paragraph</p>
      <p>Third Paragraph.</p>
   </div>
</body>
</html>

列印頁面