Тонке керування властивістю text-decoration

11

Від автора: Швидше за все, ви вже знайомі з даним властивістю. Наприклад, більшість браузерів, за замовчуванням, задають з допомогою цієї властивості підкреслення у посилань (text-decoration: underline;), яке ми можемо скасувати ось так: text-decoration: none;.

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

Для цієї властивості можна задати декілька значень

Наприклад:

a {
text-decoration: underline overline;
}

Тонке керування властивістю text-decoration

Подивіться опис даної можливості в Альманасі. Якщо бути точніше, то в даному випадку відбувається додавання декількох значень для додаткового властивості text-decoration-line.

Ви можете керувати кольором цієї властивості

За замовчуванням для даного властивості задається колір, вказаний для тексту (властивості color). Але ви можете це змінити:

a {
text-decoration-color: #f06d06;
}

Тонке керування властивістю text-decoration

Подивіться опис даної можливості в Альманасі.

Примітка: Браузерний «движок» Gecko відображає підкреслення під нижнім виносним елементом букв (підрядковим елементом літери), а WebKit/Blink – над:

Тонке керування властивістю text-decoration

Ліворуч показано приклад в браузері Chrome, праворуч – Firefox.

Зазвичай кольорові підкреслення реалізуються з допомогою властивості border, а не text-decoration. Для кожної з границь елемента може бути вказаний індивідуальний колір, товщина, і позиціонуються кордону значно краще.

Але є речі, які можна зробити за допомогою кордонів, наприклад…

Ви можете змінювати стиль цієї властивості

Ви просто не зможете зробити також за допомогою меж!

a {
text-decoration-style: wavy;
}

Тонке керування властивістю text-decoration

Подивіться опис даної можливості в Альманасі.

А можна зробити ще краще

Є певне бажання зробити підкреслення тексту краще. Наприклад, пропускати підкреслення нижніх виносних елементів у букв для поліпшення читабельності підкресленого тексту:

Тонке керування властивістю text-decoration

Така можливість буде доступна завдяки властивості text-decoration-skip, хоча вона поки не реалізована ні в одному з браузерів. А поки ми можемо вказати для підкреслення більш м’який і менш контрастний колір. Тут можна застосувати rgba():

Тонке керування властивістю text-decoration

І, до речі, пропуск нижніх виносних елементів у букв – це всього лише одна з можливостей. Ви також зможете пропускати деякі малі елементи, прогалини і управляти підкресленням по краях тексту.

Примітка: Схоже, що в Safari/iOS пропуск нижніх виносних елементів літер у заданий за замовчуванням.

Тонке керування властивістю text-decoration

Якщо ви хочете скасувати дане поведінка, скористайтеся наступною записом: -webkit-text-decoration-skip: none;.

Тестування

З-за різного ступеня браузерної підтримки, деякі (або всі) демо-приклади можуть не спрацювати у вашому браузері.

Так що Так! Навіть такі прості речі, які ми сприймаємо, як належне, можуть з часом змінюватися в CSS царстві.