CSS/Wertetypen/Namen und Zeichenketten
- 15min
- leicht
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[1].
- 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.
Inhaltsverzeichnis
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.
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. */
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-Zunda-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[2]. 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.
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.
\:. 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.
.\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.
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:
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\
|
Test | Dies ermöglicht Zeilenumbrüche, die der Lesbarkeit dienen. |
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.
\:. Ä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).
"\41" ergibt: A "\000285" ergibt: ʅ "\0000285" ergibt: (5 - Beachten Sie die Anzahl der Stellen in "\0000285"
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).
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.
Quellen
- ↑ CSSWG: CSS Values and Units Level 4 - Textual Values
- ↑ CSS Syntax 3 Spec: Non-ASCII Ident-Codepoints - Arbeitsstand 2023, abgerufen am 23.09.2023
