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

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

@charset "UTF-8";

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

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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

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

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

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

Это полезно в тех случаях, когда кодировка не указывается в заголовке 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'>

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

• Расс Рольфе: Объявление кодировки символов в CSS
• IANA: официальные имена для наборов символов - другие имена не допускаются; используйте предпочтительное имя,@charset если для одной и той же кодировки зарегистрировано более одного имени.
• MDN: @charset. Есть стол поддержки. Я не верю этому. :)
• Тестовый пример из CSS WG.

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

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