Quels caractères sont valides dans les noms / sélecteurs de classe CSS?

Quels caractères / symboles sont autorisés dans les sélecteurs de classe CSS ?
Je sais que les caractères suivants ne sont pas valides , mais quels caractères sont valides ?

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

Vous pouvez vérifier directement à la grammaire CSS .

Fondamentalement ¹ , un nom doit commencer par un trait de soulignement ( _), un trait d'union ( -) ou une lettre ( a- z), suivi d'un nombre quelconque de tirets, traits de soulignement, lettres ou chiffres. Il y a un hic: si le premier caractère est un trait d'union, le deuxième caractère doit ² être une lettre ou un trait de soulignement, et le nom doit comporter au moins 2 caractères.

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

En bref, la règle précédente se traduit par ce qui suit, extrait de la spécification W3C. :

En CSS, les identificateurs (y compris les noms d'élément, les classes et les ID dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et ISO 10646 U + 00A1 et supérieurs, plus le trait d'union (-) et le trait de soulignement (_) ; ils ne peuvent pas commencer par un chiffre ou un tiret suivi d'un chiffre. Les identificateurs peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir l'élément suivant). Par exemple, l'identifiant "B&W?" peut s'écrire "B \ & W \?" ou "B \ 26 W \ 3F".

Les identifiants commençant par un trait d'union ou un trait de soulignement sont généralement réservés aux extensions spécifiques au navigateur, comme dans -moz-opacity.

¹ Tout est rendu un peu plus compliqué par l'inclusion de caractères unicode échappés (que personne n'utilise vraiment).

² Notez que, selon la grammaire que j'ai liée, une règle commençant par DEUX traits d'union, par exemple --indent1, n'est pas valide. Cependant, je suis presque sûr d'avoir vu cela en pratique.

À ma grande surprise, la plupart des réponses ici sont fausses. Il se trouve que:

Tout caractère sauf NUL est autorisé dans les noms de classe CSS en CSS. (Si CSS contient NUL (échappé ou non), le résultat n'est pas défini. [ CSS-caractères ])

La réponse de Mathias Bynens contient des liens vers des explications et des démos montrant comment utiliser ces noms.Écrit dans le code CSS, un nom de classe peut nécessiter un échappement , mais cela ne change pas le nom de la classe. Par exemple, une représentation inutilement trop échappée sera différente des autres représentations de ce nom, mais elle fait toujours référence au même nom de classe.

La plupart des autres langages (de programmation) n'ont pas ce concept d'échappement des noms de variables («identificateurs»), donc toutes les représentations d'une variable doivent avoir la même apparence. Ce n'est pas le cas en CSS.

Notez qu'en HTML, il n'y a aucun moyen d'inclure des caractères d'espace (espace, tabulation, saut de ligne, saut de page et retour chariot) dans un attribut de nom de classe , car ils séparent déjà les classes les unes des autres.

Donc, si vous devez transformer une chaîne aléatoire en un nom de classe CSS: prenez soin de NUL et de l'espace, et échappez (en conséquence pour CSS ou HTML). Terminé.

J'ai répondu à votre question en profondeur ici: http://mathiasbynens.be/notes/css-escapes

L'article explique également comment échapper n'importe quel caractère en CSS (et JavaScript), et j'ai également créé un outil pratique pour cela. Depuis cette page:

Si vous deviez donner à un élément une valeur d'ID de ~!@$%^&*()_+-=,./';:"?><[]{}|`#, le sélecteur ressemblerait à ceci:

CSS:

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

JavaScript:

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

Lire la spécification W3C . (c'est CSS 2.1, trouvez la version appropriée pour votre hypothèse de navigateurs)

modifier: le paragraphe pertinent suit:

En CSS, les identificateurs (y compris les noms d'élément, les classes et les ID dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et ISO 10646 U + 00A1 et supérieurs, plus le trait d'union (-) et le trait de soulignement (_) ; ils ne peuvent pas commencer par un chiffre ou un tiret suivi d'un chiffre. Les identificateurs peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir l'élément suivant). Par exemple, l'identifiant "B&W?" peut s'écrire "B \ & W \?" ou "B \ 26 W \ 3F".

edit 2: comme le souligne @mipadi dans la réponse de Triptych, il y a cette mise en garde , également sur la même page Web:

En CSS, les identifiants peuvent commencer par «-» (tiret) ou «_» (trait de soulignement). Les mots clés et les noms de propriété commençant par «-» ou «_» sont réservés aux extensions spécifiques au fournisseur. Ces extensions spécifiques au fournisseur doivent avoir l'un des formats suivants:

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

Exemples):

Par exemple, si l'organisation XYZ a ajouté une propriété pour décrire la couleur de la bordure du côté est de l'écran, elle pourrait l'appeler -xyz-border-east-color.

Autres exemples connus:

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

Un tiret initial ou un trait de soulignement est garanti de ne jamais être utilisé dans une propriété ou un mot clé par n'importe quel niveau actuel ou futur de CSS. Ainsi, les implémentations CSS typiques peuvent ne pas reconnaître ces propriétés et peuvent les ignorer conformément aux règles de gestion des erreurs d'analyse. Cependant, comme le tiret ou le trait de soulignement initial fait partie de la grammaire, les implémenteurs CSS 2.1 devraient toujours être en mesure d'utiliser un analyseur conforme à CSS, qu'ils prennent en charge ou non des extensions spécifiques au fournisseur.

Les auteurs doivent éviter les extensions spécifiques au fournisseur

L'expression régulière complète est:

-?(?:[_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])*

Ainsi, tous vos personnages répertoriés, à l'exception de " -" et " _", ne sont pas autorisés s'ils sont utilisés directement. Mais vous pouvez les encoder en utilisant une barre oblique inverse foo\~barou en utilisant la notation unicode foo\7E bar.

Pour ceux qui recherchent une solution de contournement, vous pouvez utiliser un sélecteur d'attribut, par exemple, si votre classe commence par un nombre. Changement:

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

pour ça:

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

De plus, s'il y a plusieurs classes, vous devrez les spécifier dans le sélecteur je pense.

Sources:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Existe-t-il une solution de contournement pour rendre valides les classes CSS dont les noms commencent par des nombres?

Je crois comprendre que le soulignement est techniquement valable. Check-out:

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

"... les errata des spécifications publiées début 2001 ont rendu les soulignements légaux pour la première fois."

L'article lié ci-dessus dit de ne jamais les utiliser, puis donne une liste des navigateurs qui ne les prennent pas en charge, qui sont tous, en termes de nombre d'utilisateurs au moins, redondants depuis longtemps.

Pour les classes et les ID HTML5 / CSS3 peuvent commencer par des nombres.

En partant de la réponse de @ Triptych, vous pouvez utiliser les 2 correspondances d'expression régulière suivantes pour rendre une chaîne valide:

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

Il s'agit d'une correspondance inverse qui sélectionne tout ce qui n'est pas une lettre, un chiffre, un tiret ou un trait de soulignement pour un retrait facile.

^-*[0-9]+

Cela correspond à 0 ou 1 tirets suivi d'un ou plusieurs chiffres au début d'une chaîne, également pour une suppression facile.

Comment je l'utilise en PHP:

//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 : '';