@charset

@charset задаёт кодировку текущего CSS‑файла. Должна быть первой инструкцией в файле (после возможного BOM). В современных проектах необходимость в @charset возникает редко. Кодировку внешних CSS-файлов обычно задают HTTP-заголовком, а встроенные стили используют кодировку HTML-документа.

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

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

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

Проигнорируется, если перед директивой будет комментарий:

        
          
          /* Я комментарий */@charset "UTF-8"; /* будет проигнорировано */
          /* Я комментарий */
@charset "UTF-8"; /* будет проигнорировано */

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

• Размещается только на верхнем уровне файла, вне любых групповых правил (@media, @supports и других).
• Строковое значение в двойных кавычках, обычно "UTF-8".
• Допускается один раз на файл. Если встречается несколько, учитывается только первая.
• Должна предшествовать любым @import и другим правилам.
• В HTML-документе кодировка определяется документом, поэтому @charset внутри <style> игнорируется.

Раньше браузеры не всегда могли корректно определить кодировку CSS-файла без явного указания. Парсеру 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 тоже обязан стоять самым первым в импортируемом файле.
💡 Никогда не смешивайте разные кодировки в одном проекте — это источник трудноуловимых ошибок.