currentColor

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Ключевое слова currentColor можно использовать в качестве значения для CSS-свойства, принимающего цвет. Например, background-color. Браузер подставит вместо currentColor текущее значение свойства color.

Пример

Секция статьи "Пример"

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

        
          
          .element {  color: darkblue;  box-shadow: 0 0 5px currentColor;}
          .element {
  color: darkblue;
  box-shadow: 0 0 5px currentColor;
}

        
        
          
        
      
Открыть демо в новой вкладке

Тень рисуется тем же цветом, что и текст элемента.

Как это понять

Секция статьи "Как это понять"

Принцип работы очень похож на кастомные свойства в CSS: берём переменную, присваиваем значение и используем в нужных нам местах. Отличие только в том, что мы не создаём отдельную переменную, а используем готовое ключевое слово.

Если кастомные свойства вам не знакомы, то есть другая хорошая аналогия — ключевое слово inherit. Используем его в качестве значения нужного свойства и при изменении этого стиля у родителя стиль изменится сразу и в потомке. Недостаток такого подхода в том, что мы можем подставить это значение только в то свойство, которое нужно наследовать, а не в несколько.

Есть момент, о котором не нужно забывать. Если вы указали цвет текста и несколько свойств, где используется currentColor, и потом переопределили color, то ко всем свойствам применится именно последний указанный цвет.

        
          
          .element {  color: red;  border: 3px solid currentColor;  box-shadow: 0 0 5px currentColor;  color: black;}
          .element {
  color: red;
  border: 3px solid currentColor;
  box-shadow: 0 0 5px currentColor;
  color: black;
}

        
        
          
        
      

Всё будет черным цветом.

Открыть демо в новой вкладке

Тут работает всё тот же принцип каскада — правила, написанные ниже переопределяют написанное выше.

На практике

Секция статьи "На практике"

Максим Печёрин

Секция статьи "Максим Печёрин"

🛠 Есть очень хороший пример использования currentColor. Допустим, есть кнопка с текстом и поясняющей иконкой внутри.

        
          
          <button>  <span>Удалить</span>  <svg>...</svg></button>
          <button>
  <span>Удалить</span>
  <svg>...</svg>
</button>

        
        
          
        
      

Мы можем применить currentColor для окрашивания иконки в такой же цвет, как и текст. В итоге, просто меняя свойство color, мы стилизуем оба элемента внутри кнопки.

        
          
          button {  color: #0d47a1;}svg {  fill: currentColor;}
          button {
  color: #0d47a1;
}

svg {
  fill: currentColor;
}

        
        
          
        
      

Попробуйте сами, очень легко!

Открыть демо в новой вкладке