files/de/web/css/custom-ident/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

---
title: <custom-ident>
slug: Web/CSS/custom-ident
tags:
  - CSS
  - CSS Datentyp
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/custom-ident
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Der <code>&lt;custom-ident&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine beliebige benutzerdefinierte Zeichenkette, die als Bezeichner verwendet wird. Er ist schreibungsabhängig und in jedem Kontext sind mehrere Werte ausgeschlossen, um Falschinterpretationen zu vermeiden.</p>

<h2 id="Syntax">Syntax</h2>

<p>Seine Syntax ist ähnlich der des CSS Bezeichners mit Ausnahme, dass Groß- und Kleinschreibung berücksichtigt wird: ein <code>&lt;custom-ident&gt;</code> ist eine Sequenz von Zeichen, wobei Zeichen folgendes sein können:</p>

<ul>
 <li>ein beliebiges alphanumerisches Zeichen (<code>'A'</code> bis <code>'Z'</code> oder <code>'a'</code> bis <code>'z'</code>),</li>
 <li>eine beliebige dezimale Ziffer (<code>'0'</code> bis <code>'9'</code>),</li>
 <li>ein Bindestrich (<code>'-'</code>)</li>
 <li>ein Unterstrich (<code>'_'</code>),</li>
 <li>ein escaptes Zeichen (mit einem Backslash, <code>'\'</code>),</li>
 <li>oder ein <a class="external" href="http://de.wikipedia.org/wiki/Unicode">Unicode</a> Zeichen (im Format eines Backslashs gefolgt von einer bis sechs hexadezimalen Ziffern, seinem Unicode Codepoint).</li>
</ul>

<p>Das erste Zeichen darf weder eine dezimale Ziffer, noch ein Bindestrich (<code>'-'</code>) sein, gefolgt von einer dezimalen Ziffer oder einem weiteren Bindestrich. Ein <code>&lt;custom-ident&gt;</code> darf nicht zwischen einfachen oder doppelten Anführungszeichen stehen, da er sonst identisch zu einem {{cssxref("&lt;string&gt;")}} wäre.</p>

<p>Beachte, dass <code>id1</code>, <code>Id1</code>, <code>iD1</code> und <code>ID1</code> alle verschiedene Bezeichner sind, da sie sich in <a class="external" href="https://de.wikipedia.org/wiki/Case_sensitivity">Groß-/Kleinschreibung</a> unterscheiden. Im Gegensatz dazu sind <code>toto\?</code> und <code>toto\3F</code> dieselben Bezeichner, da es verschiedene Arten gibt, ein Zeichen zu escapen.</p>

<h2 id="Liste_ausgeschlossener_Werte">Liste ausgeschlossener Werte</h2>

<p>Um Mehrdeutigkeiten zu verhindern, definiert jede Eigenschaft, die <code>&lt;custom-ident&gt;</code> verwendet, eine spezielle Liste an verbotenen Werten:</p>

<dl>
 <dt>{{cssxref("animation-name")}}</dt>
 <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code> und den Wert <code>none</code>.</dd>
 <dt>{{cssxref("counter-reset")}}</dt>
 <dt>{{cssxref("counter-increment")}}</dt>
 <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code> und den Wert <code>none</code>.</dd>
 <dt>{{cssxref("@counter-style")}}</dt>
 <dt>{{cssxref("list-style-type")}}</dt>
 <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code>, als auch die Werte <code>none</code>, <code>inline</code> und <code>outside</code>. Auch einige vordefinierte Werte werden von verschiedenen Browsern implementiert: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> und <code>disclosure-close</code>.</dd>
 <dt>{{cssxref("will-change")}}</dt>
 <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code>, als auch die Werte <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> und <code>contents</code>.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<p>Dies sind gültige Bezeichner:</p>

<pre class="eval">nono79            Eine Mischung aus alphanumerischen Zeichen und Zahlen
ground-level      Eine Mischung aus alphanumerischen Zeichen und einem Bindestrich
-test             Ein Bindestrich gefolgt von alphanumerischen Zeichen
_internal         Ein Unterstrich gefolgt von alphanumerischen Zeichen
\22 toto          Ein Unicode-Zeichen gefolgt von einer Sequenz von alphanumerischen Zeichen
bili\.bob         Der Punkt ist korrekt escapt
</pre>

<p>Dies sind ungültige Bezeichner:</p>

<pre class="eval">34rem             Darf nicht mit einer Dezimalziffer anfangen
-12rad            Darf nicht mit einem Bindestrich gefolgt von einer Dezimalziffer anfangen
bili.bob          Nur alphanumerische Zeichen, _ und - müssen nicht escapt werden
--toto            Darf nicht mit zwei Bindestrichen anfangen
'bilibob'         Kein &lt;user-ident&gt;, sondern ein {{cssxref("&lt;string&gt;")}}
"bilibob"         Kein &lt;user-ident&gt;, sondern ein {{cssxref("&lt;string&gt;")}}
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> für <code>will-change</code>')}}</td>
   <td>{{Spec2('CSS Will Change')}}</td>
   <td>Definiert, welche Werte für {{cssxref("will-change")}} ausgeschlossen sind.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> für <code>list-style-type</code>')}}</td>
   <td>{{Spec2('CSS3 Counter Styles')}}</td>
   <td>Verwendet <code>&lt;custom-ident&gt;</code> anstatt einer begrenzten Liste von Schlüsselwörtern und definiert, welche Werte für {{cssxref("list-style-type")}} und {{cssxref("@counter-style")}} ausgeschlossen sind.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> für <code>counter-*</code>')}}</td>
   <td>{{Spec2('CSS3 Lists')}}</td>
   <td>Benennt <code>&lt;identifier&gt;</code> zu <code>&lt;custom-ident&gt;</code> um. Fügt seine Verwendung zur neuen <code>counter-set</code> Eigenschaft hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> für <code>animation-name</code>')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td>Definiert, welche Werte für {{cssxref("animation-name")}} ausgeschlossen sind.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Values', '#identifier-value', '<code>&lt;custom-ident&gt;</code>')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Benennt <code>&lt;identifier&gt;</code> in <code>&lt;custom-ident&gt;</code> um. Macht ihn zu einem Pseudotyp und verlangt die verschiedenen Verwendungen, um die ausgeschlossenen Werte zu präzisieren.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p><em>Da dieser Typ kein realer Typ ist, sondern ein Bequemlichkeitstyp, der dazu verwendet wird, um die Beschreibung von erlaubten Werten zu vereinfachen, gibt es keine Browser Kompatibilitätsinformationen im engeren Sinne.</em></p>