CSS Data Type - <custom-ident>

CSS data type <custom-ident> represents a custom identifier. It is used to denote custom names or identifiers that developers define for certain CSS properties or values. This data type allows for a broader range of possibilities by enabling the use of custom names beyond the predefined keywords and standard identifiers.

Custom identifiers are typically used in situations where developers want to create and use their own naming conventions for certain aspects of styling or theming.

For example, in the context of CSS variables (custom properties), you might use <custom-ident> to represent a custom identifier for a variable name:

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

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

In this example, --main-color is a custom identifier, and the var() function is used to reference the value stored in the custom property.

Forbidden Values

To prevent uncertainity, each property that uses <custom-ident> forbids the use of specific values as listed below:

  • animation-name − Global CSS values (unset, initial, inherit and none) are forbidden.

  • counter-reset, counter-increment − Global CSS values (unset, initial, inherit and none) are forbidden.

  • @counter-style, list-style-type − Global CSS values (unset, initial, inherit) are forbidden alongwith (none, inline, outside), as well as the values: 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 − The span value is forbidden.

  • view-transition-name − Global CSS values (unset, initial, inherit) are forbidden, as well as none.

  • will-change − Global CSS values (unset, initial, inherit), as well as the values (will-change, auto, scroll-position, and contents) are forbidden.

Syntax

The syntax for CSS <custom-ident> follows the same rules as CSS property names, except that it is case-sensitive. This element includes one or more characters, defined as any of the following:

  • Any alphabetical letter from A to Z or a to z.

  • Any decimal digit from 0 to 9.

  • The hyphen (-) character.

  • The underscore (_) character.

  • An escaped character is defined as a character that comes after a backslash (/).

  • A Unicode character represented by a backslash (/) followed by one to six hexadecimal digits.

Escaping characters

Unicode code points can be included in a <custom-ident> or quoted <string> by escaping them.

CSS provides various ways of escaping a character. Escape sequences begin with a backslash (\) and follow with:

  • Hexadecimal sequences of one to six digits (ABCDEF0123456789) can be optionally followed by white space. These sequences are replaced by the Unicode code point corresponding to the specified hex digits, with the whitespace allowing subsequent actual hex digits.

  • Any Unicode code point that is neither a hex number nor a newline character.

Examples:

  • "&B" can be represented as \26 B or \000026B.

  • "hi.there" can be represented as hi\.there or hi\002Ethere.

  • "toto?" can be written as toto\?, toto\3F, or toto\00003F.

Valid Identifier

The following syntax represents a combination of alphanumeric characters and digits −

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.

Invalid Identifier

The following syntax represents specific rules for representing values −

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

The following example demonstrates the use of animation-name property by defining @Keyframes -demoanimation. The hyphen(-) naming convention is attached to CSS syntax as custom identifier −

<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

The following example demonstrates the use of counter-reset property with the custom-identifier demo-counter and sets its initial value to 0. The counter-increment property increments the value of the counter each time −

<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>
Advertisements