Робимо CSS коротше за допомогою currentColor

15

Від автора: Виявляється, що currentColor з’явився вже досить давно, але я вперше почув про нього лише кілька місяців тому, коли прочитав замітку від Дадлі Сторі (Dudley Storey). Він стверджує, що дане ключове слово має хорошу браузерну підтримку (IE9+). І для мене цього було цілком достатньо, щоб почати використовувати його в реальних проектах. Я був дуже здивований, коли з’ясував, наскільки корисним може бути дане ключове слово: воно дозволяє зробити ваш CSS код коротше і розумніші.

Перш ніж ми почнемо заглиблюватися в розгляд практичних прикладів, наведу невеликий шматочок теорії. Ось як currentColor описується на сайті MDN:

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

SVG

Це мій улюблений випадок. Візьмемо дуже поширений приклад в Інтернеті — кнопка з SVG іконкою і назвою всередині кнопки. У мене теж є такі на моєму сайті:

Робимо CSS коротше за допомогою currentColor

Звичайно, ви дуже відповідальний веб-дизайнер, тому ми продумуєте стилі для різних станів елемента, тобто :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;
}

В даний час я займаюся написанням фронтенда для клієнтського сайту в сфері електронної комерції, на якому присутні кнопки з кількома дизайнами. Більш того, там є посилання, у яких є додаткове оформлення для стану :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;
}

Градієнти

Ключове слово currentColor може використовуватися скрізь, де значенням є позначення кольору, включаючи градієнти. У своїй попередній замітці я трохи поговорив про те, як впровадити в ваш проект модне підкреслення у посилань:

Робимо CSS коротше за допомогою 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% );
}

Властивість 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; }

Псевдо-елементи

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

Робимо CSS коротше за допомогою currentColor

В даному випадку CSS псевдо-елемент ::after виступає в ролі трикутника. Використовуючи currentColor, вам не потрібно повторювати колірні настройки для трикутника та його інтерактивних станів:

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

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

Це не є прикладом написання меншої кількості коду. Це більше приклад написання більш ефективного і підтримуваного коду. Призначення горизонтальної лінії, тега є розподіл різних частин контенту. Я вважаю, що сама лінія не повинна візуально виділятися і привертати до себе увагу:

Робимо CSS коротше за допомогою currentColor

Дадлі (Dudley) вже згадував про це у своїх прикладах, тому я лише повторю це і внести невелику зміну:

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

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

Наостанок…

Чи були у вас випадки практичного застосування currentColor? Поділіться своїм досвідом та враженнями в коментарях.