Text-dekorácia-preskočiť-atrament - Triky CSS

Anonim

text-decoration-skip-inkje vlastnosť, ktorá riadi správanie underlinea overline(ale nie line-through), keď čiara prechádza časťou znaku / glyfu. Takto získate vyladenú kontrolu nad tým, ako podčiarknutia alebo podčiarknutia reagujú so znakmi, ktoré sa rozkladajú nad hornou časťou alebo pod spodnou časťou čiary.

Predtým sa to riešilo pomocou text-decoration-skip: ink;kombinácie vlastnosť / hodnota, ale po diskusiách o tom, ako vyriešiť problém kaskádových štýlov neúmyselného prepísania štýlov s nízkou prioritou (kvôli množstvu dostupných možností text-decoration-skip), sa jednotlivé vlastnosti rozdelia na nové vlastnosti. podobne ako text-decoration-skip-ink. Ďalšie súvislosti a príklady dôvodov, prečo sa to zmenilo, nájdete v tejto diskusii na GitHub a v zápisniciach pracovnej skupiny pre CSS o vlastnostiach.

V predvolenom nastavení prehliadače „preskočia“ oblasti, kde „atrament“ znaku prechádza podčiarknutím, napríklad takto:

Toto správanie môžete zmeniť a vynútiť tak, aby podčiarknutie / preťaženie prechádzalo cez znak nastavením text-decoration-skip-inkna none.

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

To vedie k tomu, že sa čiara pretína priamo cez znaky:

Syntax

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

Hodnoty

text-decoration-skip-ink akceptuje nasledujúce hodnoty:

  • auto je predvolená hodnota a pri prechode cez znak „preskočí“ podčiarknutie / podčiarknutie.
  • none prereže toto podčiarknutie / podčiarknutie priamo cez vaše visiace písmená y a vysoké t.

Príklad

Pozrite si príklad Pen text-decoration-skip-ink
od CSS-Tricks (@ css-tricks) na CodePen.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
91 87 Nie 88 TP

Mobil / tablet

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

Súvisiace

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

Zdroje

  • Dokumentácia MDN
  • Styling Podčiarknutie na webe
  • Používatelia dyslektiky a podčiarknutia atramentu