CSS sınıf adları / seçicilerinde hangi karakterler geçerlidir?

CSS sınıfı seçicileri içinde hangi karakterlere / simgelere izin verilir ?
Aşağıdaki karakterlerin geçersiz olduğunu biliyorum , ancak hangi karakterler geçerli ?

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

Doğrudan CSS dilbilgisini kontrol edebilirsiniz .

Temel olarak ¹ , bir adın alt çizgi ( _), kısa çizgi ( -) veya harf ( a- z) ile başlaması ve ardından istediğiniz sayıda tire, alt çizgi, harf veya sayı içermesi gerekir . Bir yakalama vardır: ilk karakter bir kısa çizgi ise, ikinci karakter ² bir harf veya alt çizgi olmalı ve ad en az 2 karakter uzunluğunda olmalıdır.

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

Kısacası, önceki kural W3C spesifikasyonundan çıkarılan aşağıdakine çevirir . :

CSS'de tanımlayıcılar (seçicilerdeki öğe adları, sınıflar ve kimlikler dahil) yalnızca [a-z0-9] ve ISO 10646 karakterleri U + 00A1 ve üstü, artı kısa çizgi (-) ve alt çizgi (_) içerebilir ; bir rakam ya da bir tire ve ardından bir rakam ile başlayamazlar. Tanımlayıcılar, sayısal bir kod olarak çıkış karakterlerini ve herhangi bir ISO 10646 karakterini içerebilir (bir sonraki öğeye bakın). Örneğin, "B&W?" "B \ & W \?" olarak yazılabilir veya "B \ 26 W \ 3F".

Kısa çizgi veya alt çizgi ile başlayan tanımlayıcılar genellikle olduğu gibi tarayıcıya özgü uzantılar için ayrılmıştır -moz-opacity.

¹ Tüm bunlar, kaçan unicode karakterlerin (hiç kimsenin gerçekten kullanmadığı) dahil edilmesiyle biraz daha karmaşık hale geldi.

² Bağladığım gramer bilgisine göre, örneğin İKİ tire ile başlayan bir kuralın --indent1geçersiz olduğunu unutmayın. Ancak, bunu pratikte gördüğümden eminim.

Benim için sürpriz buradaki cevapların çoğu yanlış. Şekline dönüştü:

CSS'deki CSS sınıf adlarında NUL dışında herhangi bir karaktere izin verilir. (CSS, NUL içeriyorsa (kaçarsa veya kaçmazsa), sonuç tanımsızdır. [ CSS karakterleri ])

Mathias Bynens' cevabı bağlantılar açıklama ve demolar bu isimleri nasıl kullanılacağını gösteren. Aşağı Yazılı CSS kodunda, bir sınıf adı kaçan gerekebilir , ama bu sınıf adını değiştirmez. Örneğin, gereksiz yere kaçan bir gösterim, bu adın diğer temsillerinden farklı görünecektir, ancak yine de aynı sınıf adını ifade eder.

Diğer birçok (programlama) dil kaçan değişken isimleri (“tanımlayıcılar”) kavramına sahip değildir, bu nedenle bir değişkenin tüm gösterimleri aynı görünmelidir. CSS'de durum böyle değil.

HTML dahil etmek yolu yoktur unutmayın uzay karakterler (boşluk, sekme, satır beslemeyi, form beslemeyi ve satır başı) bir de sınıf adı özniteliği birbirinden çünkü onlar zaten ayrı sınıflar,.

Bu nedenle, rastgele bir dizeyi CSS sınıf adına çevirmeniz gerekiyorsa: NUL ve boşlukla ilgilenin ve kaçın (buna göre CSS veya HTML için). Bitti.

Sorunuzu burada derinlemesine yanıtladım: http://mathiasbynens.be/notes/css-escapes

Makale ayrıca CSS'de (ve JavaScript'te) herhangi bir karakterden nasıl kaçacağını açıklıyor ve bunun için de kullanışlı bir araç yaptım . Bu sayfadan:

Bir öğeye kimlik değeri verirseniz ~!@$%^&*()_+-=,./';:"?><[]{}|`#, seçici şu şekilde görünür:

CSS:

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

JavaScript:

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

W3C teknik özelliklerini okuyun . (bu CSS 2.1, tarayıcı varsayımınız için uygun sürümü bulun)

edit: ilgili paragraf aşağıdaki:

CSS'de tanımlayıcılar (seçicilerdeki öğe adları, sınıflar ve kimlikler dahil) yalnızca [a-z0-9] ve ISO 10646 karakterleri U + 00A1 ve üstü, artı kısa çizgi (-) ve alt çizgi (_) içerebilir ; bir rakam ya da bir tire ve ardından bir rakam ile başlayamazlar. Tanımlayıcılar, sayısal bir kod olarak çıkış karakterlerini ve herhangi bir ISO 10646 karakterini içerebilir (bir sonraki öğeye bakın). Örneğin, "B&W?" "B \ & W \?" olarak yazılabilir veya "B \ 26 W \ 3F".

edit 2: @mipadi'nin Triptych'in cevabında işaret ettiği gibi , aynı web sayfasında da bu uyarı var :

CSS'de tanımlayıcılar '-' (tire) veya '_' (alt çizgi) ile başlayabilir. '-' veya '_' ile başlayan anahtar kelimeler ve mülk adları satıcıya özel uzantılar için ayrılmıştır. Bu tür satıcıya özgü uzantılar aşağıdaki biçimlerden birine sahip olmalıdır:

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

Örnek (ler):

Örneğin, XYZ kuruluşu, ekranın Doğu tarafındaki kenarlığın rengini tanımlamak için bir özellik eklediyse, buna -xyz-border-east-color diyebilirler.

Bilinen diğer örnekler:

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

İlk kısa çizginin veya alt çizginin, bir mülkte veya anahtar kelimede şimdiki veya gelecekteki herhangi bir CSS seviyesi tarafından kullanılmayacağı garanti edilir. Dolayısıyla, tipik CSS uygulamaları bu özellikleri tanımayabilir ve ayrıştırma hatalarını işleme kurallarına göre bunları göz ardı edebilir. Bununla birlikte, ilk tire veya alt çizgi dilbilgisinin bir parçası olduğundan, CSS 2.1 uygulayıcıları, satıcıya özgü uzantıları destekleseler de desteklemeseler de her zaman CSS uyumlu bir ayrıştırıcı kullanabilmelidir.

Yazarlar satıcıya özel uzantılardan kaçınmalıdır

Tam düzenli ifade:

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

Dolayısıyla, “ -” ve “ _” dışındaki tüm listelenen karakterlerinizin doğrudan kullanılması durumunda izin verilmez. Ancak bunları ters eğik çizgi foo\~barkullanarak veya unicode gösterimini kullanarak kodlayabilirsiniz foo\7E bar.

Geçici çözüm arayanlar için, örneğin sınıfınız bir sayı ile başlıyorsa, bir öznitelik seçici kullanabilirsiniz. Değişiklik:

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

buna:

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

Ayrıca, birden fazla sınıf varsa, bunları seçicide belirtmeniz gerekecektir.

Kaynaklar:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Sayılarla başlayan adlara sahip CSS sınıflarını geçerli kılmak için bir geçici çözüm var mı?

Benim anlayışım alt çizginin teknik olarak geçerli olduğudur. Ödeme:

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

“... 2001 başlarında yayınlanan spesifikasyondaki hatalar, alt çizgileri ilk kez yasal hale getirdi.”

Yukarıda bağlantı verilen makalede hiçbir zaman kullanılmadığı söylenmekte, daha sonra desteklenmeyen tarayıcıların bir listesi verilmektedir ve bunların tümü, en azından kullanıcı sayısı bakımından uzun sürelidir.

HTML5 / CSS3 için sınıflar ve kimlikler sayılarla başlayabilir.

@ Triptych'in cevabından çıkarak, bir dizeyi geçerli kılmak için aşağıdaki 2 normal ifade eşleşmesini kullanabilirsiniz:

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

Bu, kolay kaldırma için harf, sayı, kısa çizgi veya alt çizgi olmayan herhangi bir şeyi seçen ters eşleşmedir.

^-*[0-9]+

Bu, bir dizginin başlangıcında 0 veya 1 tire ve ardından 1 veya daha fazla sayı ile eşleşir, ayrıca kolayca çıkarılabilir.

PHP nasıl kullanılır:

//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 : '';