Перша CSS змінна: currentColor

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;
    }

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

Це гарний трюк: якщо ви зміните властивість 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. Але такі маніпуляції нажаль неможливі і це залишається у сфері препроцесорів.