CSS currentColor — колір із властивості color
Ключове слово currentColor відповідає значенню властивості color для поточного елемента. Це дозволяє використовувати значення кольору для властивостей, які не отримують його без задання.
Ключове слово currentColor схоже на змінну CSS з деякими відмінностями: ви можете використовувати currentColor тільки в тих властивостях, які вимагають колір в якості значення; якщо властивість не приймає колір в якості значення, воно не буде працювати з currentColor.
Наступні властивості успадковують значення властивості color без задання:
- Колір тексту елемента
- Значення властивості
outline - Колір кордону
- Значення властивості
box-shadow - Колір атрибута
altелементаimg. Якщо зображення не може бути відображено, виводиться текст, заданий в атрибутіalt. - Колір буллетів і межі елементів списку
- У деяких браузерах (наприклад, в Chrome) колір кордону елемента
hr
Випадки використання currentColor:
- Використання в анімації.
- Межі кнопок і заливки SVG, відповідні тексту.
- Дизайн інтерфейсу, який наслідує колір навколо компонентів.
Загальний опис
автор: NagarD
- Нотатка
-
Відмінність між
автор: SvitlanacurrentColorі змінними CSS в тому, що ви не можете привласнитиcurrentColorзначення. - Нотатка
-
Значенням
автор: SvitlanacurrentColorце поточний колір елемента, тобто поточне значення властивостіcolor. НазваcurrentColorв цьому випадку відображає суть.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| currentColor | 1.0 | 1.5 | 4.0 | 9.5 | 12.0 | 9.0 |
| Переглядач |  |
 |
 |
|---|---|---|---|
| currentColor | 2.1 | 12.0 | 4.1 |
Приклади
+ запропонувати свій приклад у пісочниці
currentColor — це поточний колір тексту елемента: рамка кожної кнопки автоматично бере свій color, окремо його не задаючи.
HTML
<button class="dark">Рамка кольору тексту</button>
<button class="accent">І тут — свого</button>CSS
button {
background: #fff;
padding: 8px 16px;
border: 2px solid currentColor;
}
.dark { color: black; }
.accent { color: #d81b60; }Наслідування властивості color.
HTML
<div>
<p>Перелік</p>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>CSS
body {
color: blue;
}
div {
padding: 30px;
width: 300px;
height: 300px;
border: 5px solid;
}
p {
font-size: 30px;
width: 80%;
}
li {
margin-bottom: 10px;
padding: 10px;
color: green;
display: inline-block;
position: relative;
}
li::after{
content: '';
display: block;
position: absolute;
right: 10px;
left: 10px;
bottom: 0;
margin: auto;
height: 3px;
background: currentColor;
}
li:hover{
color: red;
}
ul{
list-style: none;
}Три бейджі, у яких відрізняється ЛИШЕ рядок color: рамка, значок і тінь написані через currentColor і перефарбовуються самі. Останній блок — пастка: background: currentColor разом із color на одному елементі робить напис невидимим.
HTML
<span class="badge ok">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
<path d="M8 12.5 L11 15.5 L16 9.5" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>
Готово
</span>
<span class="badge warn">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
<path d="M12 7 L12 13" fill="none" stroke="currentColor" stroke-width="2"></path>
<circle cx="12" cy="16.5" r="1.2" fill="currentColor"></circle>
</svg>
Увага
</span>
<span class="badge err">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
<path d="M9 9 L15 15 M15 9 L9 15" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>
Помилка
</span>
<p class="trap">background: currentColor на тому ж елементі, що й color — текст тут є, просто його не видно</p>CSS
body {
font-family: system-ui, sans-serif;
font-size: 16px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 8px 10px 0;
padding: 8px 16px;
border: 2px solid; /* border-color типово = currentColor */
border-radius: 999px;
box-shadow: 0 2px 0 currentColor;
}
/* єдина відмінність між трьома бейджами */
.ok { color: #0a7d5a; }
.warn { color: #b26b00; }
.err { color: #b3261e; }
.trap {
color: #b3261e;
background: currentColor;
padding: 12px 16px;
margin-top: 8px;
}Динамічний приклад.
HTML
<div>
<p>Перелік</p>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<label for="select">Задати колір нижнього кордону: </label>
<select class="input" id="select">
<option value="currentColor" name="color" selected>currentColor</option>
<option value="coral" name="color">coral</option>
<option value="cyan" name="color">cyan</option>
</select>
</div>CSS
body {
color: blue;
}
div {
padding: 30px;
width: 300px;
height: 300px;
border: 5px solid;
}
p {
font-size: 30px;
width: 80%;
}
li {
margin: 10px;
padding: 10px 0;
color: green;
display: inline-block;
position: relative;
border-bottom: 3px solid currentColor;
}
li:hover{
color: red;
}
ul{
list-style: none;
}
.input{
font-size: 16px;
}
label{
display: inline-block;
margin-bottom: 10px;
}JS
document.querySelectorAll('#select').forEach((el) => el.addEventListener('change', function () {
var color = this.value;
document.querySelectorAll('li').forEach((n) => n.style.setProperty('border-color', color));
}));Коментарі
Коментарів ще немає — будьте першим!