Text-dekorace-přeskočit-inkoust - Triky CSS

Anonim

text-decoration-skip-inkje vlastnost, která řídí chování underlinea overline(ale ne line-through), když linka prochází částí znaku / glyfu. Získáte tak vyladěnou kontrolu nad tím, jak podtržení nebo podtržení interagují se znaky, které sahají nad horní část nebo visí pod spodní částí čáry.

Dříve to bylo zpracováno pomocí text-decoration-skip: ink;kombinace vlastnost / hodnota, ale po diskusích o tom, jak řešit problém kaskádových stylů neúmyslně přepisujících styly s nižší prioritou (kvůli množství dostupných možností text-decoration-skip), budou jednotlivé vlastnosti rozděleny na nové vlastnosti podobně jako text-decoration-skip-ink. Další kontext a příklady, proč se to změnilo, najdete v této diskusi na GitHubu a v minutách CSS Working Group diskutujících o vlastnostech.

Ve výchozím nastavení prohlížeče „přeskočí“ oblasti, kde „inkoust“ znaku překračuje podtržení, například:

Toto chování můžete změnit a vynutit tak, aby podtržení / podtržení procházelo znakem nastavením text-decoration-skip-inkna none.

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

Výsledkem je proříznutí čáry přímo mezi znaky:

Syntax

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

Hodnoty

text-decoration-skip-ink přijímá následující hodnoty:

  • auto je výchozí hodnota a při průchodu znakem „přeskočí“ podtržení / podtržení.
  • none odstřihne toto podtržení / podtržení přímo přes vaše visící y a vysoké t.

Příklad

Podívejte se na příklad Pen text-decoration-skip-ink
od CSS-Tricks (@ css-tricks) na CodePen.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
91 87 Ne 88 TP

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

Příbuzný

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

Zdroje

  • Dokumentace MDN
  • Styling Podtržení na webu
  • Dyslexičtí uživatelé a podtržení inkoustem