text-decoration повертається
Поки автори W3C-чернетки вирішують, як між собою уживатимуться CSS-властивості text-decoration-skip
і text-decoration-skip-ink
1, нові підкреслення можна використовувати вже сьогодні. Підтримка, очікувано, ще доволі кепська, але хоча б зворотньо сумісна.
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 на прикладі двох наступних абзаців можуть подивитись, як працюватиме новий стандарт після затвердження.
Так виглядає стандартний підкреслений текст. Лінія перекреслюює гліфи і зливається з усіма знаками, включаючи знаки пунктуації. Спеціалісти стверджують, що людям з дислексією це сильно ускладнює читання2. З цих причин на практиці таке підкреслення часто вимикають глобальним правилом типу a {text-decoration: none;}
і лінію малюють заново за допомогою border-bottom
, background-image
, псевдоедементів before/after
тощо.
Нова CSS-властивість автоматично розриває лінію підкреслення, коли та перетинає гліф. Це спрощує візуальне сприйняття і робить текст більш доступним для людей, яким складно читати.