Text-decorare-săritură-cerneală - CSS-Tricks

Anonim

text-decoration-skip-inkeste o proprietate care controlează comportamentul underlineși overline(dar nu line-through) când linia trece printr-o parte a unui caracter / glif. Acest lucru vă oferă un control reglat asupra modului în care interacțiunile subliniate sau supradirecționate interacționează cu caracterele care se extind deasupra părții superioare sau care atârnă sub partea inferioară a unei linii.

Anterior, acest lucru a fost gestionat prin text-decoration-skip: ink;combinația proprietate / valoare, dar după discuții despre cum să rezolve problema stilurilor în cascadă suprascriind neintenționat stilurile cu prioritate mai mică (datorită numărului de opțiuni disponibile pentru text-decoration-skip), proprietățile individuale vor fi împărțite în proprietăți noi similar cu text-decoration-skip-ink. Pentru mai multe contexte și exemple de ce s-a schimbat acest lucru, consultați această discuție GitHub și minutele Grupului de lucru CSS care discută despre proprietăți.

În mod implicit, browserele vor „sări” zonele în care „cerneala” unui personaj traversează un subliniat, astfel:

Puteți schimba acest comportament pentru a forța sublinierea / suprasolicitarea să treacă prin personaj setând text-decoration-skip-inkla none.

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

Acest lucru are ca rezultat tăierea liniei prin personaje:

Sintaxă

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

Valori

text-decoration-skip-ink acceptă următoarele valori:

  • auto este valoarea implicită și va „sări” sublinierile / suprasolicitările atunci când treceți printr-un personaj.
  • none va tăia acea subliniere / subliniere chiar prin y-urile dvs. și t înalte.

Exemplu

Vedeți exemplul Pen text-decoration-skip-ink
de CSS-Tricks (@ css-tricks) pe CodePen.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
91 87 Nu 88 TP

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 14.0-14.4 *

Legate de

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

Resurse

  • Documentația MDN
  • Sublinierea stilului pe web
  • Utilizatori dislexici și sublinieri de tip „skip-ink”