text-decoration-skip-ink
je vlastnosť, ktorá riadi správanie underline
a 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-ink
na 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