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


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

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

1053
2018-01-15 23:37


origine


Réponses:


Vous pouvez vérifier directement au Grammaire CSS.

Fondamentalement1, un nom doit commencer par un trait de soulignement (_), un trait d'union (-), ou une lettre (a-z), suivi de n'importe quel nombre de traits d'union, de traits de soulignement, de lettres ou de chiffres. Il y a un crochet: si le premier caractère est un trait d'union, le second 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-]*

Les identificateurs 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.

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 liée, une règle commençant par DEUX traits d'union, par ex. --indent1, est invalide. Cependant, je suis presque sûr d'avoir vu cela en pratique.


914
2018-01-15 23:42



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

Tous les caractères sauf NUL sont autorisés dans les noms de classes CSS dans 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 et démos montrant comment utiliser ces noms. Écrit en code CSS, un nom de classe peut avoir besoin d'échapper, mais cela ne change pas le nom de la classe. Par exemple. une représentation inutilement surchargée apparaîtra 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 ("identifiants"), 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 caractères espace (espace, tabulation, saut de ligne, saut de page et retour chariot) dans un attribut de nom de classe, parce qu'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é.


138
2017-07-18 12:32



Lis le W3C spec. (Ceci est CSS 2.1, trouvez la version appropriée pour votre hypothèse de navigateurs)

modifier: le paragraphe pertinent suit:

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

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

En CSS, les identifiants peuvent commencer par '-'   (tiret) ou '_' (trait de soulignement). Mots clés   et les noms de propriétés commençant par '-'   ou '_' sont réservés pour   extensions spécifiques au fournisseur. Tel   les 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 été ajoutée   une propriété pour décrire la couleur de   la frontière sur le côté est de la   affichage, ils pourraient l'appeler   -xyz-border-east-color.

D'autres exemples connus:

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

Un tiret ou un soulignement initial est   garanti pour ne jamais être utilisé dans un   propriété ou mot-clé par tout courant ou   niveau futur de CSS. Ainsi CSS typique   implémentations peuvent ne pas reconnaître   propriétés et peuvent les ignorer   selon les règles de manipulation   erreurs d'analyse. Cependant, parce que le   le tiret ou le soulignement initial fait partie de   la grammaire, les implémenteurs CSS 2.1   devrait toujours être en mesure d'utiliser un   Analyseur conforme CSS, qu'il soit ou non   ils prennent en charge tout fournisseur spécifique   extensions.

Les auteurs doivent éviter les problèmes spécifiques aux fournisseurs   extensions


64
2018-01-15 23:45



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

L'article explique également comment échapper tout caractère en CSS (et JavaScript), et j'ai fait un outil pratique pour cela aussi. De 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>

58
2017-07-06 06:41



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, tout votre personnage énuméré sauf "-" 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.


21
2018-01-16 00:05



Pour les classes et les identifiants HTML5 / CSS3, les numéros peuvent commencer.


6
2017-10-12 14:04



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 :) */

Aussi, 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 créer des classes CSS dont les noms commencent par des nombres valides?

6
2018-06-23 17:33