Testo-decorazione-salto - Trucchi CSS

Anonim

La text-decoration-skipproprietà specifica dove deve interrompersi un testo sottolineato, sovrastante o barrato. Ciò migliora la leggibilità del testo decorato e corregge la grammatica della punteggiatura per alcune lingue.

Ecco un esempio:

a ( text-decoration-skip: ink; )

Dritta! Il inkvalore è stato cambiato in una proprietà del tutto nuovo, text-decoration-skip-ink: auto;.

Se il tuo browser supporta questa proprietà, noterai qui che i discendenti di ogni carattere (come "y" e "p") hanno piccoli spazi bianchi attorno al bordo:

Vedi Pen text-decoration-skip di CSS-Tricks (@ css-tricks) su CodePen.

Se il tuo browser non supporta questa funzione, questo è ciò che dovresti aspettarti dalla proprietà in un browser di supporto:

illustrazione di testo-decorazione-saltare

text-decoration-skip in OSX e iOS

Alla fine del 2014, Apple ha apportato una modifica ai text-decorationbrowser Safari e iOS che imita come text-decoration-skip: ink;dovrebbe funzionare. Sebbene nessuno dei text-decoration-skipvalori sia ancora ufficialmente implementato, puoi disabilitare questo comportamento predefinito con -webkit-text-decoration-skip: none;.

Vedere Pen -webkit-text-decoration-skip: none; di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

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

Maggiori informazioni

  • Modulo di decorazione del testo CSS Livello 4
    Bozza del redattore
  • text-decoration-skip in MSDN.
  • Discussione sull'aggiunta trailing-spacescome valore dalla mailing list del W3C.
  • Miglioramento della leggibilità del testo per gli utenti dislessici con sottolineature di input penna
  • text-decoration-skip su MDN
  • text-decoration-skip-ink su MDN

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
91 87 No 88 TP

Mobile / Tablet

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