text-decoration повертається

Поки автори W3C-чернетки вирішують, як між собою уживатимуться CSS-властивості text-decoration-skip і text-decoration-skip-ink¹, нові підкреслення можна використовувати вже сьогодні. Підтримка, очікувано, ще доволі кепська, але хоча б зворотньо сумісна.

TL;DR: можемо спокійно додавати body { text-decoration-skip: ink; } в global-rules.css і одразу користуватись перевагами красивих андерлайнів там, де це вже можливо.

.old-underline{
  text-decoration: underline;
}

.new-underline{
  text-decoration: underline;
  text-decoration-skip: ink;
}

На момент цієї публікації в Firefox, Edge і Safari видимої різниці між двома варіантами немає — Edge і Firefox не підтримують text-decoration-skip взагалі, тоді як Safari використовує свій варіант властивості під назвою -webkit-text-decoration-skip і завжди перериває лінію підкреслення за замовчуванням. Користувачі Chrome на прикладі двох наступних абзаців можуть подивитись, як працюватиме новий стандарт після затвердження.

Так виглядає стандартний підкреслений текст. Лінія перекреслюює гліфи і зливається з усіма знаками, включаючи знаки пунктуації. Спеціалісти стверджують, що людям з дислексією це сильно ускладнює читання². З цих причин на практиці таке підкреслення часто вимикають глобальним правилом типу a {text-decoration: none;} і лінію малюють заново за допомогою border-bottom, background-image, псевдоедементів before/after тощо.

Нова CSS-властивість автоматично розриває лінію підкреслення, коли та перетинає гліф. Це спрощує візуальне сприйняття і робить текст більш доступним для людей, яким складно читати.

Більше картинок і посилань можна знайти тут і тут.