Перш ніж ми почнемо заглиблюватися в розгляд практичних прикладів, приведу невеликий шматочок теорії. Ось як currentColor описується на сайті MDN:
Ключове слово currentColor представляє обчислене значення властивості color у конкретного елемента. Воно дозволяє зробити так, щоб властивості кольору були успадковані іншими властивостями кольору або властивостями дочірнього елемента, яка не успадкував ця властивість за замовчуванням.
Це мій улюблений випадок. Візьмемо дуже поширений приклад в Інтернеті - кнопка з SVG іконкою і назвою всередині кнопки. У мене теж є такі на моєму сайті:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Звичайно, ви дуже відповідальний веб-дизайнер, тому ми продумуєте стилі для різних станів елемента, тобто hover. focus. active, щоб поліпшити взаємодію з користувачем. Ось як зазвичай виглядає ваш код:
В даний час я займаюся написанням фронтенда для клієнтського сайту в сфері електронної комерції, на якому присутні кнопки з декількома дизайнами. Більш того, там присутні посилання, у яких є додаткове оформлення для стану: visited. А також є ще кілька випадків використання SVG (тулбари і т.д.), де у SVG повинен бути колір тексту. Ключове слово currentColor допомагає скоротити код в два рази:
Ключове слово currentColor може використовуватися скрізь, де значенням є позначення кольору, включаючи градієнти. У своїй попередній замітці я трохи поговорив про те, як впровадити в ваш проект модне підкреслення у посилань:
Типовий приклад на CSS, що включає інтерактивні стану:
Властивість background-image відповідає за підкреслення і має такий же колір, як і текст. Код виглядає громіздким. Проте, зазвичай ви не обмежуєте себе лише одним кольором у посилання. По своєму особистому досвіді можу сказати, що їх буває як мінімум три: загальний колір посилання, сірий і білий (для темного фону). Це означає збільшення коду в три рази. Але ключове слово currentColor знову творить чудеса:
Псевдо-елементи
Я впевнений, що ви стикалися з використання трикутників на CSS і неодноразово їх використовували. Я теж. І дуже часто для того, щоб покращити зовнішній вигляд посилання:
В даному випадку CSS псевдо-елемент. after виступає в ролі трикутника. Використовуючи currentColor, вам не потрібно повторювати колірні настройки для трикутника і його інтерактивних станів:
горизонтальна лінія
Це не є прикладом написання меншої кількості коду. Це більше приклад написання більш ефективного і підтримуваного коду. Призначенням горизонтальної лінії, тега
, є поділ різних частин контенту. Я вважаю, що сама лінія не повинна візуально виділятися і привертати до себе увагу:
Дадлі (Dudley) вже згадав про це в своїх прикладах, тому я лише повторю це і внесу невелика зміна:
Вся хитрість тут полягає в тому, що якщо коли-небудь вам потрібно змінити колір тексту, то вам вже не потрібно буде змінювати колір горизонтальної лінії. Автоматизація процесів - це те, до чого ми завжди прагнемо в нашій роботі. Чим більше коду ми пишемо, тим більше цінуємо автоматизовані рішення.
Наостанок ...
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
