CSS-правило @charset

At-правило @charset объявляет кодировку символов, используемую во внешней таблице стилей. Кодировка символов отображает необработанные байты файла в читаемые символы, поэтому браузер должен знать, в какой кодировке написана таблица стилей, прежде чем сможет правильно интерпретировать не-ASCII-текст — буквы с диакритическими знаками, символы валют, эмодзи или содержимое внутри объявлений content: "…".

На этой странице рассказывается, когда @charset действительно применяется, строгие синтаксические правила, из-за которых его легко написать неправильно, как браузер выбирает кодировку и каких распространённых ошибок следует избегать.

Когда применяется @charset?

@charset предназначен исключительно для внешних таблиц стилей (отдельного файла .css, подключённого через <link> или импортированного с помощью @import). Оно игнорируется, если:

• находится внутри HTML-блока <style>;
• находится внутри встроенного атрибута style;
• не является самым первым элементом в файле.

В самом HTML-документе кодировка задаётся тегом <meta charset>, а не @charset.

На практике @charset почти никогда не требуется: если сохранить таблицу стилей в кодировке UTF-8 (применяемой по умолчанию почти в каждом редакторе и рекомендованной для веба), браузер обычно определяет её правильно. @charset важнее всего для устаревших таблиц стилей, хранящихся в кодировках, отличных от UTF-8, или как явная мера защиты.

Синтаксис

@charset "encoding";

Правило принимает одну строку, называющую кодировку из реестра IANA, например "UTF-8" или "iso-8859-15".

Синтаксис необычно строгий — @charset не является обычным at-правилом и не следует обычной гибкости CSS в отношении пробелов и комментариев:

• Оно должно быть первым байтом таблицы стилей. Перед ним не должно быть никаких символов, комментариев или даже пробелов.
• Кодировка должна быть заключена в двойные кавычки.
• Между @charset и открывающей кавычкой должен быть ровно один пробел.
• Строка должна заканчиваться точкой с запятой.

@charset "UTF-8"; /* Set the stylesheet encoding to Unicode UTF-8 */

Корректное и некорректное использование

Из-за строгих правил небольшие различия в форматировании переводят правило из допустимого в игнорируемое:

@charset "UTF-8";        /* Valid: standard form */
@charset "ISO-8859-15";  /* Valid: any registered encoding name */
 @charset "UTF-8";       /* Invalid: a space precedes the at-rule */
@charset 'UTF-8';        /* Invalid: single quotes are not allowed */
@charset  "UTF-8";       /* Invalid: more than one space after @charset */
@charset "UTF-8"         /* Invalid: missing the closing semicolon */
@charset UTF-8;          /* Invalid: the value must be quoted */

Если @charset недействительно или игнорируется, браузер не выдаёт ошибку — он просто переходит к следующему доступному источнику кодировки.

Как браузер выбирает кодировку

@charset является лишь одним из нескольких источников информации и имеет фиксированный приоритет. Браузер использует первый найденный источник в следующем порядке:

1. Метка порядка байтов (BOM) в начале файла.
2. Параметр charset HTTP-заголовка ответа Content-Type (например, text/css; charset=utf-8).
3. At-правило @charset.
4. Атрибут charset элемента <link>, загрузившего таблицу стилей (устаревший).
5. Кодировка ссылающегося документа.
6. Резервное значение UTF-8.

Поскольку заголовок Content-Type, отправленный сервером, имеет более высокий приоритет, чем @charset, неправильно настроенный сервер может переопределить объявленную кодировку. Именно поэтому установка кодировки на уровне HTTP (или простое повсеместное использование UTF-8) является наиболее надёжным подходом.

Значения

@charset принимает одну заключённую в кавычки строку (string), называющую кодировку символов, например "UTF-8" или "iso-8859-1". Оно не принимает ключевые слова initial или inherit — они применяются к CSS-свойствам, тогда как @charset является at-правилом, а не свойством.

Связанные at-правила

• @import — включение одной таблицы стилей в другую. При использовании правила @import должны идти сразу после @charset.
• @media — применение стилей по условию на основе медиапризнаков.
• @font-face — загрузка и именование пользовательских веб-шрифтов.

Практика