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

Welche Zeichen / Symbole sind in den CSS- Klassenselektoren zulässig ?
Ich weiß, dass die folgenden Zeichen ungültig sind , aber welche Zeichen sind gültig ?

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

Sie können direkt in der CSS-Grammatik überprüfen .

Grundsätzlich ¹ muss ein Name mit einem Unterstrich (beginnen _), einen Bindestrich ( -) oder einen Brief ( a- z), gefolgt von einer beliebigen Anzahl von Bindestrichen, Unterstrichen, Buchstaben oder Zahlen. Es gibt einen Haken: Wenn das erste Zeichen ein Bindestrich ist, muss das zweite Zeichen ² ein Buchstabe oder ein Unterstrich sein und der Name muss mindestens 2 Zeichen lang sein.

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

Kurz gesagt, die vorherige Regel wird wie folgt übersetzt und aus der W3C-Spezifikation extrahiert . ::

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 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 die Kennung "B & W?" kann geschrieben werden als "B \ & W \?" oder "B \ 26 W \ 3F".

Bezeichner, die mit einem Bindestrich oder Unterstrich beginnen, sind normalerweise für browserspezifische Erweiterungen reserviert, wie in -moz-opacity .

¹ Durch die Aufnahme von maskierten Unicode-Zeichen (die niemand wirklich verwendet) wird alles etwas komplizierter.

² Beachten Sie, dass gemäß der von mir verknüpften Grammatik eine Regel, die mit ZWEI Bindestrichen beginnt, z --indent1. B. ungültig ist. Ich bin mir jedoch ziemlich sicher, dass ich dies in der Praxis gesehen habe.

Zu meiner Überraschung sind die meisten Antworten hier falsch. Es stellt sich heraus, dass:

Jedes Zeichen außer NUL ist in CSS-Klassennamen in CSS zulässig. (Wenn CSS NUL enthält (maskiert oder nicht), ist das Ergebnis undefiniert. [ CSS-Zeichen ])

Mathias Bynens' Antwort Links zu Erklärungen und Demos zeigen , wie diese Namen zu verwenden. In CSS-Code geschrieben, muss ein Klassenname möglicherweise maskiert werden werden, dies ändert jedoch nichts am Klassennamen. Beispielsweise sieht eine unnötig überstrichene Darstellung anders aus als andere Darstellungen dieses Namens, bezieht sich jedoch immer noch auf denselben Klassennamen.

Die meisten anderen (Programmier-) Sprachen haben nicht das Konzept, Variablennamen („Bezeichner“) zu maskieren, daher müssen alle Darstellungen einer Variablen gleich aussehen. Dies ist in CSS nicht der Fall.

Beachten Sie, dass es in HTML keine Möglichkeit gibt, Leerzeichen (Leerzeichen, Tabulator, Zeilenvorschub, Formularvorschub und Wagenrücklauf) in ein Klassennamenattribut aufzunehmen , da sie bereits Klassen voneinander trennen.

Wenn Sie also eine zufällige Zeichenfolge in einen CSS-Klassennamen umwandeln müssen: Achten Sie auf NUL und Leerzeichen und maskieren Sie (entsprechend für CSS oder HTML). Erledigt.

Ich habe Ihre Frage hier ausführlich beantwortet: http://mathiasbynens.be/notes/css-escapes

Der Artikel erklärt auch, wie man Zeichen in CSS (und JavaScript) maskiert, und ich habe auch dafür ein praktisches Tool erstellt . Von dieser Seite:

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

CSS:

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

JavaScript:

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

Lesen Sie die W3C-Spezifikation . (Dies ist CSS 2.1. Finden Sie die geeignete Version für Ihre Annahme von Browsern.)

bearbeiten: relevanter Absatz folgt:

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 können nicht mit einer Ziffer oder einem Bindestrich gefolgt von einer Ziffer beginnen. Bezeichner können auch maskierte Zeichen und beliebige ISO 10646-Zeichen als numerischen Code enthalten (siehe nächster Punkt). Zum Beispiel die Kennung "B & W?" kann geschrieben werden als "B \ & W \?" oder "B \ 26 W \ 3F".

edit 2: wie @mipadi in Triptychs Antwort hervorhebt, gibt es diese Einschränkung , 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 herstellerspezifische Erweiterungen reserviert. Solche herstellerspezifischen Erweiterungen sollten eines der folgenden Formate haben:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Beispiel (e):

Wenn die XYZ-Organisation beispielsweise eine Eigenschaft hinzugefügt hat, um die Farbe des Rahmens auf der Ostseite der Anzeige zu beschreiben, wird sie möglicherweise als -xyz-border-east-color bezeichnet.

Andere bekannte Beispiele:

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

Es wird garantiert, dass ein anfänglicher Bindestrich oder Unterstrich niemals in einer Eigenschaft oder einem Schlüsselwort von einer aktuellen oder zukünftigen CSS-Ebene verwendet wird. Daher erkennen typische CSS-Implementierungen solche Eigenschaften möglicherweise nicht und ignorieren sie möglicherweise gemäß den Regeln für die Behandlung von Analysefehlern. Da der erste Bindestrich oder Unterstrich Teil der Grammatik ist, sollten CSS 2.1-Implementierer immer in der Lage sein, einen CSS-konformen Parser zu verwenden, unabhängig davon, ob sie herstellerspezifische Erweiterungen unterstützen oder nicht.

Autoren sollten herstellerspezifische Erweiterungen vermeiden

Der vollständige 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])*

Daher sind alle aufgelisteten Zeichen außer " -" und " _" nicht zulässig, wenn sie direkt verwendet werden. Sie können sie jedoch mit einem Backslash foo\~baroder der Unicode-Notation codieren foo\7E bar.

Für diejenigen, die nach einer Problemumgehung suchen, können Sie beispielsweise eine Attributauswahl verwenden, wenn Ihre Klasse mit einer Zahl beginnt. Veränderung:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

dazu:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Wenn es mehrere Klassen gibt, müssen Sie sie meiner Meinung nach im Selektor angeben.

Quellen:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Gibt es eine Problemumgehung, um CSS-Klassen mit Namen zu erstellen, die mit gültigen Zahlen beginnen?

Mein Verständnis ist, dass der Unterstrich technisch gültig ist. Auschecken:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... Errata gemäß der Anfang 2001 veröffentlichten Spezifikation unterstrichen erstmals legal."

Der oben verlinkte Artikel besagt, dass sie niemals verwendet werden, und enthält dann eine Liste von Browsern, die sie nicht unterstützen. Alle Browser sind zumindest in Bezug auf die Anzahl der Benutzer lange redundant.

Bei HTML5 / CSS3 können Klassen und IDs mit Zahlen beginnen.

Wenn Sie die Antwort von @ Triptych verlassen, können Sie die folgenden 2 Regex-Übereinstimmungen verwenden, um eine Zeichenfolge gültig zu machen:

[^a-z0-9A-Z_-]

Dies ist eine umgekehrte Übereinstimmung, bei der alles ausgewählt wird, was kein Buchstabe, keine Zahl, kein Bindestrich oder kein Unterstrich ist, um das Entfernen zu vereinfachen.

^-*[0-9]+

Dies entspricht 0 oder 1 Strichen, gefolgt von 1 oder mehr Zahlen am Anfang einer Zeichenfolge, auch zum einfachen Entfernen.

Wie ich es in PHP benutze:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';