web-dev-qa-db-fra.com

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

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

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

Vous pouvez vérifier directement sur le grammaire CSS .

Fondamentalement 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, caractères de soulignement, lettres ou chiffres. Il y a un piège: si le premier caractère est un trait d'union, le deuxième caractère doit2 ê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 la suivante, extraite du spéc. W3C :

En CSS, les identifiants (y compris les noms d'éléments, les classes et les identifiants dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et ISO 10646 caractères U + 00A1 et supérieurs, ainsi que 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 identifiants peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir élément suivant). Par exemple, l'identifiant "B & W?" peut être écrit comme "B\& W \?" ou "B\26 W\3F".

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

1 Tout cela est un peu compliqué par l'inclusion de caractères Unicode d'échappement (que personne n'utilise vraiment).

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

988
Triptych

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

Tous les caractères sauf NUL sont autorisés dans les noms de classe CSS en CSS. (Si CSS contient NUL (avec ou sans caractères d'échappement), le résultat est indéfini. [- caractères CSS ]

réponse de Mathias Bynens liens vers explication et démos montrant comment utiliser ces noms. En écriture en code CSS, un nom de classe peut nécessiter un échappement , mais cela ne modifie pas le nom de la classe. Par exemple. une représentation inutilement échappée aura l'air 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’échappements de 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 caractères d'espacement (espace, tabulation, saut de ligne, saut de formulaire et retour chariot) dans un attribut du nom de classe , car ils sont déjà séparés classes les uns 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é.

159
Robert Siemer

Lisez le Spéc. W3C . (Ceci est CSS 2.1, trouvez la version appropriée pour votre supposition de navigateurs)

edit: le paragraphe pertinent suit:

En CSS, les identifiants (y compris les noms d'éléments, les classes et les identifiants dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et ISO 10646 caractères U + 00A1 et supérieurs, ainsi que 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 identifiants peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir élément suivant). Par exemple, l'identifiant "B & W?" peut être écrit comme "B\& W \?" ou "B\26 W\3F".

modifier 2: comme le souligne @mipadi dans la réponse de Triptych, il y a ceci avertissement , également dans 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

Il est garanti qu'un tiret ou un soulignement initial ne sera jamais utilisé dans une propriété ou un mot-clé par aucun niveau CSS actuel ou futur. Ainsi, les implémentations CSS typiques peuvent ne pas reconnaître ces propriétés et les ignorer conformément aux règles de traitement des erreurs d'analyse. Toutefois, étant donné que le tiret ou le soulignement initial fait partie de la grammaire, les implémenteurs CSS 2.1 doivent toujours pouvoir utiliser un analyseur conforme à CSS, qu'ils prennent en charge les extensions spécifiques du fournisseur.

Les auteurs doivent éviter les extensions spécifiques aux vendeurs

67
Jason S

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 aussi fait n outil pratique pour cela. De cette page:

Si vous attribuez à un élément une valeur d'identifiant égale à ~!@$%^&*()_+-=,./';:"?><[]{}|`#, le sélecteur se présentera ainsi:

CSS: 

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

JavaScript: 

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

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 les caractères de votre liste, à 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\~bar ou en utilisant la notation unicode foo\7E bar.

24
Gumbo

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 les classes CSS dont le nom commence par un numéro sont valides?
8
D.Tate

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

5
Marius

Je crois comprendre que le trait de soulignement est techniquement valide. Check-out:

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

"... les corrections aux spécifications publiées au début de 2001 ont rendu les soulignés 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, depuis longtemps redondants.

4
mofaha