Ключевые слова CSS: currentColor

7 мая, 2022 12:25 пп 188 views | Комментариев нет

| | Комментировать запись

Получив доступ к пользовательским свойствам в CSS, мы также получили практически полную власть над нашими переменными. Чтобы поддерживать согласованность цветов внутри элементов, мы также можем использовать ключевое слово currentColor, доступное в Color Module Level 3.

Ключевое слово currentColor работает как переменная для текущего значения свойства color элемента. Если у элемента не определено свойство color, значение currentColor будет определяться по каскаду.

Читайте также: Краткое введение в переменные CSS

Использование currentColor

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

Пример

На словах звучит интересно, давайте теперь посмотрим currentColor в деле и используем его в нескольких разных местах. Ниже вы найдете простой пример кода, который покажет вам, что currentColor также бывает очень полезен в качестве значения заливки SVG, fill.

Так будет выглядеть наш конечный результат.

Вот наша разметка:

class="outer-circle">
  <svg width="150" height="150" viewBox="0 0 322 322">
    <g fill="none" fill-rule="evenodd">
      <circle class="main-circle" cx="161" cy="161" r="161"/>
      <circle class="left-eye" fill="#6A76C0" cx="108" cy="109" r="25"/>
      <path d="M112 239h99a49.5 49.5 0 0 1-99 0zM161 201c13.8 0 25-26.2 25-40 0-9.2-8.3-17.5-25-25-16.7 7.5-25 15.8-25 25 0 13.8 11.2 40 25 40z" fill="#51BAB6"/>
      <circle fill="#6A76C0" cx="221" cy="109" r="25"/>
    </g>
  </svg>
</div>

Как видите, в разметке нет ничего особенного: только внешний div и простая SVG-графика.

Вся магия происходит в стилях CSS:

.outer-circle {
  color: gold;
  border: 10px solid currentColor;
  box-shadow: 0px 0px 15px currentColor;

  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 2rem auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.main-circle {
  /* inherited from parent */
  fill: currentColor;
}

.outer-circle:hover .left-eye {
  fill: currentColor;
}

Более того, значение color вполне может быть переменной CSS, и при этом currentColor все равно будет иметь предсказуемое значение.

Разметка в основном остается такой же, но в outer-circle появляется дополнительный класс:

<div class="outer-circle alternative">
  <!-- ... -->
</div>

А затем в стилях мы переопределяем цвет из .outer-circle и вместо этого используем значение одной из переменных CSS, доступных на этом сайте:

.alternative {
  color: var(--code);
}

Поддержка браузерами

Данные о поддержке функции currentcolor в основных браузерах можно найти по ссылке Can I Use currentcolor?

Итоги

currentColor можно использовать по-разному, потому что многие свойства, которые включают цвет, — border, box-shadow, text-decoration и другие, — по умолчанию все равно используют текущее значение color. Вспомните также о том, что теперь у нас есть полноценные CSS-переменные, и вы заметите, что в наши дни currentColor используется не так уж часто. Тем не менее, к нему можно обращаться, если у вас возникнет необходимость. Особенно это ключевое слово полезно, если вам нужно убедиться, что SVG заполнены тем же цветом, что и текст.

Tags:

Добавить комментарий