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

Question

Quels sont les caractères/symboles autorisés dans le champ CSS les sélecteurs de classe ?
Je sais que les personnages suivants sont invalide mais quels personnages sont valide ?

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

Answer 1

Vous pouvez vérifier directement à l Grammaire CSS .

En gros, 1 un nom doit commencer par un trait de soulignement ( _ ), un trait d'union ( - ), ou une lettre ( a - z ), suivi d'un nombre quelconque de traits d'union, de caractères de soulignement, de lettres ou de chiffres. Il y a un hic : si le premier caractère est un trait d'union, le second doit être 2 ê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 l'étude de l Spécification du W3C. :

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

Les identificateurs commençant par un trait d'union ou un trait de soulignement sont généralement réservés aux extensions propres à un navigateur, comme c'est le cas dans l'exemple suivant -moz-opacity .

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

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

Answer 2

À ma grande surprise, la plupart des réponses sont fausses. Il s'avère que :

Tout caractère, à l'exception de NUL, est autorisé dans les noms de classe CSS. (Si CSS contient NUL (échappé ou non), le résultat est indéfini. [ Caractères CSS ])

La réponse de Mathias Bynens liens vers explication y démos montrant comment utiliser ces noms. Par écrit dans le code CSS, un nom de classe peut avoir besoin de s'échapper mais cela ne change pas le nom de la classe. Par exemple, une représentation inutilement sur-escapée sera différente des autres représentations de ce nom, mais elle se réfère toujours 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"), de sorte que 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 les caractères d'espacement (espace, tabulation, saut de ligne, saut de page et retour chariot) dans un attribut du nom de la classe parce qu'ils séparent déjà les classes les unes des autres.

Donc, si vous avez besoin de transformer une chaîne aléatoire en un nom de classe CSS : prenez soin de NUL et d'espace, et échappez-vous (en conséquence pour CSS ou HTML). C'est fait.

Answer 3

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

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

Si vous donnez à 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>

Answer 4

Lire l'article Spécification du W3C . (il s'agit de CSS 2.1, trouvez la version appropriée pour votre hypothèse de navigateurs)

edit : le paragraphe pertinent suit :

En CSS, les identifiants (y compris les noms d'éléments, les classes et les ID dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et les caractères 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 trait d'union suivi d'un chiffre. Les identificateurs peuvent également contenir des caractères échappés et tout caractère ISO 10646 comme un code numérique (voir point suivant). Par exemple, Par exemple, l'identificateur "B&W ? être écrit comme "B\&W\ ?" ou "B \26 W \3F ".

edit 2 : comme @mipadi le souligne dans la réponse de Triptych, il y a ceci avertissement également dans la même page web :

En CSS, les identificateurs peuvent commencer par '-' (tiret) ou '_' (trait de soulignement). (tiret) ou "_" (trait de soulignement). Les mots clés et les noms de propriétés commençant par '-' ou 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

Exemple(s) :

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 l'affichage, 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 garantie de ne jamais être utilisée dans une ou un mot-clé par un utilisateur actuel ou un utilisateur de niveau actuel ou futur de CSS. Ainsi, les implémentations typiques de CSS peuvent ne pas reconnaître ces propriétés propriétés et peuvent les ignorer conformément aux règles de traitement des erreurs d'analyse. Toutefois, étant donné que le tiret initial ou le trait de soulignement fait partie de la la grammaire, les responsables de la mise en œuvre de CSS 2.1 devraient toujours être en mesure d'utiliser un analyseur un analyseur conforme à CSS, qu'il prenne en charge ou non qu'ils prennent en charge ou non les des extensions spécifiques aux fournisseurs.

Les auteurs doivent éviter les des extensions spécifiques aux fournisseurs

Answer 5

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])*

Donc, tous les caractères que vous avez énumérés, sauf " - " et " _ " ne sont pas autorisés s'ils sont utilisés directement. Mais vous pouvez les coder en utilisant une barre oblique inverse (backslash) foo\~bar ou en utilisant la notation unicode foo\7E bar .