Чому слід вказати @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 містить символи Unicode, а не тільки ASCII.

Використовувати його в метатезі добре, але лише для сторінок, які містять цей метатег.

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

Це корисно в контекстах, коли кодування не повідомляється за заголовком HTTP або іншими метаданими, наприклад, локальною файловою системою.

Уявіть таку таблицю стилів:

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

Якщо зчитувач зберігає файл на жорсткому диску, а ви пропускаєте це @charsetправило, більшість браузерів прочитає його в кодуванні локальної локальної системи ОС, наприклад, Windows-1252, а замість стрілки вставить â †.

На жаль, ви не можете покластися на цей механізм, оскільки підтримка досить… рідкісна. І пам’ятайте, що в мережі заголовок HTTP завжди буде заміняти @charsetправило.

Правильні правила визначення набору символів таблиці стилів є в порядку пріоритетності:

1. Заголовок HTTP Charset.
2. Позначка порядку байтів.
3. Перше @charsetправило.
4. UTF-8.

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

Рекомендоване читання

• Russ Rolfe: оголошення кодувань символів у CSS
• IANA: Офіційні імена для наборів символів - інші імена заборонені; використовувати бажане ім'я для, @charsetякщо для одного і того ж кодування зареєстровано більше одного імені.
• MDN : @charset. Є таблиця підтримки. Я цьому не довіряю. :)
• Тестовий випадок від робочої групи CSS.

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

Якщо ви поміщаєте тег <meta> у свої файли css, ви робите щось не так. Тег <meta> належить до ваших html- файлів і повідомляє браузеру, як кодується html, він нічого не говорить про css, який є окремим файлом. Можливо, у вас можуть бути зовсім інші кодування для ваших html та css, хоча я не можу уявити, що це було б гарною ідеєю.