Покращуємо зовнішній вигляд посилань з допомогою модуля CSS Text Decoration

Від автора: інтернет працює на посиланнях. Крім усього іншого, в посилань дуже суворі обмеження по стилям, здебільшого з міркувань безпеки. Дизайнери, наприклад, Marcin Wichary помітили, що ці обмеження впливають на розбірливість посилань, тому вони запропонували свої способи обходу цих заборон. CSS стандарти розвиваються, і багато з цих проблем поступово вирішуються, що покращує юзабіліті і зовнішній вигляд посилань.

Властивість text–decoration–skip

За замовчуванням посилання мають синій колір з підкресленням. Підкреслення заходить на нижні виноски таких літер, як j, що ускладнює читання посилань. Є безліч обхідних шляхів вирішення цієї проблеми, але тепер в CSS є свій спосіб – властивість text–decoration–skip. У властивості дуже багато значень, але ціль завжди одна – вказати місця, де підкреслення не повинно отрисовыватться.

Більшість дизайнерів зацікавить значення ink, вирішальне описану вище проблему. Це значення обриває підкреслення в місцях з нижніми виносками букв. Ефект можете подивитися на початку статті.

a { text–decoration–skip: ink; }

В Safari 10 така поведінка вбудовано за замовчуванням. У всіх інших браузерах у властивості text–decoration–skip за замовчуванням стоїть значення none.

У властивості text–decoration–skip є значення spaces, з яким підкреслення не буде перестрибувати між словами. Є й інші значення, більш докладно див. у статті на Mozilla Developer Network.

На даний момент властивість text–decoration–skip підтримується в Safari, Chrome підтримки немає. Однак у Chrome Canary підтримка є, що, можливо, призведе незабаром до підтримки і в звичайному Chrome.

Властивість text-decoration-color

За замовчуванням колір підкреслення посилання успадковується від кольору тексту. Існує безліч способів встановити інший колір, найпростіший через border-bottom замість text-decoration. Однак тепер в CSS є прямий спосіб змінювати колір підкреслення:

a { text–decoration–color: #ccc; }

Підтримка у text–decoration–color майже така ж, як у text–decoration–skip: обидва підтримуються в Chrome Canary, але просто Chrome і інших браузерах немає.

Висновок

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