Текст-украшение-пропустить-чернила - CSS-хитрости

Anonim

text-decoration-skip-ink- это свойство, которое контролирует поведение underlineи overline(но не line-through), когда линия проходит через часть символа / глифа. Это дает вам точный контроль над тем, как подчеркивание или надчеркивание взаимодействуют с символами, выступающими над верхним или нижним краем строки.

Раньше это обрабатывалось с помощью text-decoration-skip: ink;комбинации свойство / значение, но после обсуждения того, как решить проблему каскадных стилей, непреднамеренно перезаписывающих стили с более низким приоритетом (из-за количества доступных опций text-decoration-skip), отдельные свойства будут разбиты на новые свойства похоже на text-decoration-skip-ink. Дополнительные сведения и примеры того, почему это было изменено, см. В этом обсуждении на GitHub и в протоколах рабочей группы CSS, в которых обсуждаются свойства.

По умолчанию браузеры будут «пропускать» области, где «чернила» символа пересекают подчеркивание, например:

Вы можете изменить это поведение, чтобы подчеркивание или наложение проходило через символ, установив text-decoration-skip-inkзначение none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Это приводит к тому, что линия проходит сквозь символы:

Синтаксис

text-decoration-skip-ink: auto | none;

Значения

text-decoration-skip-ink принимает следующие значения:

  • auto является значением по умолчанию и будет «пропускать» подчеркивание / подчеркивание при прохождении через символ.
  • none обрежет это подчеркивание / подчеркивание прямо через ваши болтающиеся y и высокие t.

Пример

См. Пример Pen text-decoration-skip-ink
от CSS-Tricks (@ css-tricks) на CodePen.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
91 87 Нет 88 TP

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 81 год 14,0–14,4 *

Связанный

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Ресурсы

  • Документация MDN
  • Стилизация подчеркиваний в Интернете
  • Пользователи с дислексией и недосказанные подчеркивания