Опубликовано: четверг, 10 апреля 2025 г. в 08:21

Понимание селектора `:root` и CSS переменных

Используйте возможности CSS3 с селектором :root, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн.

Что такое `:root`

Селектор :root — специальный псевдокласс CSS, указывающий на корневой элемент документа. В HTML это тег <html>. Разработчики используют его для определения глобальных CSS переменных, использующихся во всей таблице стилей.

:root {
  --brand-color: #1e90ff;
  --base-font-size: 16px;
}

Эти переменные можно использовать так:

body {
  font-size: var(--base-font-size);
  color: var(--brand-color);
}

Для чего нужен `:root`

Централизованная стилизация

Определение CSS переменных в :root позволяет централизованно управлять стилями. Например, если необходимо обновить основной цвет или базовый font-size, достаточно один раз изменить их в :root.

:root {
  --main-bg: #f5f5f5;
  --text-color: #222;
}

.section {
  background: var(--main-bg);
  color: var(--text-color);
}

Улучшение читабельности

Использование CSS переменных делает CSS более читабельным и удобным для сопровождения. Чёткие и описательные имена помогут другим разработчикам (и вам в будущем) быстро понять, для чего предназначено то или иное значение.

:root {
  --header-height: 72px;
  --nav-color: #ffffff;
}

header {
  height: var(--header-height);
  background-color: var(--nav-color);
}

Отзывчивый дизайн

Значения переменных можно изменять с помощью медиа-запросов, что упрощает создание отзывчивых макетов.

:root {
  --content-padding: 24px;
}

@media (max-width: 600px) {
  :root {
    --content-padding: 16px;
  }
}

.content {
  padding: var(--content-padding);
}

Важные замечания

Поддержка браузерами

Переменные CSS поддерживаются во всех основных современных браузерах (с апреля 2017 года эта функция работает на новейших устройствах и в основных версиях браузеров), но старые браузеры, такие как Internet Explorer, их не поддерживают (полифилл CSS переменных для IE11). Всегда проверяйте совместимость, если поддерживаете устаревшие браузеры.

Область действия и переопределения

CSS переменные также могут быть определены в конкретной области действия. Эти локальные переменные переопределяют глобальные при использовании в своей области действия.

:root {
  --highlight: green;
}

.card {
  --highlight: orange;
  border-color: var(--highlight); /* orange */
}

.link {
  color: var(--highlight); /* green */
}

Обновления в реальном времени с JavaScript

Переменные CSS можно динамически обновлять с помощью JavaScript. Это делает их идеальными для таких возможностей, как переключение тем.

document.documentElement.style.setProperty('--brand-color', '#ff6347');

Заключение

Селектор :root — это мощная возможность в CSS3, помогающая определять и управлять глобальными CSS переменными. Он повышает гибкость, упрощает сопровождение, делает таблицы стилей чище и понятнее. Хотя важно учитывать поддержку браузерами и область применения CSS переменных, эффективное использование :root — это большой шаг к написанию современного, масштабируемого CSS.

Понимание селектора :root и CSS переменных

Что такое :root

Для чего нужен :root