Кодировка CSS и псевдоэлементы

  • CSS
  • кодировки

Псевдоэлементы ::before и ::after умеют выводить текст прямо из CSS. Если этот текст русский, а кодировка файла стилей определилась неверно, вместо букв появятся кракозябры. Разбираемся, почему так бывает.

Текст из CSS

.note::before { content: "Это текст из ::before → "; }
.note::after  { content: " ← а это из ::after"; }
Демо

обычный текст абзаца

Текст из content нельзя выделить мышкой и не всегда читают скринридеры, поэтому важную информацию так выводить не стоит. Зато для декоративных стрелок, кавычек и счётчиков это удобно.

Как браузер узнаёт кодировку CSS-файла

Браузер проверяет по порядку и останавливается на первом найденном:

  1. Метка BOM в самом начале файла.
  2. Параметр charset в заголовке Content-Type, который прислал сервер.
  3. Правило @charset "UTF-8"; в первой строке CSS-файла.
  4. Кодировка HTML-страницы, которая подключила этот CSS.
  5. Если ничего нет, UTF-8.

Отсюда классическая ошибка: CSS сохранён в UTF-8, а HTML-страница объявлена как windows-1251 (или не объявлена вовсе, и браузер угадал не то). Шаги 1–3 пустые, срабатывает четвёртый, и русские строки из CSS читаются в чужой кодировке.

Как не получить кракозябры

  • Сохраняйте все файлы в UTF-8 (в VS Code кодировка видна в правом нижнем углу).
  • Указывайте <meta charset="utf-8"> первой строкой в head каждой страницы.
  • Если в CSS есть не-латинские символы, добавьте первой строкой @charset "UTF-8";.
  • Настройте сервер, чтобы он отдавал кодировку в заголовке. Для Apache это строка в .htaccess:
AddDefaultCharset UTF-8
AddCharset UTF-8 .css .js

Ещё надёжнее заменить буквы на escape-коды: content: "\2192" выведет стрелку → в любой кодировке.