Делаем CSS короче с помощью currentColor

Делаем CSS короче с помощью currentColor

От автора: Оказывается, что currentColor появился уже достаточно давно, но я впервые услышал о нем только несколько месяцев назад, когда прочел заметку от Дадли Стори (Dudley Storey). Он утверждает, что данное ключевое слово имеет хорошую браузерную поддержку (IE9+). И для меня этого было вполне достаточно, чтобы начать использовать его в реальных проектах. Я был очень удивлен, когда выяснил, насколько полезным может быть данное ключевое слово: оно позволяет сделать ваш CSS код короче и умнее.

Прежде чем мы начнем углубляться в рассмотрение практических примеров, приведу небольшой кусочек теории. Вот как currentColor описывается на сайте MDN:

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

SVG

Это мой любимый случай. Возьмем очень распространенный пример в Интернете — кнопка с SVG иконкой и названием внутри кнопки. У меня тоже есть такие на моем сайте:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Конечно, вы очень ответственный веб-дизайнер, поэтому мы продумываете стили для разных состояний элемента, т.е. :hover, :focus, :active, чтобы улучшить взаимодействие с пользователем. Вот как обычно выглядит ваш код:

В настоящее время я занимаюсь написанием фронтенда для клиентского сайта в сфере электронной коммерции, на котором присутствуют кнопки с несколькими дизайнами. Более того, там присутствуют ссылки, у которых есть дополнительное оформление для состояния :visited. А также имеется еще некоторое количество случаев использования SVG (тулбары и т.д.), где у SVG должен быть цвет текста. Ключевое слово currentColor помогает сократить код в два раза:

Градиенты

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

Обычный пример на CSS, включающий интерактивные состояния:

Свойство background-image отвечает за подчеркивание и имеет такой же цвет, как и текст. Код выглядит громоздким. Тем не менее, обычно вы не ограничиваете себя лишь одним цветом у ссылки. По своему личному опыту могу сказать, что их бывает как минимум три: общий цвет ссылки, серый и белый (для темного фона). Это означает увеличение кода в три раза. Но ключевое слово currentColor опять творит чудеса:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Псевдо-элементы

Я уверен, что вы сталкивались с использование треугольников на CSS и неоднократно их использовали. Я тоже. И очень часто для того, чтобы улучить внешний вид ссылки:

В данном случае CSS псевдо-элемент ::after выступает в роли треугольника. Используя currentColor, вам не нужно повторять цветовые настройки для треугольника и его интерактивных состояний:

Горизонтальная линия

Это не является примером написания меньшего количества кода. Это больше пример написания более эффективного и поддерживаемого кода. Назначением горизонтальной линии, тега <hr />, является разделение разных частей контента. Я считаю, что сама линия не должна визуально выделяться и привлекать к себе внимание:

Дадли (Dudley) уже упомянул об этом в своих примерах, поэтому я лишь повторю это и внесу небольшое изменение:

Вся хитрость здесь заключается в том, что если когда-нибудь вам потребуется изменить цвет текста, то вам уже не нужно будет изменять цвет горизонтальной линии. Автоматизация процессов — это то, к чему мы всегда стремимся в нашей работе. Чем больше кода мы пишем, тем больше ценим автоматизированные решения.

Напоследок…

Были ли у вас случаи практического применения currentColor? Поделитесь своим опытом и впечатлениями в комментариях.

Автор: Osvaldas Valutis

Источник: http://osvaldas.info/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree