الروابط في لغة CSSCSS Links طريقة تصميم الروابط على هيئة أزرار، وفحص حالات الروابط في DevTools، ومظهر الروابط الافتراضي وتخصيصه

تُشكّل الروابط التشعبية المبنية بوسم <a> عصب التنقل الأساسي بين صفحات الويب. يمنح المتصفح افتراضياً كل رابط غير مزار لوناً أزرق صريحاً مع خط سفلي، ويحوّله بعد الزيارة إلى اللون البنفسجي، ويلوّنه بالأحمر لحظة الضغط عليه ليميّزه القارئ فوراً عن بقية السطور.

عند تخصيص ألوان الروابط وخلفياتها بأصناف CSS مسطحة تنسجم مع هوية موقعك، احرص دائماً على بقاء الرابط متميزاً بصرياً بوضوح تام عن النص العادي المحيط به كما يبيّن المخطط التوضيحي التالي:

يمر كل رابط يحمل سمة href بخمس حالات تفاعلية عبر الفئات الوهمية، ويجب كتابتها في ملف الأنماط بالتسلسل القياسي الصارم LVHFA حتى لا تطغى حالة السكون على استجابة التمرير أو النقر:

1. الحالة :link: تمثل الرابط الطبيعي الذي لم يسبق للمستخدم فتحه بعد.
2. الحالة :visited: تمثل الرابط الذي سبقت زيارته ومسجّل في سجل المتصفح.
3. الحالة :hover: تعمل فور تمرير مؤشر الفأرة فوق الرابط.
4. الحالة :focus: تعمل عند وصول مستخدم لوحة المفاتيح إلى الرابط عبر مفتاح Tab.
5. الحالة :active: تعمل في اللحظة الخاطفة أثناء ضغط زر الفأرة أو مفتاح الإدخال قبل إفلاته:

إذا حاولت تغيير حجم الخط عبر font-size أو الحشوة عبر padding أو العرض أو صورة الخلفية داخل a:visited، فستلاحظ أن المتصفح يتجاهل تلك الخصائص تماماً! هذا السلوك ليس خللاً برمجياً، بل هو جدار حماية قياسي للخصوصية تطبقه جميع المتصفحات الحديثة.

في بدايات الويب، استغلت بعض المواقع المتطفلة قياس تغيّر أبعاد الروابط المزارة أو طلبات صور الخلفية لمعرفة المواقع البنكية أو الصحية المسجلة في سجل تصفح الزائر سراً. ولسد هذه الثغرة نهائياً، حصرت المواصفات القياسية تأثير :visited في خصائص الألوان فقط—مثل color و background-color و border-color و outline-color—كما تخفي فرقها في لوحة Computed حمايةً لخصوصية المستخدم.

بدلاً من إزالة الخط السفلي عشوائياً من الروابط الموجودة وسط الفقرات، تمنحك خصائص تنسيق النصوص الحديثة تحكماً أنيقاً في وضوح خط التسطير ومسافته:

• إلغاء الخط عبر text-decoration: none: يناسب روابط القوائم العلوية وأزرار التنقل المستقلة التي يدل شكل صندوقها بوضوح على قابليتها للنقر.
• ضبط المسافة والسُمك عبر text-underline-offset و text-decoration-thickness: تُبعد خط التسطير قليلاً للأسفل بمقدار 4px مثلاً، فلا يقطع نقاط الحروف العربية السفلية مثل «ي» و«ب» ولا يتداخل مع الحروف الإنجليزية الممتدة للأسفل.
• مؤشر اليد التفاعلي التلقائي: يمنح المتصفح تلقائياً كل وسم <a href="..."> صالح مؤشر اليد التفاعلي بمجرد وجود سمة الوجهة href دون الحاجة لأي قاعدة إضافية، بينما يؤدي حذف href إلى فقدان مؤشر اليد وتعطيل الوصول عبر لوحة المفاتيح معاً:

تحتاج الواجهات غالباً إلى إبراز روابط الانتقال الرئيسية—مثل «ابدأ الدرس» أو «تصفح المنهج»—على هيئة أزرار مصمتة واضحة. القاعدة الهندسية الذهبية هنا هي الحفاظ على الدلالة الملاحية لوسم <a href="..."> متى كانت الوظيفة انتقالاً إلى عنوان URL أو قسم في الصفحة، ليحتفظ المستخدم بميزة الفتح في تبويب جديد وتفهمه محركات البحث وقارئات الشاشة بدقة.

ولأن وسم الرابط عنصر سطري افتراضياً، نمنحه أولاً display: inline-block حتى تُحترم الحشوات العمودية padding والزوايا المدورة border-radius بانتظام عبر حالات السكون والتمرير والضغط:

يصعب أحياناً اختبار الحالات اللحظية مثل :active أو :focus بالفأرة وحدها لأن رفع الإصبع يلغي الحالة فوراً. توفر لك أدوات المطور DevTools أداة تثبيت مباشرة وسريعة:

1. انقر بزر الفأرة الأيمن على عنصر <a> واختر Inspect لتحديده في شجرة العناصر.
2. اضغط على الزر :hov في أعلى لوحة الأنماط Styles لفتح قائمة الحالات التفاعلية.
3. فعّل مربعات الاختيار بجانب :hover أو :focus أو :active أو :visited لتثبيت مظهرها ومراجعة تباين ألوانها بهدوء.