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

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

@charset "UTF-8";

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

  • Заголовок Charset HTTP.
  • Знак порядка байтов.
  • Первое правило @charset.
  • UTF-8.

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

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

Ответ 3

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

Ответ 4

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