Текст-украс-прескочи-мастило - ЦСС-трикови

Anonim

text-decoration-skip-inkје својство које контролише понашање underlineи overline(али не line-through) када линија пролази кроз део знака / глифа. Ово вам даје прецизно подешену контролу над начином на који подвлачења или подвлачења ступају у интеракцију са ликовима који се протежу изнад врха или висе испод дна реда.

Раније се ово решавало путем text-decoration-skip: ink;комбинације својство / вредност, али након дискусија о томе како се решавати проблем каскадних стилова ненамерним преписивањем стилова нижег приоритета (због броја доступних опција text-decoration-skip), појединачна својства ће се разбити у нова својства слично као text-decoration-skip-ink. За више контекста и примере зашто је ово промењено, погледајте ову ГитХуб дискусију и записнике ЦСС радне групе који расправљају о својствима.

Подразумевано, прегледачи ће „прескочити“ подручја на којима „мастило“ карактера прелази подвучену црту, на пример:

Можете да промените ово понашање да бисте подвукли / подвукли да прођете кроз знак тако што ћете подесити 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 исећи ће ту подвучену црту право кроз ваше висеће и-ове и високе т-ове.

Пример

Погледајте пример оловке тект-децоратион-скип-инк
од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
91 87 Не 88 ТП

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 14,0-14,4 *

Повезан

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

Ресурси

  • МДН документација
  • Подвлачење стајлинга на Вебу
  • Корисници са дислексијом и прескакање мастила подвлаче