Karakter mana yang valid dalam nama / penyeleksi kelas CSS?

Karakter / simbol apa yang diperbolehkan dalam pemilih kelas CSS ?
Saya tahu bahwa karakter berikut tidak valid , tetapi karakter apa yang valid ?

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

Anda dapat memeriksa langsung di tata bahasa CSS .

Pada dasarnya ¹ , nama harus dimulai dengan garis bawah ( _), tanda hubung ( -), atau huruf ( a- z), diikuti oleh sejumlah tanda hubung, garis bawah, huruf, atau angka. Ada tangkapan: jika karakter pertama adalah tanda hubung, karakter kedua harus ² menjadi huruf atau garis bawah, dan nama harus minimal 2 karakter.

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

Singkatnya, aturan sebelumnya diterjemahkan menjadi yang berikut, diekstraksi dari spesifikasi W3C. :

Dalam CSS, pengidentifikasi (termasuk nama elemen, kelas, dan ID dalam pemilih) hanya dapat berisi karakter [a-z0-9] dan ISO 10646 karakter U + 00A1 dan lebih tinggi, ditambah dengan tanda hubung (-) dan garis bawah (_) ; mereka tidak bisa mulai dengan angka, atau tanda hubung diikuti oleh angka. Pengidentifikasi juga dapat berisi karakter yang lolos dan karakter ISO 10646 apa pun sebagai kode numerik (lihat item berikutnya). Misalnya, pengidentifikasi "B&W?" dapat ditulis sebagai "B \ & W \?" atau "B \ 26 W \ 3F".

Pengidentifikasi yang dimulai dengan tanda hubung atau garis bawah biasanya disediakan untuk ekstensi khusus browser, seperti pada -moz-opacity.

¹ Semuanya dibuat sedikit lebih rumit dengan masuknya karakter unicode yang lolos (yang tidak ada yang benar-benar menggunakan).

² Perhatikan bahwa, menurut tata bahasa yang saya tautkan, aturan yang dimulai dengan DUA tanda hubung, misalnya --indent1, tidak valid. Namun, saya cukup yakin saya sudah melihat ini dalam praktek.

Yang mengejutkan saya, sebagian besar jawaban di sini salah. Ternyata itu:

Karakter apa pun kecuali NUL diizinkan dalam nama kelas CSS di CSS. (Jika CSS berisi NUL (lolos atau tidak), hasilnya tidak ditentukan. [ CSS-karakter ])

Tautan jawaban Mathias Bynens ke penjelasan dan demo menunjukkan cara menggunakan nama-nama ini. Ditulis dalam kode CSS, nama kelas mungkin perlu diloloskan , tetapi itu tidak mengubah nama kelas. Misalnya, representasi yang tidak perlu diloloskan secara berlebihan akan terlihat berbeda dari representasi lain dari nama itu, tetapi itu masih merujuk pada nama kelas yang sama.

Sebagian besar bahasa lain (pemrograman) tidak memiliki konsep melarikan diri dari nama variabel ("pengidentifikasi"), sehingga semua representasi dari suatu variabel harus terlihat sama. Ini tidak terjadi di CSS.

Perhatikan bahwa dalam HTML tidak ada cara untuk memasukkan karakter spasi (spasi, tab, umpan baris, umpan form, dan carriage return) dalam atribut nama kelas , karena mereka sudah memisahkan kelas dari satu sama lain.

Jadi, jika Anda perlu mengubah string acak menjadi nama kelas CSS: jaga NUL dan spasi, dan keluar (sesuai untuk CSS atau HTML). Selesai

Saya telah menjawab pertanyaan Anda secara mendalam di sini: http://mathiasbynens.be/notes/css-escapes

Artikel ini juga menjelaskan cara keluar dari karakter apa pun di CSS (dan JavaScript), dan saya juga membuat alat yang berguna untuk ini. Dari halaman itu:

Jika Anda memberi elemen nilai ID ~!@$%^&*()_+-=,./';:"?><[]{}|`#, pemilih akan terlihat seperti ini:

CSS:

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

JavaScript:

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

Baca spesifikasi W3C . (Ini adalah CSS 2.1, cari versi yang sesuai untuk asumsi Anda tentang peramban)

sunting: paragraf yang relevan berikut:

Dalam CSS, pengidentifikasi (termasuk nama elemen, kelas, dan ID dalam pemilih) hanya dapat berisi karakter [a-z0-9] dan ISO 10646 karakter U + 00A1 dan lebih tinggi, ditambah dengan tanda hubung (-) dan garis bawah (_) ; mereka tidak bisa mulai dengan angka, atau tanda hubung diikuti oleh angka. Pengidentifikasi juga dapat berisi karakter yang lolos dan karakter ISO 10646 apa pun sebagai kode numerik (lihat item berikutnya). Misalnya, pengidentifikasi "B&W?" dapat ditulis sebagai "B \ & W \?" atau "B \ 26 W \ 3F".

sunting 2: seperti yang ditunjukkan @mipadi dalam jawaban Triptych, ada peringatan ini , juga di laman web yang sama:

Dalam CSS, pengidentifikasi dapat dimulai dengan '-' (tanda hubung) atau '_' (garis bawah). Kata kunci dan nama properti yang dimulai dengan '-' atau '_' dicadangkan untuk ekstensi khusus vendor. Ekstensi khusus vendor tersebut harus memiliki salah satu format berikut:

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

Contoh:

Misalnya, jika organisasi XYZ menambahkan properti untuk menggambarkan warna perbatasan di sisi timur tampilan, mereka mungkin menyebutnya -xyz-border-east-color.

Contoh lain yang diketahui:

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

Tanda hubung awal atau garis bawah dijamin tidak akan pernah digunakan di properti atau kata kunci oleh tingkat CSS saat ini atau di masa depan. Jadi implementasi CSS yang khas mungkin tidak mengenali properti seperti itu dan mungkin mengabaikannya sesuai dengan aturan untuk menangani kesalahan parsing. Namun, karena tanda hubung awal atau garis bawah adalah bagian dari tata bahasa, pelaksana CSS 2.1 harus selalu dapat menggunakan parser yang menyesuaikan CSS, terlepas dari apakah mereka mendukung ekstensi khusus vendor.

Penulis harus menghindari ekstensi khusus vendor

Ekspresi reguler lengkap adalah:

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

Jadi semua karakter Anda yang terdaftar kecuali " -" dan " _" tidak diizinkan jika digunakan secara langsung. Tetapi Anda bisa menyandikannya menggunakan backslash foo\~baratau menggunakan notasi unicode foo\7E bar.

Bagi mereka yang mencari solusinya, Anda bisa menggunakan pemilih atribut, misalnya, jika kelas Anda dimulai dengan angka. Perubahan:

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

untuk ini:

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

Juga, jika ada beberapa kelas, Anda harus menentukannya di pemilih saya pikir.

Sumber:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Apakah ada solusi untuk membuat kelas CSS dengan nama yang dimulai dengan angka valid?

Pemahaman saya adalah bahwa garis bawah secara teknis valid. Periksa:

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

"... kesalahan dengan spesifikasi yang diterbitkan pada awal 2001 membuat menggarisbawahi hukum untuk pertama kalinya."

Artikel yang ditautkan di atas mengatakan tidak pernah menggunakannya, lalu memberikan daftar peramban yang tidak mendukung mereka, yang semuanya, dalam hal jumlah pengguna setidaknya, lama-lama.

Untuk HTML5 / CSS3 kelas dan ID dapat dimulai dengan angka.

Keluar dari jawaban @ Triptych, Anda dapat menggunakan 2 pencocokan regex berikut untuk membuat string valid:

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

Ini adalah pasangan terbalik yang memilih apa pun yang bukan huruf, angka, tanda hubung atau garis bawah untuk memudahkan penghapusan.

^-*[0-9]+

Ini cocok dengan 0 atau 1 tanda hubung diikuti oleh 1 atau lebih angka di awal string, juga agar mudah dihapus.

Bagaimana saya menggunakannya di 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 : '';