Зачем указывать @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, хотя я не могу себе представить, что это была бы хорошая идея.