Как использовать символы Unicode в CSS
Объявление кодировки и кодировка файла
Для использования символов Unicode в CSS первым делом нужно объявить соответствующую кодировку; рекомендуется UTF-8. Это делается с помощью так называемого эт-правила @charset в самом начале файла, то есть первой строкой:
@charset "utf-8";Синтаксис: сначала указывается @charset; затем — ровно ОДИН пробел; затем — имя кодировки в ДВОЙНЫХ кавычках; затем — точка с запятой. Синтаксис должен быть точно таким, как указан здесь, Это ВАЖНО, так как иначе будет ошибка. То есть нельзя использовать между @charset и названием кодировки больше или меньше одного пробела; нельзя заключать имя кодировки в одинарные кавычки; обязательно нужно ставить точку с запятой в конце; также ничего нельзя писать ПЕРЕД @charset, включая комментарии, то есть первым символом в файле должен быть «эт» (@; «собака», по-нашему).
Однако одного обявления кодировки мало: нужно чтобы и само содержимое файла стилей было закодировано в объявленой кодировке. Что это значит?..
Эт-правилом @charset мы просто указываем браузеру какой алгоритм кодирования ему нужно использовать, чтобы правильно прочесть содержимое файла, однако само содержимое может быть закодировано по другому алгоритму и тогда, как вы понимаете, браузер обработает файл некорректно. Обычно в большинстве редакторов кода текущая кодировка файла вместе с другой полезной информацией отображается в строке статуса (в нижней части окна), а изменить её можно через меню — эта возможность есть, поищите; описывать в данном посте где именно она находится для всех редакторов, коих сотни, а то и тысячи, по понятным причинам я не стал; если не найдёте, напишите мне — я вам подскажу.
Если вы будете изменять кодировку файла, то учтите, что в некоторых редакторах может быть два пункта меню, которые могут сбить вас с толку:
Кодировать в <Имя кодировки>
...
Преобразовать в <Имя кодировки>
Нужно выбрать именно Преобразовать в <Имя кодировки>.
На самом деле указывать кодировку в файле стилей необязательно ЕСЛИ она обявлена в HTML-документе, но ещё раз напомню: кодировка содержимого файла должна совпадать с объявленной. Это, кстати, касается не только CSS, но и абсолютно любых других областей — ведь если вы говорите, что следующие данные нужно обработать по алгоритму указанной кодировки, то вы же и должны предоставить закодированные этим же алгоритмом данные.
Я так заостряю ваше внимание на том, что помимо объявления кодировки нужно чтобы и данные были в той же кодировке, так как на этом очень часто спотыкаются и не понимают почему всё в кракозябрах.
Тем не менее, хоть и кодировку в файле стилей объявлять необязательно ЕСЛИ она обявлена в HTML-документе, как я уже сказал выше, всё равно лучше это сделать, так как мало ли что ☺:
@charset "utf-8";Рекомендую ВСЕГДА ВЕЗДЕ объявлять кодировки и использовать, по крайней мере в Web'е, именно UTF-8!
Использование символов Unicode в свойстве Content
Рассмотрим CSS-свойство content, которое используется совместно с псевдоэлементами ::before и ::after ... В данном свойстве указывается контент, который будет помещён перед или после элемента, к которому применяется соответствующий псевдоэлемент:
selector::before,
selector::after {
content: "строка";
}- строка
- любой набор символов, который выводится как есть, кроме экранированных последовательнойстей (см. далее).
Пример использования свойства Content
Контент, добавленный с помощью свойства content не выделяется курсором мыши и не копируется в буфер обмена.
Пример использования символов Unicode в свойстве Content
Допустим, нужно вывести с помощью свойства content после некоторого элемента смайлик (☺), который имеет номер в Unicode u+263a; это запишется так:
selector::after {
content: "\263a";
}
То есть номер символа в Unicode нужно просто проэкранировать обратным слешем (\).
Также отмечу — впередистоящие нули можно не указывать: \0030 идентично \30.
Второй способ — это указать символ непосредственно:
selector::after {
content: "☺";
}Чтобы добавляемые через content пробельные символы Unicode (пробелы, табуляции и переводы строк) отображались как есть (имеется в виду предварительное форматирование), для элемента должно быть определено свойство white-space со значением pre или подобным ему.
Некоторые символы Unicode
| # | Название по-русски | Название по-английски | Вид | Мнемоника | HTML-код | Unicode |
|---|---|---|---|---|---|---|
| 1 | Горизонтальная табуляция | Horizontal Tabulation | 	 | u+0009 | ||
| 2 | Перевод строки (разделитель строк в Unix) | New Line (Nl) | | u+000a | ||
| 3 | Вертикальная табуляция | Vertical Tabulation |  | u+000b | ||
| 4 | Пробел | Space |   | u+0020 | ||
| 5 | Двойная кавычка (универсальная) | Quotation Mark | " | " | " | u+0022 |
| 6 | Амперсанд | Ampersand | & | & | & | u+0026 |
| 7 | Апостроф (одинарная кавычка) | Apostrophe | ' | ' | ' | u+0027 |
| 8 | Знак меньше | Less-Than Sign | < | < | < | u+003c |
| 9 | Знак больше | Greater-Than Sign | > | > | > | u+003e |
| 10 | Неразрывный пробел | No-Break Space | |   | u+00a0 |
К слову, заметим, что мнемоники (частично) соответствуют названию символа по-английски; пример: — No-Break SPace.