Quali caratteri sono validi nei nomi / selettori di classi CSS?

Quali caratteri / simboli sono ammessi nei selettori di classe CSS ?
So che i seguenti caratteri non sono validi , ma quali caratteri sono validi ?

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

Puoi controllare direttamente nella grammatica CSS .

Fondamentalmente ¹ , un nome deve iniziare con un trattino basso ( _), un trattino ( -) o una lettera ( a- z), seguito da un numero qualsiasi di trattini, caratteri di sottolineatura, lettere o numeri. C'è un problema: se il primo carattere è un trattino, il secondo personaggio deve ² essere una lettera o di sottolineatura e il nome deve essere di almeno 2 caratteri.

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

In breve, la regola precedente si traduce in quella seguente, estratta dalle specifiche del W3C. :

Nel CSS, gli identificatori (inclusi nomi di elementi, classi e ID nei selettori) possono contenere solo i caratteri [a-z0-9] e ISO 10646 caratteri U + 00A1 e versioni successive, più il trattino (-) e il trattino basso (_) ; non possono iniziare con una cifra o un trattino seguito da una cifra. Gli identificatori possono anche contenere caratteri di escape e qualsiasi carattere ISO 10646 come codice numerico (vedere l'elemento successivo). Ad esempio, l'identificatore "B&W?" può essere scritto come "B \ & W \?" o "B \ 26 W \ 3F".

Gli identificatori che iniziano con un trattino o un trattino basso sono in genere riservati alle estensioni specifiche del browser, come in -moz-opacity.

¹ Tutto è reso un po 'più complicato dall'inclusione di caratteri unicode sfuggiti (che nessuno usa davvero).

² Si noti che, secondo la grammatica che ho collegato, una regola che inizia con DUE trattini, ad esempio --indent1, non è valida. Tuttavia, sono abbastanza sicuro di averlo visto in pratica.

Con mia sorpresa, la maggior parte delle risposte qui sono sbagliate. Si scopre che:

Qualsiasi carattere tranne NUL è consentito nei nomi di classe CSS in CSS. (Se CSS contiene NUL (con escape o no), il risultato non è definito. [ Caratteri CSS ])

La risposta di Mathias Bynens si collega a spiegazioni e dimostrazioni che mostrano come utilizzare questi nomi. Scritto nel codice CSS, potrebbe essere necessario scappare un nome di classe , ma ciò non cambia il nome della classe. Ad esempio, una rappresentazione inutilmente sovrascritta apparirà diversa dalle altre rappresentazioni con quel nome, ma si riferisce comunque allo stesso nome di classe.

La maggior parte degli altri linguaggi (di programmazione) non ha quel concetto di escape di nomi di variabili ("identificatori"), quindi tutte le rappresentazioni di una variabile devono avere lo stesso aspetto. Questo non è il caso dei CSS.

Si noti che in HTML non è possibile includere caratteri di spazio (spazio, tabulazione, avanzamento riga, avanzamento modulo e ritorno a capo) in un attributo nome classe , poiché già separano le classi l'una dall'altra.

Quindi, se hai bisogno di trasformare una stringa casuale in un nome di classe CSS: prenditi cura di NUL e spazio, e scappa (di conseguenza per CSS o HTML). Fatto.

Ho risposto alla tua domanda in modo approfondito qui: http://mathiasbynens.be/notes/css-escapes

L'articolo spiega anche come sfuggire a qualsiasi personaggio in CSS (e JavaScript) e ho creato uno strumento utile anche per questo. Da quella pagina:

Se dovessi dare a un elemento un valore ID di ~!@$%^&*()_+-=,./';:"?><[]{}|`#, il selettore sarebbe simile al seguente:

CSS:

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

JavaScript:

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

Leggi le specifiche del W3C . (questo è CSS 2.1, trova la versione appropriata per la tua assunzione di browser)

modifica: segue il paragrafo pertinente:

Nel CSS, gli identificatori (inclusi nomi di elementi, classi e ID nei selettori) possono contenere solo i caratteri [a-z0-9] e ISO 10646 caratteri U + 00A1 e versioni successive, più il trattino (-) e il trattino basso (_) ; non possono iniziare con una cifra o un trattino seguito da una cifra. Gli identificatori possono anche contenere caratteri di escape e qualsiasi carattere ISO 10646 come codice numerico (vedere l'elemento successivo). Ad esempio, l'identificatore "B&W?" può essere scritto come "B \ & W \?" o "B \ 26 W \ 3F".

modifica 2: come sottolinea @mipadi nella risposta di Triptych, c'è questo avvertimento , anche nella stessa pagina web:

Nel CSS, gli identificatori possono iniziare con '-' (trattino) o '_' (trattino basso). Le parole chiave e i nomi delle proprietà che iniziano con '-' o '_' sono riservati per le estensioni specifiche del fornitore. Tali estensioni specifiche del fornitore dovrebbero avere uno dei seguenti formati:

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

Esempio (s):

Ad esempio, se l'organizzazione XYZ ha aggiunto una proprietà per descrivere il colore del bordo sul lato est del display, potrebbe chiamarlo -xyz-border-east-color.

Altri esempi noti:

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

Un trattino iniziale o un trattino di sottolineatura iniziale è garantito per non essere mai usato in una proprietà o parola chiave da alcun livello attuale o futuro di CSS. Pertanto, le implementazioni CSS tipiche potrebbero non riconoscere tali proprietà e ignorarle in base alle regole per la gestione degli errori di analisi. Tuttavia, poiché il trattino iniziale o il trattino basso fa parte della grammatica, gli implementatori CSS 2.1 dovrebbero sempre essere in grado di utilizzare un parser conforme a CSS, indipendentemente dal fatto che supportino o meno estensioni specifiche del fornitore.

Gli autori dovrebbero evitare estensioni specifiche del fornitore

L'espressione regolare completa è:

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

Quindi, tutti i personaggi elencati tranne " -" e " _" non sono consentiti se utilizzati direttamente. Ma puoi codificarli usando una barra rovesciata foo\~baro usando la notazione unicode foo\7E bar.

Per coloro che cercano una soluzione alternativa, è possibile utilizzare un selettore di attributi, ad esempio, se la classe inizia con un numero. Modificare:

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

a questo:

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

Inoltre, se ci sono più classi, dovrai specificarle nel selettore, credo.

fonti:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Esiste una soluzione alternativa per rendere valide le classi CSS con nomi che iniziano con numeri?

La mia comprensione è che il carattere di sottolineatura è tecnicamente valido. Check-out:

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

"... errata alle specifiche pubblicate all'inizio del 2001 ha reso i caratteri di sottolineatura legali per la prima volta."

L'articolo sopra riportato dice che non li usano mai, quindi fornisce un elenco di browser che non li supportano, che sono, almeno in termini di numero di utenti, a lunga ridondanza.

Per HTML5 / CSS3 le classi e gli ID possono iniziare con i numeri.

Uscendo dalla risposta di @ Triptych, puoi usare le seguenti 2 corrispondenze regex per rendere valida una stringa:

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

Questa è una corrispondenza inversa che seleziona tutto ciò che non è una lettera, un numero, un trattino o un trattino basso per una facile rimozione.

^-*[0-9]+

Questo corrisponde a 0 o 1 trattini seguiti da 1 o più numeri all'inizio di una stringa, anche per una facile rimozione.

Come lo uso in 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 : '';