css.in.ua
Підтримати

currentColor CSS значення

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

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

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

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

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

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

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

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

Переглядачі

Переглядач
currentColor

9.0

12.0

1.0

9.5

4.0

1.5
Переглядач
currentColor

2.1

12.0

4.1

Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад.

Наслідування властивості color.

See the Pen LJYboP by css.in.ua (@css_in_ua) on CodePen.

Синтаксис властивості.

body {


    color: red;


}





.button {


  color: black;


  border: 1px solid currentColor;


}

Документи

Зв'язок