Bilakah untuk mengelakkan harta swasta teks dekorasi

Artikel baru-baru ini mengenai CSS Chrome yang menggariskan isu-isu yang menyerlahkan text-decoration-thickness dan text-underline-offset , yang kuat, kuat yang disokong oleh CSS yang menawarkan kawalan bawah garis yang lebih baik.

Mari kita menggambarkan text-decoration-thickness . Garis bawah lalai Ubuntu agak tebal. Kita boleh memperbaikinya:

 : mana-mana pautan {
  Ketebalan Teks-Dekorasi: 0.08EM;
}

NOTA: Saya menggunakan :any-link dan bukannya<a></a> untuk mensasarkan hanya hiperpautan sebenar (mereka yang mempunyai atribut href ). Stylesheet ejen pengguna penyemak imbas juga memihak :any-link .

Bergegas Garis bawah: Perangkap yang halus

Banyak laman web (seperti Google Search dan Wikipedia) menggunakan hover -garis bawah -bawah hanya muncul pada Mouseover. Walaupun secara amnya tidak dapat dielakkan untuk pautan dalam teks, pendekatan ini sesuai dengan pautan jarak jauh (navigasi, footers). Inilah contoh tajuk:

 Header: Mana-mana-Link {
  Teks-penyerapan: Tiada;
}

Header: Mana-mana-Link: Hover {
  Teks-penyerapan: garis bawah;
}

Walau bagaimanapun, hover menggariskan kembali ke ketebalan lalai, mengabaikan tetapan text-decoration-thickness terdahulu kami. Kenapa?

Isu ini berpunca daripada text-decoration yang menjadi harta tersendiri, dan text-decoration-thickness ketebalannya. Menetapkan text-decoration kepada none atau underline menetapkan semula komponen hiasan teks lain (ketebalan, gaya, warna). Modul hiasan teks CSS menentukan ini: nilai yang ditinggalkan kembali ke keadaan awal mereka.

Penyemak imbas DevTools mengesahkan ini: Periksa hyperlink, memperluaskan harta text-decoration untuk melihat nilai komponen.

Untuk mengekalkan ketebalan tersuai pada hover, kami memerlukan pelarasan. Beberapa penyelesaian wujud:

• Re-declare text-decoration-thickness dalam :hover .
• Menggabungkan ketebalan terus ke dalam text-decoration .
• Gunakan text-decoration-line dan bukannya text-decoration .

Strategi text-decoration yang optimum

Hanya mengulangi text-decoration-thickness dalam :hover State berfungsi, tetapi ia berlebihan:

 / * Pilihan A */
Header: Mana-mana-Link {
  Teks-penyerapan: Tiada;
}

Header: Mana-mana-Link: Hover {
  Teks-penyerapan: garis bawah;
  Ketebalan Teks-Dekorasi: 0.08EM;
}

Idealnya, memanfaatkan keupayaan shorthand text-decoration :

 / * Pilihan b */
Header: Mana-mana-Link {
  Teks-penyerapan: Tiada;
}

Header: Mana-mana-Link: Hover {
  Teks-penyerapan: Garis bawah 0.08EM;
}

Nota: Pendekatan singkat ini agak baru; Versi CSS yang lebih tua tidak mempunyai fungsi ini. Enjin WebKit Safari masih menggunakan prefix -webkit-text-decoration dan kekurangan sokongan ketebalan (lihat Webkit Bug 230083). Ini menjadikan pilihan B Safari-tidak bersesuaian.

Pendekatan terbaik menggunakan text-decoration-line , diperkenalkan bersama dengan singkat:

 / * Pilihan c */
Header: Mana-mana-Link {
  Teks-dekorasi: Tiada;
}

Header: Mana-mana-Link: Hover {
  Teks-dekorasi-baris: garis bawah;
}

Ini hanya mengubah komponen line , memelihara ketebalan yang ditetapkan sebelumnya. Ini adalah penyelesaian serasi yang paling mantap dan silang.

Pertimbangan harta tanah

Ingat: Ciri-ciri Shorthand (seperti text-decoration , background ) Tetapkan semula nilai yang ditinggalkan kepada lalai mereka. Ini menjelaskan mengapa gaya seperti background-repeat: no-repeat ditindih oleh background: url(flower.jpg) . Lihat "Reset CSS yang tidak disengajakan" untuk maklumat lanjut.

Atas ialah kandungan terperinci Bilakah untuk mengelakkan harta swasta teks dekorasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!