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

Дата публикации: 2015-02-03

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

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

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

SVG

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

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

.button
{
	color: #000;
	border: 2px solid #000;
}
.button:hover,
.button:focus
{
	color: #333;
	border-color: #333;
}
.button:active
{
	color: #666;
	border-color: #666;
}
	.button svg
	{
		fill: #000;
	}
	.button:hover svg,
	.button:focus svg
	{
		fill: #333;
	}
	.button:active svg
	{
		fill: #666;
	}

.button

{

color: #000;

border: 2px solid #000;

}

.button:hover,

.button:focus

{

color: #333;

border-color: #333;

}

.button:active

{

color: #666;

border-color: #666;

}

.button svg

{

fill: #000;

}

.button:hover svg,

.button:focus svg

{

fill: #333;

}

.button:active svg

{

fill: #666;

}

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

/* пропишите это в вашем файле reset-normalize-defaults.css */

svg
{
	fill: currentColor;
}


/* теперь вам вообще не нужно стилизовать SVG и каждый раз прописывать свойство border-color */

.button
{
	color: #000;
	border: 2px solid currentColor;
}
.button:hover,
.button:focus
{
	color: #333;
}
.button:active
{
	color: #666;
}

/* пропишите это в вашем файле reset-normalize-defaults.css */

svg

{

fill: currentColor;

}

/* теперь вам вообще не нужно стилизовать SVG и каждый раз прописывать свойство border-color */

.button

{

color: #000;

border: 2px solid currentColor;

}

.button:hover,

.button:focus

{

color: #333;

}

.button:active

{

color: #666;

}

Градиенты

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

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

a
{
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
	color: #000;
	background-image: -webkit-linear-gradient( left, #000 0%, #000 100% );
	background-image: linear-gradient( to right, #000 0%, #000 100% );
	background-repeat: repeat-x;
	background-position: 0 95%;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}
a:hover,
a:focus
{
	color: #333;
	background-image: -webkit-linear-gradient( left, #333 0%, #333 100% );
	background-image: linear-gradient( to right, #333 0%, #333 100% );
}
a:focus
{
	color: #666;
	background-image: -webkit-linear-gradient( left, #666 0%, #666 100% );
	background-image: linear-gradient( to right, #666 0%, #666 100% );
}
a:visited
{
	color: #999;
	background-image: -webkit-linear-gradient( left, #999 0%, #999 100% );
	background-image: linear-gradient( to right, #999 0%, #999 100% );
}

{

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;

color: #000;

background-repeat: repeat-x;

background-position: 0 95%;

-webkit-background-size: 100% 1px;

background-size: 100% 1px;

}

a:hover,

a:focus

{

color: #333;

}

a:focus

{

color: #666;

}

a:visited

{

color: #999;

}

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

a
{
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
	color: #000;
	background-image: -webkit-linear-gradient( left, currentColor 0%, currentColor 100% );
	background-image: linear-gradient( to right, currentColor 0%, currentColor 100% );
	background-repeat: repeat-x;
	background-position: 0 95%;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}
a:hover,
a:focus		{ color: #333; }
a:focus		{ color: #666; }
a:visited	{ color: #999; }


/* серые ссылки */

.grey-links a			{ color: #999; }
.grey-links a:hover,
.grey-links a:focus		{ color: #666; }
.grey-links a:active	{ color: #333; }

{

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;

color: #000;

background-image: -webkit-linear-gradient( left, currentColor 0%, currentColor 100% );

background-image: linear-gradient( to right, currentColor 0%, currentColor 100% );

background-repeat: repeat-x;

background-position: 0 95%;

-webkit-background-size: 100% 1px;

background-size: 100% 1px;

}

a:hover,

a:focus { color: #333; }

a:focus { color: #666; }

a:visited { color: #999; }

/* серые ссылки */

.grey-links a { color: #999; }

.grey-links a:hover,

.grey-links a:focus { color: #666; }

.grey-links a:active { color: #333; }

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

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

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

a		{ color: #000; }
a:hover,
a:focus		{ color: #333; }
a:active	{ color: #666; }

	a::after
	{
	    width: 0;
	    height: 0;
	    border: 0.5em solid transparent;
	    border-right: none;
	    content: '';
	    display: inline-block;
	}
	a::after,
	a:hover::after,
	a:focus::after,
	a:active::after
	{
	    border-left-color: currentColor;
	}

a { color: #000; }

a:hover,

a:focus { color: #333; }

a:active { color: #666; }

a::after

{

width: 0;

height: 0;

border: 0.5em solid transparent;

border-right: none;

content: '';

display: inline-block;

}

a::after,

a:hover::after,

a:focus::after,

a:active::after

{

border-left-color: currentColor;

}

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

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

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

.post
{
	color: #000;
}
	.post hr
	{
		width: 33%;
		height: 0.313.em; /* 5px */
		border: none;
		background-color: currentColor;
		opacity: .2;
	}

.post

{

color: #000;

}

.post hr

{

width: 33%;

height: 0.313.em; /* 5px */

border: none;

background-color: currentColor;

opacity: .2;

}

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