Расширенное наследование цвета с помощью переменной currentColor
HTML&CSS

Расширенное наследование цвета с помощью переменной currentColor

Оригинал: Extending the Color Cascade with the CSS currentColor Variable, Sara Soueidan

Если вы работаете с Sass или LESS, то, вероятно, вы уже используете переменные в своих стилях и знаете, чем они хороши. Если вы не используете препроцессор, вам может быть интересно, почему столько разговоров вокруг переменных и чем они полезны. В этой статье, мы рассмотрим, чем полезны переменные, и познакомимся с одной конкретной переменной: currentColor.

Чем хороши переменные?

Переменные в CSS полезны тем, что они помогают придерживаться принципа разработки DRY (Don’t Repeat Yourself — «не повторяйся»). Особенно полезны они в крупных проектах, которые содержат большое число повторяющихся значений.

Один из наиболее популярных случаев использования переменных — это цветовые схемы / темизация приложения. С использованием переменных создавать и поддерживать цветовые схемы в CSS становится намного проще. К примеру, цветовая схема как правило требует использования определенного цвета в нескольких свойствах. Если вы захотите изменить базовый цвет темы, вам нужно будет изменить все вхождения данного цвета в таблице стилей. С помощью переменных, вы можете определить значение в одном месте (например, в переменной «primary-color») и использовать эту переменную в таблице стилей. Если спустя какое-то время вам захочется изменить этот цвет, нужно будет изменить значение этой переменной, и все значения изменятся автоматически.

В CSS2.1 не было переменных (хотя это не совсем правда, как вы увидите в этой статье). В 2014 году появились нативные переменные CSS, которые в целом похожи на переменные препроцессоров. Эти переменные возможно даже более функциональные, чем переменные препроцессоров. Переменные CSS могут использоваться в качестве значения во всех свойствах.

В дополнение к переменным в CSS появилось новое ключевое слово, которое практически аналогично переменной: currentColor.

Ключевое слово currentColor

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

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


box-shadow: inset 2px 2px 3px currentColor;
background-color: currentColor; /* not a good idea! */
background-image: linear-gradient(currentColor, transparent);

Другое отличие между currentColor и переменными CSS в том, что вы не можете присвоить currentColor значение. Значением currentColor является текущий цвет элемента, т.е. текущее значение свойства color. Название currentColor в этом случае отражает суть.

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

Другими словами: ключевое слово currentColor позволяет в свойствах элементов наследовать значение свойства color.

Для свойств, которые уже наследуют значение свойства color, ключевое слово currentColor не будет полезно.

Свойства и элементы, которые наследуют значение color по умолчанию

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

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

В примере ниже цвет границы должен иметь значение «purple»:


.parent {
    color: purple;
}

.child {
    border: 5px solid; /* we didn’t specify the border color here */
}

Следующие свойства наследуют значение свойства color по умолчанию:

  • Цвет текста элемента
  • Значение свойства outline
  • Цвет границы
  • Значение свойства box-shadow
  • Цвет атрибута alt элемента img. Если изображение не может быть отображено, выводится текст, заданный в атрибуте alt.
  • Цвет буллетов и границы элементов списка
  • В некоторых браузерах (например, в Chrome) цвет границы элемента <hr>

Если для этих свойств явно не задать значение цвета, он будет наследоваться от значения свойства color.

Ниже представлено демо, показывающее, как элементы наследуют свойство color, заданное у элемента . Измените значение свойва color у элемента , чтобы убедиться, что цвет этих элементов изменится.

Здесь может возникнуть вопрос: если многие свойства уже наследуют значение свойства color, то как и где может использоваться currentColor?

Расширенное наследование цвета с помощью currentColor

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


background-image: linear-gradient(to bottom, currentColor, #fff);

Такой пример был создан Скотом Келлумом, который взял за основу эту концепцию и пошел немного дальше, добавив анимацию. Т.к. анимируется свойство color, все свойства, наследующие color, также анимируются. Посмотреть пример Скотта Келлума можно на CodePen.

Это отличный пример использования currentColor.

Тем не менее, есть более практичные варианты использования currentColor. Давайте рассмотрим некоторые из них.

Случаи использования currentColor

Использование currentColor для темизации компонентов UI

От предыдущего примера, мы можем перейти к более практичному (и блестящему, надо сказать) примеру, продемонстрированному Саймоном «Simurai» в прошлом году на CSSConf. Доклад был посвящен тому, как использовать flexbox, currentColor и em в компонентах UI, чтобы быстро стилизовать все приложение прямо в браузере.

Чтобы продемонстрировать полезность currentColor, Саймон создал набор элементов интерфейса, включая несколько слайдеров. Эти элементы имели некую цветовую схему. В качестве цвета слайдеров и полей ввода использовалась переменная currentColor.

Пример использования currentColor для слайдера

Точно также, остальные компоненты интерфейса могут наследовать цвет, определенный выше в иерархии. Таким образом, вы можете изменять значение цвета и получать новые наборы цветных компонентов, практически автоматизируя этот процесс.

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

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

Используя возможности devtools, вы можете изменить тему, как вам нравится, и сохранить результат из браузера. Подробнее можно почитать в блоге Саймона.

Использование currentColor для темизации и стилизации SVG

Возможности SVG велики, но они имеют некоторые ограничения стилизации, в зависимости от того, как вы их используете. Один из таких случаев — повторное использование частей SVG с помощью элемента <use>.

Если вы не знакомы с элементом <use>, можно почитать подробнее о нем здесь . Идея элемента заключается в повторном использовании части SVG где угодно на странице. Использование элемента похоже на копирование элемента в графическом редакторе, за исключением того, что копии остаются связанными, т.е. изменение оригинала приводит к изменению копии.

Часто элемент <use> используется при создании SVG-спрайтов . SVG содержит иконки и используется как спрайт, мы можем вставлять иконки на странице используя . Подробнее о SVG спрайтах можно почитать в статье .

Когда SVG вставляется с помощью элемента <use>, его содержимое копируется и содержится в shadow DOM. Это значит, его нельзя выбрать и стилизовать с помощью CSS. Это одна из причин того, почему SVG иконки используются так ограниченно.

Мы можем обойти это ограничение, указав в качестве значения currentColor, таким образом он как бы «просочится» внутрь SVG.

Рассмотрим пример SVG-иконки:


<svg class="home-icon">
    <use xlink:href="#home"></use>
</svg>

Допустим, иконка #home будет содержать что-то вроде этого:


<symbol id="home">
    <rect id="bottom" fill="currentColor" ... />
    <polygon id="roof" ... />
</symbol>

Значение свойства color для элемента #roof будет наследоваться от родителя, т.к. для элемента #roof не задано другое значение, а атрибут fill элемента #bottom также будет наследоваться от родителя, т.к. в качестве его значения использовался currentColor.


.home-icon {
    fill: red;
    color: white;
}

Фабрис Вайнберг написал статью об этой технике в своем блоге на Codepen .

Пользоваться этой техникой удобно, когда вы хотите создать несколько иконок, каждая из которых имеет свой цвет; все, что вам придется сделать в этом случае — изменить значения color и fill в CSS. Пример, который Фабрис демонстрируем в своем посте:

See the Pen Sass SVG Icons 1.1KB by Fabrice Weinberg (@FWeinb) on CodePen.

Конечно, вы можете использовать currentColor для нескольких элементов внутри SVG. Однако, как вы, наверное, уже заметили, эта техника позволяет изменять только два цвета внутри SVG.

Если вы хотите иметь больше контроля над цветами и указывать дополнительные цветовые значения — вам потребуется больше переменных; как раз здесь пригодятся переменные CSS. Вы можете прочитать больше об этом здесь .

Заключение

В примерах выше мы рассмотрели, как можно использовать currentColor для того, чтобы управлять цветом, который используется в нескольких местах, и меть возможность задавать его в одном месте. Это помогает писать более компактный, поддерживаемый CSS. Особенно в ситуациях, подобных примеру Саймона с UI компонентами.

С помощью переменных CSS вы можете определить свой собственный набор переменных и использовать их в гораздо большем количестве случаев, чем currentColor, т.к. они принимаются в качестве значения любыми свойствами CSS, а не только теми, которые требуют цвет в качестве значения. Опять же, если вы уже используете препроцессор — вы знаете, как полезны переменные.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться