Какие символы допустимы в именах классов/селекторах CSS?
Какие символы/символы допустимы в селекторах классов CSS? Я знаю, что следующие символы являются недопустимыми, но какие символы являются допустимыми?
Вы можете проверить непосредственно в CSS grammar.
По сути 1 , имя должно начинаться с подчеркивания (` ), дефиса ( — ) или буквы ( a — z`), за которой следует любое количество дефисов, подчеркиваний, букв или цифр. Есть одна загвоздка: если первый символ — дефис, второй символ должен 2 быть буквой или подчеркиванием, а длина имени должна быть не менее 2 символов.
Короче говоря, предыдущее правило переводится следующим образом, извлеченным из W3C spec.:
В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и ISO 10646 символы U+00A1 и выше, плюс дефис (-) и знак подчеркивания (_); они не могут начинаться с цифры или дефиса, за которым следует цифра. Идентификаторы могут также содержать экранированные символы и любой символ ISO 10646 символ в виде цифрового кода (см. следующий пункт). Например. идентификатор «B&W?» может быть записан как «B\&W\?» или «B\26 W\3F».
Идентификаторы, начинающиеся с дефиса или подчеркивания, обычно зарезервированы для расширений, специфичных для браузера, как, например, -moz-opacity .
1 Все это несколько усложняется включением экранированных символов юникода (которые на самом деле никто не использует).
2 Обратите внимание, что согласно грамматике, на которую я ссылался, правило, начинающееся с ДВУХ дефисов, например, —indent1 , является недействительным. Однако я уверен, что видел это на практике.
Моим самым удивить ответов здесь не правы. Получается, что:
Любой символ, за исключением нул допускается в имени класса CSS в CSS. (Если CSS содержит нуль (сбежал или нет), результат будет неопределенным. [УСБ-персонажи])
Матиас Bynens’ Ответ ссылки на объяснение и демо показывает, как использовать эти имена. Down_ _Written в CSS код, название класса may нужно escaping, но это не меняет название класса. Е. Г. неоправданно за-бежал представление будет отличаться от других представителей этого имени, но он по-прежнему относится к тому же имя класса.
Большинство других (Программирование) языки не имеют, что понятие побега имена переменных (“идентификаторы”), поэтому все представления переменной должны выглядеть одинаково. Это не тот случай в CSS.
Обратите внимание, что в HTML нет никакого способа, чтобы включить [пробельные символы (пробел, табуляция, перевод строки, перевод и возврат каретки)][HTML с космической знаков] в имя класса атрибута, потому что они уже отделить классы друг от друга.
Так что, если вам нужно, чтобы превратить случайную строку в CSS имя класса: береги нул и пространства, и выход (соответственно для CSS или HTML). Сделано.
Прочитайте W3C spec. (это CSS 2.1, найдите подходящую версию для вашего предположения о браузерах)
редактирование: далее следует соответствующий абзац:
В CSS идентификаторы (в т.ч. имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и ISO 10646 символы U+00A1 и выше, плюс символ дефис (-) и знак подчеркивания (_); они не могут начинаться с цифры или с дефис, за которым следует цифра. Идентификаторы также могут содержать экранированные > символы и любые символы ISO. символы и любой символ стандарта ISO 10646 в виде цифрового кода (см. следующий пункт). Для например, идентификатор «B&W?» может быть записан как «B\&W\?» или «B\26 W\3F».
edit 2: как указывает @mipadi в ответе Triptych’, есть вот это caveat, также на той же веб-странице:
В CSS идентификаторы могут начинаться с ‘-‘ (тире) или ‘_’ (подчеркивание). Ключевые слова и имена свойств, начинающиеся с ‘-‘ или ‘_’, зарезервированы для расширений, специфичных для производителя. Такие расширения, специфичные для производителя, должны иметь один из следующих форматов:
‘-‘ + идентификатор поставщика + ‘-‘ + значимое имя ‘_’ + идентификатор поставщика + ‘-‘ + значимое имя
Пример(ы):
Например, если организация XYZ добавила. свойство для описания цвета границы на восточной стороне дисплея, они могли бы назвать его -xyz-border-east-color.
Другие известные примеры:
-moz-box-sizing -moz-border-radius -wap-accesskey
Начальное тире или символ подчеркивания гарантированно никогда не будет использовано в свойстве или ключевом слове любым текущим или будущим уровнем CSS. Таким образом, типичные CSS реализации могут не распознавать такие > свойства и игнорировать их. свойства и могут игнорировать их в соответствии с правилами обработки ошибок парсинга. Однако, поскольку начальное тире или подчеркивание является частью грамматики, разработчики CSS 2.1. всегда должны иметь возможность использовать CSS-совместимый парсер, независимо от того. поддерживают ли они какие-либо специфические для данного производителя расширения.
Авторам следует избегать специфичных для производителя расширений
Какие символы допустимы в именах / селекторах классов CSS?
Какие символы/символы разрешены в селекторах классов CSS? Я знаю, что следующие символы недопустимы, но какие символы действительны?
Специальные символы можно использовать в именах классов, экранируя их — в своем файле CSS вы можете определить .hello/world , экранируя обратную косую черту: .hello\2fworld , hello\2f world или hello\/world
Другой связанный вопрос, не о «синтаксисе имен», а о «синтаксисе атрибута класса» при выражении нескольких имен .
9 ответов
Вы можете проверить прямо в грамматике CSS.
В основном 1 имя должно начинаться с подчеркивания ( _ ), дефиса ( — ) или буквы ( a — z ), за которой следует любое количество дефис, символы подчеркивания, буквы или цифры. Существует улов: если первым символом является дефис, второй символ должен 2 быть буквой или подчеркиванием, а имя должно быть не менее двух символов.
Идентификаторы, начинающиеся с дефиса или подчеркивания, обычно зарезервированы для расширений, специфичных для браузера, как в -moz-opacity .
1 Все это немного усложнилось включением экранированных символов Unicode (которые никто не использует).
2 Обратите внимание, что в соответствии с грамматикой, с которой я связан, правило, начинающееся с двух дефис, например. —indent1 , является недопустимым. Тем не менее, я уверен, что видел это на практике.
NB: W3C говорит, что использование начальных ‘-‘ или ‘_’ должно быть зарезервировано для специфических для производителя расширений CSS (например, классов -moz *, реализованных браузерами Mozilla).
\ -Escapes обычно используются, но обычно в основном для целей хаков CSS, изолируя браузеры, которые их не поддерживают.
@Paolo — если вы придерживаетесь принципа использования только подчеркиваний для расширений, специфичных для браузера, то в IE6 не будет вреда игнорировать их
Вы можете использовать escape-нотацию для представления различных символов. Это может быть полезно, скажем, для нацеливания подчеркивания в качестве первого символа и для того, чтобы IE6 распознал его как таковой: \ _
Чтобы обновить комментарий @Pim Jager через два года, согласно w3counter.com/globalstats.php, IE6 сейчас используется менее чем 3% пользователей, отставая от IE9 на 4%, IE7 на 9%, IE8 на 22%. Все версии Firefox имеют 28%, все версии Chrome имеют 17%.
Я знаю, что это старый ответ, но CSS (по крайней мере, 2+) допускает использование любого символа в идентификаторах.
Что касается комментария @mipadi: я не считаю это проблемой на практике (поправьте меня, если я ошибаюсь). Даже если я назову класс чем-то столь необычным, как «-moz-any» (что я не планирую делать), он все равно не будет конфликтовать с «: -moz-any», если мне не удастся написать неправильный селектор.
Правило, начинающееся с двух дефисов, является переменной CSS, которая имеет особое значение и поддерживается Firefox.
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier «B&W?» may be written as «B\&W\?» or «B\26 W\3F» . Поэтому — —indent1 недействителен и должен быть экранирован как \—indent1 ( — классы ломаются на iOS, например)
На заметку: ваша грамматика допускает одну строку символов? Как вы думаете, это лучший способ исправить это?
@ bigΩmega Я считаю, что имена, состоящие из одного символа, действительны, если они начинаются с буквы или подчеркивания.
К моему удивлению, большинство ответов здесь неверны. Оказывается, что:
Любой символ, кроме NUL, разрешен в именах классов CSS в CSS. (Если CSS содержит NUL (экранированный или нет), результатом является undefined. [CSS-символы)
ответ Матиаса Биненса ссылки на объяснение и демонстрации, показывающие, как использовать эти имена. Написанное в CSS-коде, для имени класса может потребоваться экранирование, но это не изменяет имя класса. Например. неоправданно избыточное представление будет отличаться от других представлений этого имени, но оно все равно относится к одному и тому же имени класса.
Большинство других (программирующих) языков не имеют такой концепции экранирования имен переменных ( «идентификаторы» ), поэтому все представления переменной должны выглядеть одинаково. Это не относится к CSS.
Обратите внимание, что в HTML нет способа включить символы пробела (пробел, табуляция, фид, подача формы и возврат каретки) в атрибут имени класса, поскольку они уже разделяют классы друг от друга.
Итак, если вам нужно превратить случайную строку в имя класса CSS: позаботьтесь о NUL и пробеле и побегите (соответственно для CSS или HTML). Готово.
Первая строка вашего ответа должна быть «большинство ответов здесь устарели / относятся только к CSS2».
@SalmanA Ответы, на которые я ссылаюсь, были неправильными с самого начала. Они не применяются ни к CSS2.1, ни к CSS2, ни к CSS1.
@RobertSiemer Хорошая мысль, я переместил свой комментарий на stackoverflow.com/questions/50812118/… (который, тем не менее, связан с этой темой)
Прочитайте спецификацию W3C. (это CSS 2.1, найдите подходящую версию для вашего предположения о браузерах)
edit: соответствующий абзац следует:
В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторы) могут содержать только символы [a-z0-9] и ISO 10646 символы U + 00A1 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры или дефис, затем цифра. Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 как числовой код (см. следующий пункт). Для экземпляр, идентификатор «B & W?» может быть записанный как «B\& W \?» или «B\26 W\3F».
edit 2: как @mipadi указывает в ответе Triptych, там caveat, также на той же веб-странице:
В CSS идентификаторы могут начинаться с ‘-‘ (тире) или «_» (подчеркивание). Ключевые слова и имена свойств, начинающиеся с ‘-‘ или ‘_’ зарезервированы для специфические для поставщика расширения. такие расширения для поставщиков должны иметь один из следующих форматов:
'-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name Пример (ы):
Например, если добавлена организация XYZ свойство описать цвет граница с восточной стороны дисплей, они могут назвать это -xyz-граница-восток цвет.
Другие известные примеры:
-moz-box-sizing -moz-border-radius -wap-accesskey Начальная тире или подчеркивание гарантированно никогда не будет использоваться в свойство или ключевое слово любым текущим или будущий уровень CSS. Таким образом, типичный CSS реализации могут не свойств и может игнорировать их в соответствии с правилами обработки ошибки синтаксического анализа. Однако, поскольку начальная тире или подчеркивание является частью грамматика, разработчики CSS 2.1 всегда должны иметь возможность использовать Совместимый с CSS парсер, независимо от того, они поддерживают любые специфические для поставщика расширения.
Авторы должны избегать специфических для поставщика Расширения