الدرس 7 من 8
روابط تُقرأ
- 10 دقائق
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
خطّ تحت الرابط لا يزاحم الحروف
الشرح
القارئ يحتاج أن يعرف الرابط قبل أن يقرأه، واللون وحده لا يكفي: من لا يميّز الألوان لا يرى فرقًا بين الأزرق والأسود. لذلك يبقى الخطّ تحت الرابط، وحذفه بـ text-decoration: none من أشيع أخطاء التصميم.
لكن الخطّ الافتراضي يلتصق بالحروف، ويصطدم في العربية بذيولها النازلة كالراء والواو والياء. text-underline-offset يبعده عنها، وtext-decoration-thickness يضبط سُمكه فلا يطغى على النصّ.
ثم الحالات: :hover يؤكّد أن النصّ يُضغط، و:visited يذكّر القارئ بما زاره. وفي :visited لا يقبل المتصفح إلا خصائص اللون، كي لا تكشف الصفحة سجلّ تصفّحك.
المطلوب
أعد الخطّ تحت روابط .prose بسُمك محدّد وإزاحة عن الحروف، وأعطِ :visited لونًا خاصًّا، واجعل :hover يُبرز الرابط.
معايير التصحيح
5 معايير- الروابط مسطّرة
- سُمك الخطّ محدّد لا تلقائي
- الخطّ مُزاح عن الحروف
- :visited يلوّن ما زاره القارئ
- :hover يُبرز الرابط