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

Anonim

Cele mai text-decoration-skipprecizează proprietate în cazul în care ar trebui să rupă un text subliniere, overline, sau grevă-prin. Acest lucru îmbunătățește lizibilitatea textului decorat și corectează gramatica punctuației pentru unele limbi.

Iată un exemplu:

a ( text-decoration-skip: ink; )

Atenție! inkValoarea a fost schimbat la o proprietate cu totul nou, text-decoration-skip-ink: auto;.

Dacă browserul dvs. acceptă această proprietate, veți observa aici că descendenții fiecărui personaj (cum ar fi „y” și „p”) au mici spații albe în jurul marginii:

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

Dacă browserul dvs. nu acceptă această caracteristică, atunci acest lucru ar trebui să vă așteptați de la proprietate într-un browser suport:

ilustrare text-decorare-săritură

text-decoration-skip în OSX și iOS

La sfârșitul anului 2014, Apple a făcut o schimbare text-decorationîn browserele Safari și iOS, care imită modul în care text-decoration-skip: ink;ar trebui să funcționeze. Deși niciuna dintre text-decoration-skipvalori nu este implementată oficial încă, puteți dezactiva acest comportament implicit cu -webkit-text-decoration-skip: none;.

Vezi Pen -webkit-text-decoration-skip: none; de CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

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

Mai multe informatii

  • CSS Text Decoration Module Nivelul 4
    Proiectul editorului
  • text-decoration-skip la MSDN.
  • Discuție despre adăugarea trailing-spacesca valoare din lista de corespondență W3C.
  • Îmbunătățirea lizibilității textului pentru utilizatorii dislexici cu sublinieri de tip „skip-ink”
  • text-decorare-săritură pe MDN
  • text-decorare-săritură-cerneală pe MDN

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 *