CSS/Wertetypen/Namen und Zeichenketten

15min

leicht

• CSS-Syntax

In den ersten zwei Kapiteln wurden Zahlenwerte und Maßangaben besprochen. Einige Eigenschaften benötigen aber als Wert der CSS-Deklaration Text.

CSS unterscheidet fünf Arten von Text.

Schlüsselwörter

Hierbei handelt es sich um Begriffe, die auf Grund der CSS Spezifikation eine genau festgelegte Bedeutung besitzen. Schlüsselwörter sind in CSS mit wenigen Ausnahmen nicht reserviert, Sie können jedes Schlüsselwort auch als Name verwenden.

Namen ohne Präfix

Diese Begriffe werden vom Autor des Stylesheets vergeben und dienen beispielsweise zum Benennen von Animationen, CSS Zählern oder Rasterbereichen.

Namen mit Präfix

Dies sind spezielle Namen, die vom Autor des Stylesheets vergeben werden und die mit zwei Minuszeichen -- beginnen müssen

Zeichenketten (Strings in Anführungszeichen)

Beliebige Zeichenketten, die in einfache oder doppelte Anführungszeichen einzuschließen sind

URLs

Adressen von Ressourcen, die von url() oder src() eingeschlossen werden.

Eigenschaftsnamen folgen ebenfalls der Syntax für Namen ohne Präfix. Da sie aber an einer festgelegten Stelle in den CSS Regeln stehen, besteht bei ihnen keine Gefahr einer Verwechselung.

Schlüsselwörter

Schlüsselwörter sind für jede CSS Eigenschaft eigens definierte Begriffe und stehen für Farben, Ausrichtungen, Strichstärken und vieles mehr. Sie dürfen nicht in Anführungszeichen gesetzt werden, andernfalls interpretiert CSS sie als Zeichenkette.

Welche Schlüsselwörter Sie verwenden können, hängt von der jeweiligen CSS Eigenschaft ab. Generell folgen sie den gleichen Syntaxregeln wie selbstdefinierte Namen, allerdings werden Groß- und Kleinbuchstaben in Schlüsselwörtern nicht unterschieden.

Schlüsselwörter und zeichenketten

width: auto; /* Schlüsselwort */
display: inline-block; /* Schlüsselwort */
content: 'Test:'; /* Zeichenkette */
color: "red"; /* Zeichenkette - Da 'color' keine Zeichenketten verarbeiten kann, wird die Deklaration ignoriert. */

Beachten Sie: Schlüsselwörter und Zeichenketten sind nicht austauschbar. Eine Eigenschaft, die als Wert ein Schlüsselwort erwartet, wird eine gleichlautende Zeichenkette ignorieren. color: "red"; ist nicht dasselbe wie color: red;

Reservierte Schlüsselwörter

Die Schlüsselwörter default, inherit, initial und unset werden von allen CSS Eigenschaften als gültige Werte akzeptiert und haben eine besondere Bedeutung. Sie sind deshalb reserviert und dürfen nicht als selbstvergebener Name verwendet werden.

Zum einen Schlüsselwörter, die eine genau definierte Bedeutung besitzen und keiner besonderen Kennzeichnung bedürfen. Zum anderen die eigentlichen Zeichenketten, die innerhalb von einfachen oder doppelten Anführungszeichen notiert werden.

Namen

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

Die oben aufgelisteten reservierten Schlüsselwörter sind als selbstdefinierte Namen nicht zulässig. Ebenso sollten Sie es vermeiden, andere in CSS genutzte Schlüsselwörter als selbstdefinierten Name zu verwenden, um Verwechslungen zu vermeiden.

Bildungsregeln für Namen

Der Zeichenvorratvorrat für Namen in CSS besteht aus:

• Alphabetische Zeichen (die Buchstaben A - Z und a - z). Zwischen Groß- und Kleinbuchstaben wird unterschieden!
• Ziffern (0 - 9) - mit Einschränkungen am Beginn eines Namens
• Das Minuszeichen - (Zeichencode 45) und das Unterstrichzeichen _ (Zeichencode 95)
• „Jedes“ Unicode-Zeichen mit einem Codewert von 128 oder höher. Selbst Zeichen für speziellen Leerraum sind erlaubt, aber nicht zu empfehlen!
  • Die CSS Syntax 3 Spezifikation ist an dieser Stelle in Arbeit. Der letzte Entwurfsstand ist, dass etliche problematische Zeichen ausgeschlossen werden sollten. Verwenden Sie möglichst nur Zeichen, die für einen Namen plausibel sind, und folgen Sie im Zweifelsfall dem Link in der Fußnote, um in der Spezifkation nachzulesen.
• Die verbleibenden Zeichen müssen maskiert werden. Dazu muss dem Zeichen ein Backslash \ vorangestellt werden. Ein Backslash, auf den Hexadezimalziffern folgen, hat aber eine Sonderbedeutung.

Für den Anfang eines Namens gelten Einschränkungen. Er darf nicht mit einer Ziffer beginnen, und wenn er mit einem Minuszeichen beginnt, darf das zweite Zeichen auch keine Ziffer sein. Diese Einschränkung gilt nicht, wenn die Ziffer oder das Minuszeichen maskiert werden.

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.

Beachten Sie: An bestimmten Stellen verlangt CSS eine dashed ident. Bei Custom Propertys ist das der Fall, aber auch bei Farbprofilen (@color-profile). Die CSS Spezifikation kündigt an, dass es in Zukunft weitere Stellen geben soll, die dashed idents verlangen.

Zeichen maskieren

Um ein Zeichen an einer Stelle zu verwenden, an der es regulär nicht erlaubt ist, können Sie es maskieren (der englische Fachbegriff lautet escape). Dazu stellen Sie diesem Zeichen ein Backslash-Zeichen \ voran. Auf diese Weise könnten Sie beispielsweise eine Klasse, die im HTML als class="*foo" notiert ist, mit dem Klassenselektor .\*foo ansprechen.

Weil der Backslash die Sonderrolle des Maskierungszeichens spielt, muss er selbst maskiert werden, wenn Sie einen Backslash als Zeichen verwenden möchten. Wenn Sie Ziffern oder die Buchstaben A-F maskieren möchten, beachten Sie bitte den nächsten Abschnitt über Sonderzeichen.

Beachten Sie: Maskieren Sie den Doppelpunkt nicht als \:. Der Internet Explorer ist zwar tot, aber einige Versionen von ihm haben diese Zeichenfolge nicht verstanden. Erzeugen Sie ihn lieber mit \3a (inclusive der Leerstelle!) als Sonderzeichen.

Sonderzeichen bilden

Auf Ihrer Tastatur befinden sich nur die wenigsten Unicode-Zeichen. Die meisten werden Sie an Hand ihrer Codepunktnummer als Sonderzeichen eingeben müssen. In HTML tun Sie das auch, das Zeichen ⯈ würden Sie dort als ⯈ notieren.

In CSS wird zum Erstellen von Sonderzeichen wieder der Backslash verwendet. Wenn Sie hinter einem \ eine Codepunktnummer in Form von ein bis sechs Hexadezimalziffern notieren und dahinter eine Leerstelle als Abschlusszeichen, erzeugt CSS daraus das entsprechende Zeichen. Das abschließende Leerzeichen wird als Teil des Sonderzeichens betrachtet und nicht weiter beachtet.

Dadurch wird es Ihnen erschwert, einen Klassennamen oder eine ID, die mit einer Ziffer beginnen, in einem CSS Selektor zu maskieren. \1 maskiert nicht die 1, sondern erzeugt den Codepunkt mit Nummer 1. Sie müssen die Ziffern 0-9 daher durch ihre Sonderzeichensequenzen \30 bis \39 darstellen.

Das Dreieck von vorhin würden Sie zum Beispiel als \2BC8 schreiben können, oder auch als \002BC8. Das abschließende Leerzeichen kann weggelassen werden, wenn Sie die Sequenz mit führenden Nullen auf sechs Hexadezimalziffern auffüllen oder ein anderes Zeichen folgt. Wenn Sie das Leerzeichen hinschreiben, wird es aber auf jeden Fall entfernt.

Wenn Sie einen Editor haben, der Ihnen das Einfügen von beliebigen Sonderzeichen direkt im Quellcode erlaubt, können Sie aber auch direkt das Dreieckszeichen in Ihre .css Datei eintragen.

Maskieren in CSS

.\2A 123 { color: red; }
.\2A123 { color: red; }

Die Sonderzeichensequenz \2A steht für den Stern (Zeichencode 42). Der CSS Selektor der ersten Regel würde demnach auf die Klasse "*123" zutreffen.

In der zweiten Regel wurde das abschließende Leerzeichen vergessen. Deswegen umfasst die Sonderzeichensequenz alle 5 Hexadezimalziffern und die zutreffende Klasse wäre "𪄣".

Zeichenketten

Einige CSS-Eigenschaften erwarten, dass Sie ihnen Werte als String übergeben. Dazu gehört beispielsweise die Eigenschaft content, aber eventuell auch font-family, wenn ein Schriftartname Leerstellen enthält. Gerade die font-family Eigenschaft kann zu der Idee verleiten, dass die Anführungszeichen um Zeichenketten in CSS optional seien. Das ist aber nicht der Fall. Eine Zeichenfolge ohne Anführungszeichen stellt – sofern Sie den Regeln für Namen folgt – einen CSS-Namen dar, und font-family akzeptiert Namen und Zeichenketten für Fontangaben.

Ein String ist eine beliebige Folge von Zeichen, die in 'einfache' oder "doppelte" Anführungszeichen eingeschlossen wird. Vorsicht ist nur dann geboten, wenn Sie in einem String das Anführungszeichen benutzen möchten, das ihn begrenzt. Dann müssen Sie dieses innere Anführungszeichen escapen, oder den String mit dem anderen Anführungszeichentyp begrenzen.

Zeilenumbrüche innerhalb von Zeichenketten sind ebenfalls möglich. Dazu müssen Sie den Zeilenumbruch aus dem CSS Quelltext maskieren:

Zeilenumbruch in einem String

p.spezial::after {
   content: "Achtung!\
Spezial";
}

Bei diesem Konstrukt droht allerdings eine Panne. Nicht jeder Texteditor kennzeichnet Leerstellen, deswegen können Sie eine Leerstelle hinter einem solchen \ schnell übersehen. Das Ergebnis wäre eine content-Eigenschaft, deren Wert nicht mit einem Anführungszeichen beendet wird. Damit ist sie falsch und wird ignoriert.

Sie sollten, wenn es die Lesbarkeit nicht zu sehr einschränkt, statt einem maskierten Zeilenumbruch besser die Sonderzeichensequenz \A . Denken Sie auch daran, dass HTML Zeilenumbrüche als Whitespace auffasst. Sie sehen den Umbruch nur, wenn Sie die Eigenschaft white-space mit einem passenden Wert hinzufügen.

Schlüsselwörter, Zeichenketten und auch andere Bestandteile von CSS können aus Zeichen bestehen, die eine besondere Bedeutung besitzen, z. B. weil die Grammatik der Sprache dies erfordert. Damit diese besonderen Zeichen dennoch innerhalb von Zeichenketten verwendet werden können, müssen sie maskiert werden (der englische Fachbegriff lautet „escaping“).

Diese Maskierung wird durch einen umgekehrten Schrägstrich (Backslash, „\“) eingeleitet. Maskiert werden können beispielsweise Zeichen wie die einfachen und doppelten Anführungszeichen und der Backslash selbst. Das Maskieren von Zeilenumbrüchen führt dazu, dass der Zeilenumbruch gänzlich ignoriert wird.

alt

Zeichen maskieren

Schlüsselwörter, Zeichenketten und auch andere Bestandteile von CSS können aus Zeichen bestehen, die eine besondere Bedeutung besitzen, z. B. weil die Grammatik der Sprache dies erfordert. Damit diese besonderen Zeichen dennoch innerhalb von Zeichenketten verwendet werden können, müssen sie maskiert werden (der englische Fachbegriff lautet „escaping“).

Diese Maskierung wird durch einen umgekehrten Schrägstrich (Backslash, „\“) eingeleitet. Maskiert werden können beispielsweise Zeichen wie die einfachen und doppelten Anführungszeichen und der Backslash selbst. Das Maskieren von Zeilenumbrüchen führt dazu, dass der Zeilenumbruch gänzlich ignoriert wird.

CSS Text	ergibt
"Das ist ein Backslash: \\."	Das ist ein Backslash \.
"\""	"
'\''	'
"Te\ st"	Test	Dies ermöglicht Zeilenumbrüche, die der Lesbarkeit dienen.

Beachten Sie: Zeilenumbrüche, die nicht maskiert werden, führen dazu, dass die Eigenschaft, der der Wert zugewiesen wird, ignoriert wird. Wie Sie sichtbare Zeilenumbrüche in Zeichenketten notieren, erfahren Sie in den folgenden Abschnitten.

Eine Maskierung ist auch erforderlich, wenn Sie in Selektoren IDs oder Klassen ansprechen wollen, die den Regeln für CSS-Bezeichner nicht entsprechen. Klassennamen oder IDs wie "A.3" oder "1234" sind in HTML zulässig, aber in CSS nicht ohne weiteres verwendbar, weil der Punkt eine Sonderrolle hat und ein Name in CSS nicht mit einer Ziffer beginnen darf. Eine ID "A.3" können Sie mit dem Selector #A\.3 ansprechen, um dem Punkt die Sonderrolle zu nehmen. Die ID "1234" ist umständlicher, weil ein Backslash, auf den 1-6 Hex-Ziffern folgen, dazu dient, beliebige Unicode-Zeichen darzustellen. Mehr dazu im folgenden Abschnitt.

Beachten Sie: Maskieren Sie den Doppelpunkt nicht als \:. Ältere Browser verstehen das nicht. Maskieren Sie den Doppelpunkt gemäß der Regeln für Sonderzeichen als \3a (inklusive der Leerstelle hinter dem a!

Sonderzeichen einfügen

Der Backslash ist neben der Maskierung auch für das Einfügen von Sonderzeichen verantwortlich. Dazu muss direkt nach dem Backslash der Unicode-Wert eines Zeichens in hexadezimaler Schreibweise notiert werden. Die hexadezimale Adresse kann bis zu sechs Stellen lang sein (wobei der aktuell maximal genutzte Zeichencode \10FFFF ist).

Beispiel

"\41" ergibt: A
"\000285" ergibt: ʅ
"\0000285" ergibt: (5 - Beachten Sie die Anzahl der Stellen in "\0000285"

Beachten Sie: Die führenden Nullen im Zeichencode können weggelassen werden, wenn klar ist, an welcher Stelle der Zeichencode endet. Sofern auf eine verkürzte Angabe Zeichen folgen, die gültige Hexadezimalziffern sind (also 0-9, A-Z oder a-z), müssen Sie eine Leerstelle setzen, um die Maskierungs-Sequenz zu beenden. Wenn Sie den Stern in "*xyz" maskieren möchten, genügt "\2Axyz". Um aber den Stern in "*123" zu maskieren, müssen Sie "\00002A123" oder verkürzt "\2A 123" schreiben. "\2A123" wäre dagegen falsch, daraus würde das CJK-Ideogramm 𪄣 entstehen. Die erste Leerstelle nach einem maskierten Sonderzeichen wird immer ignoriert, deshalb sollten Sie dort zur Sicherheit immer eine setzen.

Zeilenumbrüche einfügen

Um in einer Zeichenkette einen Zeilenumbruch einzufügen, wird in CSS das Line-Feed-Zeichen verwendet. Dieses besitzt die Adresse U+000A (\A). Wenn die Zeichenkette innerhalb des Dokuments angezeigt wird (vgl. die content-Eigenschaft), ist dieses Zeichen der Leerzeichen-Normalisierung unterworfen. Das bedeutet, dass der Umbruch erst durch die Eigenschaft white-space sichtbar gemacht werden kann (pre-Werte).

Beispiel

content: "Zeile1 \A Zeile2"; ergibt: Zeile1 Zeile2
content: "Zeile1 \A Zeile2"; white-space: pre; ergibt: Zeile1 
Zeile2

Lediglich Zeilenumbrüche und zu maskierende Sonderzeichen müssen auf diese gesonderten Arten und Weisen eingefügt werden. Das geschützte Leerzeichen (\A0, vgl. Entity  ), der weiche Trennstrich (\AD, vgl. ­) und der geschützte Trennstrich (\2011) können auch direkt eingefügt werden.