CSS/Wertetypen/Schlüsselwörter und Zeichenketten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

CSS unterscheidet zwei Sorten von Zeichenketten.

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.

Beispiel
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;)

Zeichen maskieren[Bearbeiten]

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.

Beispiel
"Das ist ein Backslash: \\." ergibt: Das ist ein Backslash: \.
"\"" ergibt: " - analog: '\'' ergibt: '
'Te\
st:' ergibt: 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 (inclusive der Leerstelle hinter dem a!

Sonderzeichen einfügen[Bearbeiten]

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[Bearbeiten]

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.