Экранирование CSS (Escape / Unescape)
Экранируйте текст для идентификаторов и селекторов CSS в точности как CSS.escape() либо для строк в кавычках; снимайте экранирование \HEX. Цифры, эмодзи, # и . учтены.
Символов: 19 · байт: 19 (UTF-8)
Символов: 0 · байт: 0 (UTF-8)
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Что такое Экранирование CSS?
Экранирует текст, чтобы его можно было использовать как идентификатор CSS — id или класс в селекторе, например в querySelector, — по алгоритму CSSOM CSS.escape(), либо как содержимое строки CSS в кавычках. Также преобразует экранирование CSS обратно в текст.
Как пользоваться Экранирование CSS
- Выберите Экранировать или Снять экранирование.
- Для экранирования укажите Контекст: Идентификатор / селектор (CSS.escape) или Строковое значение в кавычках; при необходимости включите Экранировать не-ASCII как \HEX.
- Введите id, класс или строку в Ввод и скопируйте Вывод.
Пример
0a#b.c
\30 a\#b\.c
Когда использовать Экранирование CSS
Режим идентификатора нужен всякий раз, когда id или класс может начинаться с цифры или содержать символы вроде ., :, # или пробелов, например document.querySelector("#" + CSS.escape(id)). Режим строки подходит для значений content: и названий шрифтов. Инструмент не проверяет и не минифицирует CSS.
Как работает Экранирование CSS
Режим идентификатора следует CSSOM §2.1: NUL становится U+FFFD; управляющие символы, ведущая цифра или цифра после ведущего дефиса становятся экранированием кодовой точки \HEX ; одиночный - становится \-; буквы, цифры, -, _ и не-ASCII символы остаются; любой другой ASCII-символ получает обратную косую черту (# → \#). Режим строки экранирует \, " и ' обратной косой чертой, а управляющие символы (включая переводы строк) — как \HEX . Снятие экранирования читает \ и 1–6 hex-цифр с одним необязательным пробельным символом, удаляет экранированные переводы строк, а прочие экранированные символы оставляет буквально.
Распространенные Случаи Использования
- Выбор элементов, у которых id начинается с цифры (
#\31 23) - Построение селекторов из пользовательских имён классов
- Запись специальных символов в строках
content: - Чтение экранированных селекторов, созданных инструментами
Часто Задаваемые Вопросы
Почему ведущая цифра превращается в \3X ?
Идентификаторы CSS не могут начинаться с цифры, поэтому цифра записывается своей кодовой точкой (1 = \31) с пробелом, завершающим экранирование.
Это то же самое, что CSS.escape() в браузере?
Да, режим идентификатора реализует ту же спецификацию и даёт идентичный результат.
Нужно ли экранировать не-ASCII символы?
Нет, файлы CSS в UTF-8 могут содержать их напрямую. Опция нужна для таблиц стилей только из ASCII.