The <user-ident> data type is used to represent a custom identifier defined by the CSS author.
Some properties in CSS accept arbitrary identifiers defined by the author.
User-identified values are similar to CSS identifiers. CSS identifiers are the labels used in property names, keyword values, and at-rule names, as well as in element type names, classes, and IDs within selectors. In the following example, fieldset, border, and none are all CSS identifiers:
fieldset {
border: none;
}
Just like CSS identifiers, custom identifiers have grammar and syntax rules that specify how an identifier can be defined. Custom identifiers are similar to CSS identifiers in their syntax: they are a sequence of characters that, according to the specification, can contain any alphanumeric character (A to Z, or a to z), any digit from 0 to 9, and ISO 10646 characters U+00A0 (inverted exclamation mark) and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters (with a backslash ‘\’).
Unlike CSS identifiers which are case-insensitive, custom identifiers are case-sensitive, which means that some-name is different from Some-Name and SOME-Name; they are all different, unrelated user-defined identifiers.
A valid custom identifier is one that does not otherwise appear as a pre-defined CSS keyword in a property’s value definition. An identifier should also not be placed inside quotes, otherwise it will be treated as a <string> data type, not a <user-ident> type.
CSS properties that use a custom identifier are mostly those related to CSS counters.
Trivia & Notes
You can read a lot more about escaping characters in CSS in CSS character escape sequences by Mathias Bynens.
You can also find a full list of Unicode characters starting from U+00A0 and more in this Unicode character table.
Examples
The following are all valid custom identifiers:
blah33
_something
-my-identifier
some-name
\5 five
cute\.kitty
The following are all invalid custom identifiers:
cute.kitty /* the period needs to be escaped, only _ and - don't need to be escaped */
"my-identifier" /* cannot be quoted, otherwise it's a <string> not a <user-ident> type */
--pocket /* cannot start with two hyphens */
-87barbera /* cannot start with a hyphen followed by a digit */
Browser Support
Custom user-defined identifiers are supported in Chrome, Firefox, IE 8+, Opera 9.2+, Safari 3.1+, and on Android and iOS.
Notes
Not all devices have equal support for all Unicode characters. You can check support for different characters with this tool by John Holt Ripley.
