CSS змінні повільно проходили шлях від intial draft до реалізації в браузері. Але все ж таки одна замінна перебувала у можливостях використання роками це- currentColor. Ця СSS деталь мала хорошу браузерну підтримку та деяке практичне застосування, отже зараз є чудова можливість вивчити як її застосовувати.

Успадковане правило

Одним з менш відомих правил CSS, є те, що коли ви встановлюєте властивість color разом з border без вказування кольору, то границя автоматично переймає колір тексту, для прикладу використаємо HSL колір:

h1{
  color:hsl(0,0%,44%);
  pading: 1rem;
  border-bottom: 4px solid;
  display:inline;
  font-size:4rem;
  font-family:Georgia;
}

 Ось що вийшло:

See the Pen Hojxq by Sergij (@SergioAnd95) on CodePen.

Це гарний трюк: якщо ви зміните властивість color для заголовка, властивість border-color автоматично змінить своє значення на відповідне, теж cаме справедливо для outline та box-shadow. 

Використовуючи currentColor ми можемо розширити цю фунуцію і для дочірніх елементів.

Практичний приклад використання currentColor  

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

p { color: #333; }
p a {
text-decoration: none; color: #333;
font-weight: bolder;
display: inline-block;
padding-bottom: .5rem;
border-bottom: 1px dashed #333;
}

Поки це працює, можливо ви можете побачити проблему: ми говоримо, що посилання повинні бути того ж кольору, що і отчуючий його текст, а також використовувати той же колір на нижній границі тексту. Як ми бачимо це повторення одного і того ж кольору тричі: будь- яка зміна дизайну буде означати зміну кольору кожно з них.

Замість цього зробимо наступне: визначимо колір тексту, тільки один раз і нехай інші властивості успадковують колір через currentColor

p { color: #333; }
p a {
text-decoration: none;
color: currentcolor;
font-weight: bolder;
display: inline-block;
padding-bottom: .5rem;
border-bottom: 1px dashed currentcolor;
}

Ви можете використовувати currentColor будь-де, як градієнт та SVG:

body { color: #f0f; }
hr { height: 10px; background: currentcolor; }

Що було бы дійсно круто, то це якщо ми мали б змогу маніпулювати змінною currentcolor, тобо виконувати щось у вигляді цього: (currentcolor) 10% lighter;. Але такі маніпуляції нажаль неможливі і це залишається у сфері препроцесорів.