В text-decoration-skipсобственности определяет , где текст подчеркиванием, Overline или Зачеркнутые должны ломаться. Это улучшает разборчивость оформленного текста и исправляет грамматику пунктуации для некоторых языков.
Вот один пример:
a ( text-decoration-skip: ink; )Берегись! inkЗначение было изменено на совершенно новое свойство, text-decoration-skip-ink: auto;.
Если ваш браузер поддерживает это свойство, вы заметите здесь, что в нижних элементах каждого символа (например, «y» и «p») есть небольшие пробелы вокруг границы:
См. Pen text-decoration-skip от CSS-Tricks (@ css-tricks) на CodePen.
Если ваш браузер не поддерживает эту функцию, то это то, чего вы должны ожидать от свойства в поддерживающем браузере:
text-decoration-skip в OSX и iOS
В конце 2014 года Apple внесла в text-decorationбраузеры Safari и iOS изменение, имитирующее принцип text-decoration-skip: ink;работы. Хотя ни одно из text-decoration-skipзначений еще официально не реализовано, вы можете отключить это поведение по умолчанию с помощью -webkit-text-decoration-skip: none;.
См. Pen -webkit-text-decoration-skip: none; от CSS-Tricks (@ css-tricks) на CodePen.
Связанный
text-decorationtext-decoration-colortext-decoration-linetext-decoration-style
Дополнительная информация
Черновик редактора уровня 4 модуля оформления текста CSStext-decoration-skipв MSDN.- Обсуждение добавления
trailing-spacesв качестве значения из списка рассылки W3C. - Повышение читабельности текста для пользователей с дислексией за счет пропуска чернил подчеркивания
- текст-украшение-пропуск на MDN
- текст-украшение-пропустить-чернила на MDN
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 91 | 87 | Нет | 88 | TP |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 14,0–14,4 * |