DevGang
Авторизоваться

Как использовать значение currentColor в CSS 

В CSS у нас есть специальное значение цвета currentColor, которое может быть неизвестно большинству людей.

Что значит взять currentColor значение для свойства color и использовать его для любого другого свойства, где есть параметр цвета.

Например, следующее:

.red-box {
    color: red;
    border: 2px solid red;
    box-shadow: 5px 10px red;
}

Это то же самое, что иметь:

.red-box {
    color: red;
    border: 2px solid currentColor;
    box-shadow: 5px 10px currentColor;
}

Это дает нам повышенную гибкость для нашего CSS. Нам просто нужно изменить цвет в одном месте. Думайте об этом как о CSS-переменной только для цветов.

И это работает даже с унаследованными значениями. Например:

body {
    color: blue;
}
p {
    border: 1px solid currentColor;
    // will create paragraphs with a blue border
}

Однако помните, что правила каскадирования применяются и здесь. Если у нас есть унаследованное значение и мы установили новый цвет для дочернего элемента, это новое значение будет иметь приоритет.

И это работает даже с унаследованными значениями. Например:

body {
    color: blue;
}
p {
    border: 1px solid currentColor;
    color: red;
    // will create paragraphs with a RED border
}

Источник:

#CSS
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить