CSS/Namen
Inhaltsverzeichnis
CSS ermöglicht an einigen Stellen die Verwendung von selbst definierten Namen. Beispiele dafür sind
- Animationsnamen (animation-name und @keyframes)
- CSS Counter (counter-reset, counter-increment und counter()-Funktion)
- Benannte Bereiche in einem Grid (grid-template-areas)
- Custom Propertys
Zeichenvorrat
Solche Namen müssen sich aus einem festgelegten Zeichenvorrat zusammensetzen:
- Alphabetische Zeichen (Mozilla schreibt hier einfach
AbisZundabisz, die CSS Syntaxspezifikation erlaubt aber jedes „non-ASCII“ Zeichen, d.h. jedes Zeichen mit einem Unicode Codepoint ab 128 (€). Auch Zeichen für Leerraum wie sind zulässig. - Ziffern (
0bis9) - Das Minuszeichen
-(Zeichencode 45) und das Unterstrichzeichen_(Zeichencode 95) - Andere Zeichen sind ebenfalls erlaubt, müssen aber maskiert werden.
Das erste Zeichen eines solchen Namens darf keine Ziffer sein. Und wenn das erste Zeichen ein Minuszeichen ist, darf darauf keine Ziffer folgen (weil der Name dann eine negative Zahl darstellen würde).
Ein selbst definierter Name darf auch nicht in einfache oder doppelte Anführungszeichen gesetzt werden, weil es sich dann nicht mehr um einen Namen handelt, sondern um einen CSS-String.
Ausnahme: Die in Anführungszeichen stehenden Namen von grid-template-areas. Hier werden die Grid-Zeilen durch Strings definiert und in diesen Strings werden Bereichsnamen aufgeführt. Ein solcher Bereichsname ist dann wieder ein selbst definierter Name.
In selbst definierten Namen ist die Groß-/Kleinschreibung relevant. self, Self und SELF sind drei unterschiedliche Namen. Es ist aber auch so, dass die Entstehung eines Zeichens nicht von Bedeutung ist, d.h. die Namen Energie\* und Energie\2A sind gleichwertig, wenn auch unpraktisch für den Alltagsgebrauch. Der so entstandene Name lautet übrigens Energie* - der Backslash ist kein Teil des Namens.
Verbotene Namen
Es gibt einige CSS-weit vordefinierte Schlüsselwörter, die als selbstdefinierter Name unzulässig sind. Dies sind laut CSS Syntax-Spezifikation die Schlüsselwörter default, initial, inherit und unset und initial. Diese Schlüsselwörter können in jeder CSS Eigenschaft als Wert angegeben werden, weshalb sie niemals als selbstdefinierter Name erkannt werden.
Alle anderen Namen laufen Gefahr, bei Verwendung in einer CSS Eigenschaft mit einem Schlüsselwort zu kollidieren, das für diese Eigenschaft vorgesehen ist. Die CSS Spezifikation schreibt vor, dass der Browser zunächst die zulässigen Schlüsselworte als solche verarbeitet und erst dann schaut, ob noch selbst definierte Namen vorhanden sind. Sie können also beispielsweise eine @keyframes-Liste namens "infinite" erstellen, aber wenn Sie dann schreiben: animation: infinite 3s;, dann wird der Browser dies als animation-iteration-count deuten. Wenn Sie dagegen animation: infinite infinite 3s; schreiben, wird das erste infinite als Iterationsanzahl und das zweite infinite als Name der @keyframes-Liste verstanden.
Selbstdefinierte Namen mit Präfix
Um einen Raum für Namen zu schaffen, die eindeutig von vordefinierten Schlüsselwörtern unterscheidbar sind, führt die CSS Syntaxspezifikation die Namen mit Präfix ein. Dieses Präfix besteht aus zwei Minuszeichen, weshalb diese Namen auch dashed ident genannt werden. Es ist garantiert, dass solche Namen immer für Stylesheet-Autoren verfügbar sind und niemals eine vordefinierte Bedeutung erhalten. Ein einzelnes Minuszeichen reichte dafür nicht aus, weil das bereits für die Herstellerpräfixe verwendet wurde.
Eine dashed ident ist überall verwendbar, wo selbst definierte Namen gebraucht werden, nicht nur für Custom Propertys. Eine @keyframes-Liste namens --wischwasch oder ein Grid-Bereichsname --navi sind völlig in Ordnung.
ToDo (weitere ToDos)
Quelle
- W3C CSS Syntax 3 Spezifikation: [1]
