<user-ident>

  • Revision slug: Web/CSS/user-ident
  • Revision title: user-ident
  • Revision id: 495991
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The <user-ident> CSS data value denotes an arbitrary user-defined string used as an identifier.

Its syntax is similar to the CSS identifier one, except that it is case-sensitive: a <user-ident> is a sequence of characters where characters can be:

  • any alphanumeric character (A to Z, or a to z),
  • any decimal digit (0 to 9),
  • a dash ('-')
  • an underscore ('_'),
  • a escaped character (with a backslash, '\'),
  • or a Unicode character (in the format of a backslash followed by one to six hexadecimal digits, its Unicode code point).

The first character must not be a decimal digit nor a dash ('-') followed by a decimal digit or another dash. A <user-ident> must not be placed between single or double quotes as it would be identical to a {{ xref_cssstring() }}.

Note that id1, Id1, iD1 and ID1 are all different identifiers as they are case-sensitive. In the opposite, as they are several way to escape a character, toto\? and toto\3F are the same identifiers.

These are valid identifiers:

nono79            A mix of alphanumeric characters and numbers
ground-level      A mix of alphanumeric characters and a dash
-test             A dash followed by an alphabetic character
_internal         An underscore followed by alphanumeric characters
\22 toto          A Unicode character followed by a sequence of alphanumeric character
bili\.bob         The period is correctly escaped

These are invalid identifiers:

34rem             It must not start with a decimal digit.
-12rad            It must not start with a dash followed by a decimal digit.
bili.bob          Only alphanumeric characters, _ and - need not being escaped.
--toto            It must not start with two dashes.
'bilibob'         It isn't an <user-ident>, it is a {{ xref_cssstring() }}.
"bilibob"         It isn't an <user-ident>, it is a {{ xref_cssstring() }}.

The <user-ident> data type is mainly used in conjunction with CSS Counters, the {{ cssxref("counter") }} functional notation and the two related CSS properties, {{ cssxref("counter-reset") }} and {{ cssxref("counter-increment") }}.

Specifications

Specification Status Comment
CSS Values and Units Level 4 {{ Spec2('CSS4 Values') }} Renamed from <identifier> to <user-ident>.
No significant change from CSS Level 2 (Revision 1).
Was initially in CSS Values and Units Level 3 but deferred to Level 4.
{{ SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier') }} {{ Spec2('CSS2.1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (?) 8.0 9.2 3.1 (?)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • CSS Data Types: {{ CSSDataTypes() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>&lt;user-ident&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data value denotes an arbitrary user-defined string used as an identifier.</p>
<p>Its syntax is similar to the CSS identifier one, except that it is case-sensitive: a <code>&lt;user-ident&gt;</code> is a sequence of characters where characters can be:</p>
<ul>
 <li>any alphanumeric character (A to Z, or a to z),</li>
 <li>any decimal digit (0 to 9),</li>
 <li>a dash ('<code>-</code>')</li>
 <li>an underscore ('<code>_</code>'),</li>
 <li>a escaped character (with a backslash, '<code>\</code>'),</li>
 <li>or a <a class="external" href="http://en.wikipedia.org/wiki/Unicode" title="http://en.wikipedia.org/wiki/Unicode">Unicode</a> character (in the format of a backslash followed by one to six hexadecimal digits, its Unicode code point).</li>
</ul>
<p>The first character must not be a decimal digit nor a dash ('<code>-</code>') followed by a decimal digit or another dash. A <code>&lt;user-ident&gt;</code> must not be placed between single or double quotes as it would be identical to a {{ xref_cssstring() }}.</p>
<p>Note that <code>id1</code>, <code>Id1</code>, <code>iD1</code> and <code>ID1</code> are all different identifiers as they are <a class="external" href="http://en.wikipedia.org/wiki/Case_sensitivity" title="http://en.wikipedia.org/wiki/Case_sensitivity">case-sensitive</a>. In the opposite, as they are several way to escape a character, <code>toto\?</code> and <code>toto\3F</code> are the same identifiers.</p>
<p>These are valid identifiers:</p>
<pre>
nono79&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A mix of alphanumeric characters and numbers
ground-level&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A mix of alphanumeric characters and a dash
-test&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A dash followed by an alphabetic character
_internal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; An underscore followed by alphanumeric characters
\22 toto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A Unicode character followed by a sequence of alphanumeric character
bili\.bob&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The period is correctly escaped
</pre>
<p>These are invalid identifiers:</p>
<pre>
34rem&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; It must not start with a decimal digit.
-12rad&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; It must not start with a dash followed by a decimal digit.
bili.bob          Only alphanumeric characters, _ and - need not being escaped.
--toto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; It must not start with two dashes.
'bilibob'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; It isn't an &lt;user-ident&gt;, it is a {{ xref_cssstring() }}.
"bilibob"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; It isn't an &lt;user-ident&gt;, it is a {{ xref_cssstring() }}.
</pre>
<p>The <code>&lt;user-ident&gt;</code> data type is mainly used in conjunction with <a href="/en/CSS_Counters" title="CSS Counters">CSS Counters</a>, the {{ cssxref("counter") }} functional notation and the two related CSS properties, {{ cssxref("counter-reset") }} and {{ cssxref("counter-increment") }}.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><span class="external">CSS Values and Units Level 4</span></td>
   <td>{{ Spec2('CSS4 Values') }}</td>
   <td>Renamed from <code>&lt;identifier&gt;</code> to <code>&lt;user-ident&gt;</code>.<br />
    No significant change from CSS Level 2 (Revision 1).<br />
    Was initially in CSS Values and Units Level 3 but deferred to Level 4.</td>
  </tr>
  <tr style="vertical-align: top;">
   <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'syndata.html#value-def-identifier', '&lt;identifier') }}</td>
   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
   <td style="vertical-align: top;">&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>2.0</td>
    <td>1.0 (?)</td>
    <td>8.0</td>
    <td>9.2</td>
    <td>3.1 (?)</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>CSS Data Types: {{ CSSDataTypes() }}</li>
</ul>
Revert to this revision