Pautan gaya dengan garis bawah sebenar

Sebelum membincangkan cara gaya garis bawah, mari kita fikirkan tentang soalan: Sekiranya kita menggunakan garis bawah?

Dalam reka bentuk grafik, garis bawah sering dianggap tidak mencukupi. Terdapat cara yang lebih baik untuk menekankan fokus, membina hierarki dan membezakan tajuk.

Butterick's "Praktikal Typesetting" mempunyai cadangan yang jelas:

Jika anda mahu menggunakan garis bawah, gunakan berani atau huruf miring sebaliknya. Dalam kes -kes khas, seperti tajuk, anda juga boleh mempertimbangkan menggunakan semua ibu kota, modal kecil, atau mengubah saiz fon. Masih tidak mempercayainya? Saya cadangkan anda mencari buku, akhbar atau majalah untuk melihat sama ada ada teks yang digariskan. Gaya ini terutamanya dikaitkan dengan tabloid pasar raya.

Tetapi persekitaran rangkaian berbeza. Hyperlink adalah ciri -ciri yang menentukan Internet; Mereka telah digariskan sejak kelahiran Internet. Ini adalah konvensyen yang difahami secara umum, dan maknanya sangat jelas - digariskan untuk menunjukkan pautan .

Walau bagaimanapun, banyak laman web yang popular telah tidak ada: contohnya, New York Times, majalah New York, The Washington Post, Bloomberg, Amazon, Apple, Github, Twitter, Wikipedia. Pereka utama Google Jon Wiley menjelaskan pada tahun 2014 bahawa mengeluarkan garis bawah dari halaman hasil carian dapat membuat rupa yang lebih bersih. Perlu diingat bahawa kebanyakan laman web ini mengekalkan biru terang yang sedikit berbeza (#0000EE) yang telah menjadi tetapan lalai untuk penyemak imbas sejak kelahiran web. Walaupun ini memberikan petua visual untuk kebanyakan pengguna, mungkin tidak cukup untuk lulus ujian pematuhan akses WCAG.

Warna tidak boleh digunakan sebagai satu -satunya cara visual untuk menyampaikan maklumat, menunjukkan tindakan, tindak balas segera, atau membezakan elemen visual. - WCAG 2.1

WCAG tidak memerlukan garis bawah untuk pautan, tetapi ia mengesyorkan berbuat demikian. Pengguna buta warna perlu dapat mengenali pautan. Anda boleh membezakannya dengan cara lain, seperti menggunakan berat fon berani. Atau anda boleh menyimpan ciri bantuan visual yang lama ini. Tetapi jika kita menggunakan garis bawah, kita mahu mereka kelihatan cantik . Pereka sederhana Marcin Wichar menerangkan garis bawah yang sempurna sebagai:

[...] Terlihat tetapi tidak terlalu jelas - membuat orang menyedari kandungan apa yang boleh diklik tetapi tidak terlalu menarik perhatian. Ia sepatutnya berada di jarak yang betul dari teks, dengan selesa di bawah teks, dan juga badan menurun menduduki ruang yang sama.

Secara tradisinya, mencapai ini memerlukan beberapa helah CSS .

Petua yang kami gunakan pada masa lalu

Ini adalah trik yang semua pemaju sudah biasa dengan: border-bottom . Dengan menggunakan border-bottom untuk mensimulasikan garis bawah, kita dapat mengawal warna dan ketebalan. Terdapat satu masalah dengan pseudo-orderscores ini: jarak dari teks terlalu besar. Mereka terletak di bawah surat yang turun. Anda boleh menyelesaikan masalah ini dengan menggunakan line-height , tetapi ini akan membawa masalah sendiri. Teknologi yang sama menggunakan box-shadow . Marcin Wichary mempelopori teknologi yang paling kompleks, menggunakan background-image untuk mensimulasikan garis bawah. Ini semua tip berguna, tetapi tidak lagi diperlukan.

Tetapkan gaya garis bawah yang sebenar

Pada akhirnya, terima kasih kepada dua sifat CSS baru, kita boleh membezakan pautan tanpa mengorbankan gaya.

• text-underline-offset mengawal kedudukan garis bawah.
• text-decoration-thickness mengawal ketebalan garis bawah, overscores dan strikethroughs.

Menurut blog WebKit:

Anda juga boleh menentukan from-font untuk kedua-dua sifat, yang akan mengekstrak nilai metrik yang berkaitan dari fail fon itu sendiri yang digunakan.

Agensi UX Clearleft Boldly menggunakan (pseudo) menggariskan untuk menarik perhatian orang ramai dengan pautan dengan gaya berwarna -warni. Berikut adalah contoh pseudo-underscore:

 <code>a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }</code>

Perhatikan bahawa pseudo-underscore ini jelas terletak di bawah badan menurun huruf "y":

Berikut adalah perenggan yang sama, menggunakan DevTools untuk menggunakan gaya yang sama dengan garis bawah yang benar menggunakan harta CSS baru:

 <code>a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }</code>

Anda akan melihat bahawa saya menggunakan unit EM dalam kod sampel. Spesifikasi sangat mengesyorkan menggunakannya dan bukannya piksel supaya skala ketebalan dengan fon.

Ciri -ciri ini telah diterbitkan di Safari dan akan muncul di Firefox 70.

Oleh kerana pelayar Microsoft Edge berhijrah ke Chromium, kami akhirnya akan mendapat sokongan penyemak imbas untuk harta text-decoration-style , yang menyediakan pilihan berikut: pepejal (lalai), dua, bertitik, bertitik, dan bergelombang. Menggunakan sifat -sifat baru ini dalam kombinasi membuka pelbagai kemungkinan.

Walau bagaimanapun, mungkin peningkatan terbesar di garis bawah di web adalah bahawa ia dapat dicapai tanpa pemaju melakukan apa -apa. Pada masa lalu, perasaan menurun telah dipotong dengan kejam oleh garis bawah, yang jauh dari rahmat. Pemaju yang digunakan untuk menyelesaikan kelemahan ini dengan menggunakan bayang -bayang teks yang sepadan dengan warna latar belakang. text-decoration-skip-ink menyediakan cara yang lebih baik untuk meninggalkan ruang untuk badan keturunan.

Dengan mudah, ia ditetapkan kepada nilai lalai baru untuk garis bawah; Ini bermakna bahawa penampilan garis bawah telah diperbaiki, dan kebanyakan pemaju web masih tidak menyedari kewujudan harta ini. Sekiranya anda mahu garis bawah untuk merangkumi glyph, anda boleh menetapkan harta ini kepada none .

Atas ialah kandungan terperinci Pautan gaya dengan garis bawah sebenar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!