На главную

Использование currentcolor в 2025 году: что это и когда пригодится

Для начала вспомним, что такое currentcolor:

currentcolor — это ключевое слово, позволяющее привязать одно свойство (например, border) к значению свойства color, уже определённому на том же элементе (или унаследованному). Благодаря этому, если мы укажем, к примеру:

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

Граница .card окажется того же цвета, что и текст, без необходимости прописывать этот цвет повторно. Это особенно удобно, когда нам нужно стилистически «связать» разные части элемента или когда один цвет влияет на оформление нескольких свойств одновременно.

Как это работает

currentcolor ссылается на итоговое значение (resolved value) свойства color. А color, как вы знаете, наследуется. Это значит, что если где-то у родителя элемента цвет уже задан, дочерние элементы могут использовать currentcolor, не прописывая цвет заново.

Обратите внимание: регистр букв не важен, вы можете писать currentColor, CURRENTCOLOR или даже cUrrENtCoLOr — CSS это не смутит. Я уже пишу currentcolor, так как я пишу CSS, а не XML, как в SVG.

currentcolor отныне и во веки веков можно писать без заглавных букв — это разрешает спецификация CSS Color Module Level 4

Как currentcolor чувствует себя в 2025

В современном мире CSS всё большую популярность набирают кастомные свойства (Custom Properties). Сравните:

.card {
  /* Используя currentcolor */
  color: red;
  border: 3px solid currentcolor;
}

и

.card {
  /* Используя кастомные свойства */
  --mainColor: red;

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

Во втором случае видно, что мы можем «держать» основную переменную (--mainColor) и использовать её где угодно, а не только в привязке к color. Кастомные свойства имеют гораздо более широкую область применения: с их помощью можно передавать не только цвета, но и любые другие значения — хоть отступы, хоть сложные функции. Поэтому в современной вёрстке уже очень сложно найти место для currentcolor, так как он привязан исключительно к color элемента.

Стоит помнить, что

  • В 2025 году использование currentcolor в связке с accent-color не работает в большинстве браузеров. То есть так: 
    body {
  color: orange;
  accent-color: currentcolor; /* увы, не работает */
}
  • Некоторые интерактивные элементы имеют браузерные стили для color, и поэтому: 
    body {
  color: rebeccapurple;
}

button {
  /* не сработает, так как есть браузерный color */
  border: 1px solid currentcolor;
}
  • Но пример можно починить, явно указав наследование цвета: 
    body {
  color: rebeccapurple;
}

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

Надо ли использовать?

Может показаться, что в 2025 году currentcolor полностью вытеснен кастомными свойствами. В целом, для больших и сложных тем кастомные свойства действительно функциональнее. Но есть ситуации, где currentcolor — отличное «быстрое решение»:

  • Если у вас есть иконки, которые должны принимать цвет шрифта родителя, можно просто написать: 
    nav {
  color: salmon;

  svg.icon {
    fill: currentcolor;
  }
}
  • Если к этим иконкам вы хотите добавить тень того же оттенка, можете использовать фильтр с относительным значением: 
    svg.icon {
  fill: currentcolor;
  filter: drop-shadow(
    0 1px 0 oklch(from currentcolor calc(l - 0.25) c h)
  );
}

Тогда при смене color иконки не только перерисуются, но и тень будет соответствовать новому цвету.

Кстати, о currentcolor часто спрашивают на собеседованиях, поэтому знать о существовании currentcolor нужно.

Поделитесь тем как вы используете currentcolor в 2025 в телеграм-канале.

Источники