I Shar

I Shar

мир глазами веб-разработчика

CSS: currentColor

создаем расширяемые компоненты с помощью ключевого слова CSS currentColor

I Shar

время чтения 1 мин.

Photo by Autumn Studio on Unsplash

Итак, возможно Вы не знаете, но в CSS существует ключевое слово currentColor, которое позволяет использовать значение color для свойств, которые не получают его по умолчанию. Если цвет для элемента не задан, он будет наследоваться из DOM-дерева.

Например, у нас есть два элемента:

Привет!
Осторожно!

Мы хотим, чтобы у элемента .callout текст и границы были синего цвета, а у .callout-danger текст и границы были красными.

А вот и CSS-свойства:

.callout {
 border: 1px solid #0074d9;
 color: #0074d9;
 margin-bottom: 1em;
 padding: 1em;
}
.callout-danger {
 border-color: #ff4136;
 color: #ff4136;
}

Но вместо того, чтобы отдельно указывать цвета для границ элементов, можно использовать ключевое слово 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;
}

А вот и пример на codepen:

Область применения currentColor.


Спасибо за внимание.

    • frontend
    • css

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.