The text-decoration-skipmenspesifikasikan properti di mana garis bawah teks, overline, atau pemogokan-melalui harus istirahat. Ini meningkatkan keterbacaan teks yang dihias dan mengoreksi tata bahasa tanda baca untuk beberapa bahasa.
Inilah salah satu contohnya:
a ( text-decoration-skip: ink; )Perhatian! The inknilai telah berubah menjadi properti yang sama sekali baru, text-decoration-skip-ink: auto;.
Jika browser Anda mendukung properti ini, Anda akan melihat di sini bahwa turunan dari setiap karakter (seperti “y” dan “p”) memiliki sedikit spasi kosong di sekitar perbatasan:
Lihat Pen text-decoration-skip by CSS-Tricks (@ css-trick) di CodePen.
Jika browser Anda tidak mendukung fitur ini maka inilah yang Anda harapkan dari properti di browser pendukung:
text-decoration-skip di OSX dan iOS
Pada akhir 2014, Apple membuat perubahan text-decorationpada browser Safari dan iOS yang meniru cara text-decoration-skip: ink;kerja yang seharusnya. Meskipun belum ada text-decoration-skipnilai yang diterapkan secara resmi, Anda dapat menonaktifkan perilaku default ini dengan -webkit-text-decoration-skip: none;.
Lihat Pen -webkit-text-decoration-skip: none; oleh CSS-Tricks (@ css-trick) di CodePen.
Terkait
text-decorationtext-decoration-colortext-decoration-linetext-decoration-style
Informasi Lebih Lanjut
Draf Editor Modul Dekorasi Teks CSS Level 4text-decoration-skipdi MSDN.- Diskusi tentang penambahan
trailing-spacessebagai nilai dari milis W3C. - Meningkatkan keterbacaan teks bagi pengguna disleksia dengan garis bawah lewati tinta
- text-decoration-skip di MDN
- text-decoration-skip-ink pada MDN
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 91 | 87 | Tidak | 88 | TP |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 * |