Welche Zeichen sind gültig in CSS-Klassennamen/Selektoren?

Question

Welche Zeichen/Symbole sind innerhalb der CSS-Klassenselektoren erlaubt?

Ich weiß, dass die folgenden Zeichen ungültig sind, aber welche Zeichen sind gültig?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Answer 1

Sie können direkt die CSS Grammatik überprüfen.

_Grundsätzlich1 muss ein Name mit einem Unterstrich (`), einem Bindestrich (-) oder einem Buchstaben (a–z`) beginnen, gefolgt von beliebig vielen Bindestrichen, Unterstrichen, Buchstaben oder Zahlen. Es gibt eine Ausnahme: wenn das erste Zeichen ein Bindestrich ist, muss das zweite Zeichen ein Buchstabe oder Unterstrich sein, und der Name muss mindestens 2 Zeichen lang sein.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Kurz gesagt, die vorherige Regel entspricht der folgenden, extrahiert aus der W3C Spezifikation:

In CSS können Bezeichner (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-z0-9] und ISO 10646-Zeichen U+00A0 und höher sowie den Bindestrich (-) und den Unterstrich (_) enthalten; sie können nicht mit einer Ziffer oder einem Bindestrich gefolgt von einer Ziffer beginnen. Bezeichner können auch maskierte Zeichen und jedes ISO 10646-Zeichen als numerischen Code enthalten (siehe nächster Punkt). Zum Beispiel kann der Bezeichner "B&W?" als "B&W?" oder "B\26 W\3F" geschrieben werden.

Bezeichner, die mit einem Bindestrich oder Unterstrich beginnen, sind in der Regel für browser-spezifische Erweiterungen reserviert, wie z.B. -moz-opacity.

1 Die Dinge werden durch die Verwendung maskierter Unicode-Zeichen (die wirklich niemand benutzt) etwas komplizierter gemacht.

2 Beachten Sie, dass gemäß der von mir verlinkten Grammatik eine Regel, die mit zwei Bindestrichen beginnt, z.B. --indent1, ungültig ist. Ich bin mir jedoch ziemlich sicher, dass ich das in der Praxis schon gesehen habe.

Answer 2

Zu meinem Erstaunen sind die meisten Antworten hier falsch. Es stellt sich heraus, dass:

Jedes Zeichen außer NUL ist in CSS-Klassennamen in CSS erlaubt. (Wenn CSS NUL enthält (escapet oder nicht), ist das Ergebnis undefiniert. [CSS-Zeichen]) In HTML sind jedoch dauerhaft nicht zugewiesene Codepunkte ebenfalls nicht erlaubt. Auch hat HTML keinen Weg, Leerzeichen (Leerzeichen, Tabulator, Zeilenumbruch, Formvorschub und Wagenrücklauf) in einem Klassenname-Attribut einzuschließen, da es sich hier um Klassen Listen handelt und Leerzeichen verwendet werden, um Klassennamen voneinander zu trennen.

Mathias Bynens' Antwort verlinkt zu einer Erklärung und Demos, die zeigen, wie man diese Namen verwendet. In CSS-Code geschrieben kann ein Klassenname escapet werden müssen, aber das ändert den Klassennamen nicht. Zum Beispiel wird eine unnötig über-escapte Darstellung anders aussehen als andere Darstellungen dieses Namens, bezieht sich aber immer noch auf denselben Klassennamen.

Die meisten anderen (Programmier-)Sprachen haben nicht dieses Konzept des Escapens von Variablennamen ("Identifiern"), sodass alle Darstellungen einer Variable gleich aussehen müssen. Dies ist in CSS nicht der Fall.

Also, wenn Sie eine zufällige Zeichenfolge in einen CSS-Klassennamen umwandeln müssen: achten Sie auf NUL und Leerzeichen, und escapen Sie entsprechend für CSS oder HTML. Fertig.

Answer 3

Ich habe Ihre Frage ausführlich unter CSS-Zeichen Escape-Sequenzen beantwortet. Der Artikel erklärt auch, wie man jedes Zeichen in CSS (und JavaScript) escapen kann, und ich habe ein praktisches Tool dafür erstellt. Auf dieser Seite steht:

Wenn Sie einem Element einen ID-Wert von ~!@$%^&*()_+-=,./';:"?><[]{}|`# geben würden, würde der Selektor so aussehen:

CSS:

  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    Hintergrund: hotpink;
  }

JavaScript:

  // document.getElementById oder ähnliches
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector oder ähnliches
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');

Answer 4

Lese die W3C-Spezifikation. (dies ist CSS 2.1; finde die entsprechende Version für deine Annahme von Browsern)

relevantes Absatz:

In CSS können Bezeichner (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-z0-9] und ISO 10646-Zeichen U+00A1 und höher sowie den Bindestrich (-) und den Unterstrich (_) enthalten; sie dürfen nicht mit einer Ziffer beginnen oder mit einem Bindestrich gefolgt von einer Ziffer. Bezeichner können auch escaped Zeichen und jedes ISO 10646-Zeichen als numerischen Code enthalten (siehe nächster Punkt). Zum Beispiel kann der Bezeichner "B&W?" als "B&W?" oder "B\26 W\3F" geschrieben werden.

Wie @mipadi in Kenan Banks's Antwort aufzeigt, gibt es diesen Hinweis, auch auf derselben Webseite:

In CSS können Bezeichner mit '-' (Bindestrich) oder '_' (Unterstrich) beginnen. Schlüsselwörter und Eigenschaftsnamen, die mit '-' oder '_' beginnen, sind für Anbieterspezifische Erweiterungen reserviert. Solche Anbieterspezifischen Erweiterungen sollten eine der folgenden Formate haben:

'-' + Anbieterbezeichner + '-' + sinnvoller Name
'_' + Anbieterbezeichner + '-' + sinnvoller Name

Beispiel(e):

Beispielsweise, wenn die XYZ-Organisation eigenschaft hinzufügt, um die Farbe des Rahmens auf der Ostseite des Bildschirms zu beschreiben, könnten sie es -xyz-border-east-color nennen.

Weitere bekannte Beispiele:

-moz-box-sizing
-moz-border-radius
-wap-accesskey

Ein anfänglicher Bindestrich oder Unterstrich ist garantiert nie von einer aktuellen oder zukünftigen Stufe von CSS bei einer Eigenschaft oder Schlüsselwort verwendet zu werden. Typische CSS-Implementierungen erkenne solche Eigenschaften möglicherweise nicht und ignorieren sie entsprechend den Regeln für die Behandlung von Syntaxfehlern. Allerdings, weil der anfängliche Bindestrich oder Unterstrich Teil der Grammatik ist, sollten CSS 2.1-Implementierer immer in der Lage sein, einen CSS-konformen Parser zu verwenden, obwohl sie Anbieterspezifische Erweiterungen unterstützen oder nicht.

Autoren sollten Anbieterspezifische Erweiterungen vermeiden

Answer 5

Der komplette reguläre Ausdruck lautet:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Also sind alle aufgelisteten Zeichen, außer "-" und "_", nicht erlaubt, wenn sie direkt verwendet werden. Aber du kannst sie mit einem Backslash kodieren foo\~bar oder die Unicode-Notation verwenden foo\7E bar.