Возможно, вы не знали, но в CSS существует ключевое слово currentColor, которое позволяет использовать значение color для свойств, которые не получают его по умолчанию. Если цвет для элемента не задан, он будет наследоваться из DOM-дерева.
Пример использования
Представим, что у нас есть два элемента:
<div class="callout">
Привет!
</div>
<div class="callout callout-danger">
Осторожно!
</div>Мы хотим, чтобы текст и границы элемента .callout были синего цвета, а у .callout-danger — красного.
Обычный подход выглядел бы так:
.callout {
border: 1px solid #0074d9;
color: #0074d9;
margin-bottom: 1em;
padding: 1em;
}
.callout-danger {
border-color: #ff4136;
color: #ff4136;
}Использование currentColor
Вместо того, чтобы отдельно указывать цвета для границ элементов, можно использовать ключевое слово currentColor:
.callout {
border: 1px solid currentColor;
color: #0074d9;
margin-bottom: 1em;
padding: 1em;
}Теперь для элемента .callout-danger можно не указывать значение свойства border-color, так как оно автоматически унаследует значение от свойства color:
.callout {
border: 1px solid currentColor;
color: #0074d9;
margin-bottom: 1em;
padding: 1em;
}
.callout-danger {
color: #ff4136;
}Применение currentColor
Ключевое слово currentColor полезно для упрощения кода и обеспечения консистентности стилей. Оно может использоваться для:
- Цвета границ (
border) - Цвета тени текста (
text-shadow) - Цвета фона (
background-color) - Цвета тени блока (
box-shadow) - И других свойств, связанных с цветом
Примеры на практике
Вот несколько примеров использования currentColor:
.button {
background-color: currentColor;
color: white;
border: 2px solid currentColor;
padding: 10px 20px;
}
.button:hover {
color: #0074d9;
}
.alert {
border: 2px solid currentColor;
color: #ff4136;
background-color: #ffecec;
padding: 15px;
}Заключение
Использование ключевого слова currentColor позволяет упростить CSS-код и сделать его более логичным и поддерживаемым. Это особенно полезно для элементов, где нужно поддерживать консистентность цветов, таких как кнопки, предупреждения и другие компоненты интерфейса.
Пример на CodePen
Для визуализации примеров вы можете создать демо на CodePen, чтобы увидеть, как currentColor упрощает управление стилями и делает код более чистым и понятным.
