Зачем указывать @charset «UTF-8»; в вашем файле CSS?

173

Я видел эту инструкцию как самую первую строку из множества CSS-файлов, которые были переданы мне:

@charset "UTF-8";

Что он делает, и нужно ли это правило?

Кроме того, если я включу этот метатег в свой элемент head, исключит ли это необходимость его присутствия в моих файлах CSS?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
css character-encoding rsturim
источник

Ответы:

123

Он говорит браузеру прочитать файл css как UTF-8. Это удобно, если ваш CSS содержит символы Юникода, а не только ASCII.

Использование его в метатеге хорошо, но только для страниц, которые содержат этот метатег.

Прочитайте о правилах разрешения набора символов в CSS-файлах в спецификации w3c для CSS 2.

Одед
источник
7
Также важно, если вы связываете эти файлы с не-UTF-8-сайтов, например, скажем: японский веб-сайт с кодировкой UTF-16, пытающийся загрузить CSS из CDN, получит нечитаемый контент, если файл CSS не объявит его кодирование.
Парацетамол
147

Это полезно в тех случаях, когда кодировка не указывается в заголовке HTTP или других метаданных, например в локальной файловой системе.

Представьте себе следующую таблицу стилей:

[rel="external"]::after
{
    content: ' ↗';
}

Если читатель сохраняет файл на жесткий диск и вы пропускаете @charsetправило, большинство браузеров будут читать его в кодировке локали ОС, например, Windows-1252, и вставлять â † вместо стрелки.

К сожалению, вы не можете полагаться на этот механизм, так как поддержка довольно ... редка. И помните, что в сети заголовок HTTP всегда будет переопределять @charsetправило.

Правильные правила для определения набора символов таблицы стилей расположены в порядке приоритета:

  1. HTTP Charset header.
  2. Порядок следования байтов.
  3. Первое @charsetправило.
  4. UTF-8.

Последнее правило является самым слабым, он будет терпеть неудачу в некоторых браузерах. Атрибут является устаревшим в HTML 5 . Остерегайтесь конфликта между различными декларациями. Их нелегко отладить.
charset<link rel='stylesheet' charset='utf-8'>

Рекомендуемое чтение

Fuxia
источник
Вы имеете в виду, что CSS-файлы должны быть снабжены content-type:text/css;charset=utf-8заголовком?
Pacerier
1
@Pacerier Да, если это кодировка HTML-файла (так и должно быть).
fuxia
Я имею в виду, не подразумевается ли уже, что без кодировки кодировка файла CSS должна интерпретироваться так же, как кодировка встраиваемого файла HTML?
Pacerier
1
@Pacerier Я заметил, что это не всегда так.
MatTheCat
3

Одна из причин всегда включать спецификацию набора символов на каждую страницу, содержащую текст, - это избегать уязвимостей межсайтового скриптинга. В большинстве случаев набор символов UTF-8 является лучшим выбором для текста, включая HTML-страницы.

Тони
источник
2

Если вы помещаете тег <meta> в свои CSS-файлы, вы делаете что-то не так. Тег <meta> принадлежит вашим html- файлам и сообщает браузеру, как кодируется html, он ничего не говорит о css, который является отдельным файлом. Вы могли бы иметь совершенно разные кодировки для ваших HTML и CSS, хотя я не могу себе представить, что это было бы хорошей идеей.

WJS
источник