Benutzer:Rolf b/Namen und Zeichenketten

In Arbeit - Integriert "Schlüsselwörter und Zeichenketten" und "Namen".

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.

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 selbstvergebene 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.

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 Leerraum wie   sind erlaubt, aber nicht zu empfehlen!
• 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.

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|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ßene 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.

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.