currentColor CSS значення

Ключове слово currentColor відповідає значенню властивості color для поточного елемента. Це дозволяє використовувати значення кольору для властивостей, які не отримують його без задання.

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

Наступні властивості успадковують значення властивості color без задання:

• Колір тексту елемента
• Значення властивості outline
• Колір кордону
• Значення властивості box-shadow
• Колір атрибута alt елемента img. Якщо зображення не може бути відображено, виводиться текст, заданий в атрибуті alt.
• Колір буллетів і межі елементів списку
• У деяких браузерах (наприклад, в Chrome) колір кордону елемента hr

Випадки використання currentColor:

• Використання в анімації.
• Межі кнопок і заливки SVG, відповідні тексту.
• Дизайн інтерфейсу, який наслідує колір навколо компонентів.

правити

Нотатка

Відмінність між currentColor і змінними CSS в тому, що ви не можете привласнити currentColor значення.

автор: Svitlana правити

Нотатка

Значенням currentColor це поточний колір елемента, тобто поточне значення властивості color. Назва currentColor в цьому випадку відображає суть.

автор: Svitlana правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
currentColor	1.0	1.5	4.0	9.5	12.0	9.0

Підтримка: мобільні переглядачі

Переглядач
currentColor	2.1	12.0	4.1

Приклади

+ запропонувати свій приклад у пісочниці

<button class="dark">Рамка кольору тексту</button>
<button class="accent">І тут — свого</button>

button {
    background: #fff;
    padding: 8px 16px;
    border: 2px solid currentColor;
}

.dark   { color: black; }
.accent { color: #d81b60; }