Text-decoration-skip-ink - 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 буде підрізати підкреслення / накладення прямо через ваші звисаючі і високі т.

Приклад

Див. Приклад Pen text-decoration-skip-ink
від CSS-Tricks (@ css-tricks) на CodePen.

Підтримка браузера

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

Робочий стіл

Chrome Firefox IE Край Сафарі
91 87 Ні 88 ТП

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

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
  • Підкреслення стилю в Інтернеті
  • Користувачі, які страждають на дислексику, та підкреслюють пропуск