Które znaki są poprawne w nazwach / selektorach klas CSS?

Jakie znaki / symbole są dozwolone w selektorach klas CSS ?
Wiem, że następujące znaki są nieprawidłowe , ale jakie znaki są prawidłowe ?

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

Możesz to sprawdzić bezpośrednio w gramatyce CSS .

Zasadniczo ¹ , nazwa musi zaczynać się znakiem podkreślenia ( _), łącznikiem ( -) lub literą ( a- z), po której następuje dowolna liczba myślników, znaków podkreślenia, liter lub cyfr. Istnieje pewien haczyk: jeśli pierwszy znak jest łącznikiem, drugi znak musi mieć ² litery lub znak podkreślenia, a nazwa musi mieć co najmniej 2 znaki.

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

Krótko mówiąc, poprzednia reguła przekłada się na następujące, wyodrębnione ze specyfikacji W3C. :

W CSS identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektorach) mogą zawierać tylko znaki [a-z0-9] i ISO 10646 znaków U + 00A1 i wyższe, a także łącznik (-) i podkreślenie (_) ; nie mogą zaczynać się cyfrą ani myślnikiem, po którym następuje cyfra. Identyfikatory mogą także zawierać znaki zmiany znaczenia i dowolny znak ISO 10646 jako kod numeryczny (patrz następny punkt). Na przykład identyfikator „B&W?” może być zapisane jako „B \ & W \?” lub „B \ 26 W \ 3F”.

Identyfikatory zaczynające się od łącznika lub podkreślenia są zwykle zarezerwowane dla rozszerzeń specyficznych dla przeglądarki, jak w -moz-opacity.

¹ Wszystko to jest nieco bardziej skomplikowane przez włączenie znaków ucieczki Unicode (których tak naprawdę nikt nie używa).

² Zauważ, że zgodnie z gramatyką, którą podłączyłem, reguła zaczynająca się od DWÓCH łączników, np. --indent1, Jest nieprawidłowa. Jestem jednak pewien, że widziałem to w praktyce.

Ku mojemu zaskoczeniu większość odpowiedzi tutaj jest błędna. Okazało się, że:

Dowolny znak oprócz NUL jest dozwolony w nazwach klas CSS w CSS. (Jeśli CSS zawiera NUL (znak ucieczki lub nie), wynik jest niezdefiniowany. [ Znaki CSS ])

Odpowiedź Mathiasa Bynensa prowadzi do wyjaśnień i prezentacji pokazujących, jak używać tych nazw. Zapisana w kodzie CSS nazwa klasy może wymagać ucieczki , ale to nie zmienia nazwy klasy. Np. Niepotrzebnie przesadna reprezentacja będzie wyglądać inaczej niż inne reprezentacje tej nazwy, ale nadal odnosi się do tej samej nazwy klasy.

Większość innych języków (programowania) nie ma pojęcia ucieczki nazw zmiennych („identyfikatorów”), więc wszystkie reprezentacje zmiennej muszą wyglądać tak samo. W CSS tak nie jest.

Zauważ, że w HTML nie ma sposobu na umieszczenie znaków spacji (spacja, tabulator, przesunięcie wiersza, wysuw formularza i powrót karetki) w atrybucie nazwy klasy , ponieważ już one oddzielają klasy od siebie.

Tak więc, jeśli chcesz zmienić losowy ciąg znaków w nazwę klasy CSS: zadbaj o NUL i spację i ucieknij (odpowiednio dla CSS lub HTML). Gotowy.

Dokładnie odpowiedziałem na twoje pytanie tutaj: http://mathiasbynens.be/notes/css-escapes

W artykule wyjaśniono także, jak uciec przed dowolną postacią w CSS (i JavaScript), i zrobiłem też przydatne narzędzie do tego. Z tej strony:

Gdyby nadać elementowi wartość identyfikatora ~!@$%^&*()_+-=,./';:"?><[]{}|`#, selektor wyglądałby następująco:

CSS:

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

JavaScript:

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

Przeczytaj specyfikację W3C . (jest to CSS 2.1, znajdź odpowiednią wersję dla twojego założenia przeglądarki)

edycja: odpowiedni akapit poniżej:

W CSS identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektorach) mogą zawierać tylko znaki [a-z0-9] i ISO 10646 znaków U + 00A1 i wyższe, a także łącznik (-) i podkreślenie (_) ; nie mogą zaczynać się cyfrą ani myślnikiem, po którym następuje cyfra. Identyfikatory mogą także zawierać znaki zmiany znaczenia i dowolny znak ISO 10646 jako kod numeryczny (patrz następny punkt). Na przykład identyfikator „B&W?” może być zapisane jako „B \ & W \?” lub „B \ 26 W \ 3F”.

edycja 2: jak @mipadi wskazuje w odpowiedzi Tryptyku, jest to zastrzeżenie , również na tej samej stronie:

W CSS identyfikatory mogą zaczynać się od „-” (myślnik) lub „_” (podkreślenie). Słowa kluczowe i nazwy właściwości zaczynające się od „-” lub „_” są zastrzeżone dla rozszerzeń specyficznych dla dostawcy. Takie rozszerzenia specyficzne dla dostawcy powinny mieć jeden z następujących formatów:

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

Przykłady:

Na przykład, jeśli organizacja XYZ dodała właściwość opisującą kolor obramowania po wschodniej stronie wyświetlacza, może nazwać to -xyz-border-east-color.

Inne znane przykłady:

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

Początkowej kreski lub podkreślenia nie gwarantuje się, że zostanie ona użyta we właściwości lub słowie kluczowym przez jakikolwiek obecny lub przyszły poziom CSS. Dlatego typowe implementacje CSS mogą nie rozpoznawać takich właściwości i mogą je ignorować zgodnie z zasadami obsługi błędów parsowania. Ponieważ jednak początkowy myślnik lub znak podkreślenia jest częścią gramatyki, implementatorzy CSS 2.1 powinni zawsze mieć możliwość korzystania z parsera zgodnego z CSS, niezależnie od tego, czy obsługują rozszerzenia specyficzne dla producenta.

Autorzy powinni unikać rozszerzeń specyficznych dla dostawcy

Pełne wyrażenie regularne to:

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

Dlatego wszystkie wymienione na liście postacie oprócz „ -” i „ _” nie są dozwolone, jeśli zostaną użyte bezpośrednio. Ale możesz je zakodować za pomocą odwrotnego ukośnika foo\~barlub notacji Unicode foo\7E bar.

Dla tych, którzy szukają obejścia, możesz użyć selektora atrybutów, na przykład, jeśli twoja klasa zaczyna się od liczby. Zmiana:

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

do tego:

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

Ponadto, jeśli istnieje wiele klas, musisz je określić w selektorze.

Źródła:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Czy istnieje sposób obejścia problemu, aby klasy CSS o nazwach rozpoczynających się od liczb były prawidłowe?

Rozumiem, że podkreślenie jest technicznie ważne. Sprawdzić:

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

„... błędna specyfikacja opublikowana na początku 2001 roku po raz pierwszy uczyniła podkreślenia legalnymi”.

Artykuł, do którego prowadzi link powyżej, mówi, że nigdy ich nie używaj, a następnie podaje listę przeglądarek, które ich nie obsługują, a wszystkie z nich są co najmniej długo zbędne.

W przypadku HTML5 / CSS3 klasy i identyfikatory mogą zaczynać się cyframi.

Wychodząc z odpowiedzi @ Triptych, możesz użyć następujących 2 dopasowań wyrażeń regularnych, aby łańcuch był prawidłowy:

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

Jest to odwrotne dopasowanie, które wybiera wszystko, co nie jest literą, cyfrą, myślnikiem ani podkreśleniem, dla łatwego usunięcia.

^-*[0-9]+

Dopasowuje 0 lub 1 myślniki, a następnie 1 lub więcej liczb na początku łańcucha, również w celu łatwego usunięcia.

Jak go używać w 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 : '';