@charset

@charset задаёт кодировку текущего CSS‑файла. Должна быть самым первым байтом таблицы стилей (после необязательного BOM), иначе игнорируется. В совремённой практике с UTF‑8 почти не требуется: кодировку лучше указывать HTTP‑заголовком или через <meta charset> для HTML.

        
          
          @charset "UTF-8";body {  font-family: system-ui, sans-serif;}
          @charset "UTF-8";

body {
  font-family: system-ui, sans-serif;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Неверно — перед директивой есть комментарий, поэтому @charset будет проигнорирован:

        
          
          /* ⚠️ так нельзя */@charset "UTF-8";
          /* ⚠️ так нельзя */
@charset "UTF-8";

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• Записывается только на верхнем уровне и только первой строкой файла.
• Строковое значение в кавычках, обычно "UTF-8".
• Допускается один раз на файл. Если встречается несколько, учитывается только первая.
• Должна предшествовать любым @import и другим правилам.
• Нельзя использовать внутри атрибута style и внутри тега <style>: для них кодировка берётся из документа.

Парсеру CSS нужна корректная кодировка, чтобы верно прочитать не ASCII‑символы (например, селекторы, комментарии, литералы). Исторически для этого использовали @charset. Сейчас повсеместно применяют UTF‑8 и задают кодировку уровнем выше:

• HTTP‑заголовком Content-Type: text/css; charset=utf-8;
• BOM (U+FEFF) в начале CSS‑файла;
• <meta charset="utf-8"> для HTML (влияет на встроенные стили).

💡 Предпочитайте UTF‑8 и настройку кодировки на уровне сервера/сборки. @charset используйте только при необходимости и строго первой строкой.
💡 Перед @charset не должно быть ни пробелов, ни комментариев, ни пустых строк.
💡 Если файл импортируется через @import, его собственный @charset тоже обязан стоять самым первым в импортируемом файле.
💡 Никогда не смешивайте разные кодировки в одном проекте — это источник трудноуловимых ошибок.