Использование currentColor в 2025 году

Нужно отдать должное currentColor. Это ключевое слово в CSS, представляющее оригинальную переменную. Она существовала не всегда, но стала относительно удобной для использования к 2010 году.

currentColor — это значение, контролируемое вами, представляющее нечто другое.

.card {
  color: red;
  border: 3px solid currentColor;
}

Как думаете, какого цвета будет граница? Вопрос без подвоха, это красный. Не нужно дважды писать red. Не нужно беспокоиться, что цвета, так элегантно связанные вместе, разойдутся. Вот она, сила программирования.

Значение currentColor будет равно значению цвета в элементе, на который действует селектор. Свойство color каскадируется, поэтому оно может быть установлено на три уровня выше текущего элемента, или вообще не установлено, или как угодно. Это всегда будет что-то.

Трудные времена

Популярность currentColor прошла. Если поискать в кодовой базе 10-летней давности, можно найти несколько совпадений, но в наши дни CSS переменные — более популярный выбор. Стоит ли отворачиваться от старого друга? Да. Новый друг лучше? Тоже да. Это так, к слову.

.card {
  --mainColor: red;

  color: var(--mainColor);
  border: 3px solid var(--mainColor);
}

Это делает то же самое. Лишняя строка кода, но коллеги-программисты согласятся, что это намного понятнее и универсальнее.

Универсальность

Определённо. CSS переменные могут быть практически любыми. Даже странно, что значение CSS переменной может быть настолько универсальным. Но это, конечно, не только цвета. Надеюсь, это очевидно: currentColor указывает только на цвет. Нет ни currentPadding, ни currentEmotionalState, ни чего-либо ещё.

Баги

Решил поиграть в старые добрые времена. Пока я это делал, заметил несколько странностей.

body {
  color: orange;
  accent-color: currentColor; /* не работает 🤷‍♀️ */
}

Это просто не работает (во всех трёх основных браузерах, которые я пробовал). Почему? Это я вас спрашиваю.

Вот ещё пример:

body {
  color: rebeccaPurple;
}
button {
  border: 1px solid currentColor;
}

Это не баг, как я полагаю, поскольку проблема в том, что таблицы стилей UA обычно задают color самих кнопок (например, color: buttontext;), поэтому, если хотите, чтобы это работало, необходимо задать цвет явно, или принудительно его наследовать.

button {
  color: inherit;
  border: 1px solid currentColor;
}

Я также нашёл проблему с синтаксисом относительного цвета и currentColor, но теперь, когда пишу текст и проверяю факты, не могу найти её снова, так что просто оставлю всё как есть.

Но это по-прежнему круто

Кажется, я уже говорил, что это не очень удобно, но можно возразить, что это не такая уж и плохая идея, если намерения совпадают. Например, есть иконки, где заливка всегда должна совпадать с цветом текста. Это отличный вариант применения.

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
  }
}

Ещё один шаг — можно наложить на иконки небольшую тень, основанную на этом цвете.

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
    filter: drop-shadow(
      0 1px 0 oklch(from currentColor calc(l - 0.25) c h));
  }
}

В 2014 году Simurai демонстрировал мощь возможностей currentColor

Посмотреть на VK Видео

Комментарии