تنسيق القوائم (Lists) والروابط (Links)

توجد حالات مختلفة للرابط (different states of a link)، منها: رابط link ، تمت زيارته visited ، تمرير المؤشر فوقه hover ، التركيز عليه focus ، ونشط active. هذه الحالات (states) مهمة لمساعدة المستخدمين على التعرف على الروابط (links) وتوفير ملاحظات واضحة (clear feedback) بعد التفاعل معها، مما يحسن سهولة الاستخدام (usability) وإمكانية الوصول (accessibility).

يُعد تنسيق (Styling) حالات الرابط المختلفة (different link states) أمراً بالغ الأهمية لسهولة الاستخدام وإمكانية الوصول (usability and accessibility)، إذ يوفر مؤشرات بصرية حول الحالة الراهنة للرابط (current state of the link)؛ مما يساعد المستخدمين على معرفة الروابط (links) التي زاروها، والرابط الذي يتفاعلون معه حالياً، وما سيحدث عند النقر عليه.

بالنسبة للمستخدمين الذين يعانون من ضعف البصر أو إعاقات إدراكية، يمكن لهذه الأنماط المميزة (distinct styles) أن تجعل التنقل (navigation) أسهل بكثير وأكثر بديهية (intuitive).

علاوة على ذلك، تُعزز حالات الروابط الواضحة (clear link states) تجربة المستخدم الشاملة من خلال توفير تغذية راجعة (feedback) فورية حول تفاعلات المستخدم، مما يقلل من الارتباك ويُحسّن سهولة التنقل (navigability) في الموقع.

يمكن تنسيق هذه الحالات (states) باستخدام ما يُعرف بـ "الفئات الزائفة" pseudo-classes في CSS.

الفئة الزائفة (pseudo-class) هي كلمة مفتاحية تُضاف إلى المُحدِّد (selector) لتحديد حالة خاصة (special state) للعنصر المُحدَّد.

على سبيل المثال، يمكن لـ :hover تغيير لون الزر (button's color) عند تحريك مؤشر المستخدم فوقه، بينما يمكن لـ :visited تغيير لون الرابط (color of a link) الذي تمت زيارته مسبقاً.

تتيح لك الفئات الزائفة (pseudo-classes) تنسيق العناصر بناءً على حالتها (their state) أو تفاعل المستخدم (user's interaction) معها، دون الحاجة إلى ترميز إضافي (additional markup) في كود HTML.

تبدو صيغة "الفئة الزائفة" pseudo-class على النحو التالي، حيث يمثل A المُحدِّد (selector) ويمثل :B الفئة الزائفة pseudo-class :

A:B {
 property: value;
}
        

لفهم كيفية تنسيق حالات الرابط المختلفة (different link states) بشكل أفضل، دعنا نلقي نظرة على بعض الأمثلة.

تُستخدم الفئة الزائفة :link لتنسيق الروابط غير المُزارة (unvisited links)، مما يشير إلى أنها قابلة للنقر (clickable).

إليك مثال على استهداف عنصر الرابط (anchor element) واستخدام الفئة الزائفة :link :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

/* Normal state (unvisited link) الحالة العادية (رابط لم تتم زيارته) */
a:link {
 color: red;
}
            

معاينة:

سيُغيِّر المثال أعلاه اللون الأزرق الافتراضي للرابط (link's default blue color) إلى اللون الأحمر red عندما يكون الرابط غير مُزار (unvisited).

تُستخدم السمة :visited لتنسيق الروابط التي تمت زيارتها أو النقر عليها مسبقاً (visited or clicked)، مما يساعد المستخدمين على تتبع الروابط (links) التي سبق لهم النقر عليها. إليك مثال على استخدام الفئة الزائفة (:visited pseudo-class) :

<link rel="stylesheet" href="styles.css">

<a href="https://openarabtech.github.io">التقنية العربية المفتوحة</a>
            

/* Visited link رابط تمت زيارته */
a:visited {
 color: green;
}
            

معاينة:

سيقوم هذا الكود بتلوين الرابط باللون الأخضر green عند النقر عليه.

تُغيِّر الخاصية :hover نمط الرابط (link's style) عندما يُمرِّر المستخدم مؤشر الفأرة فوقه، مما يوفر إشارة بصرية تدل على أن الرابط تفاعلي (link is interactive). إليك مثال على استخدام الفئة الزائفة (:hover pseudo-class) :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

/* Hover state حالة التمرير */
a:hover {
 color: green;
}
            

معاينة:

سيقوم هذا الكود بتلوين الروابط باللون الأخضر green عند تمرير مؤشر الفأرة فوقها.

تُضيف السمة :focus أنماطاً (styles) حول الرابط عند التركيز عليه (focused)، مثلما يحدث عند التنقل (navigating) باستخدام لوحة المفاتيح (keyboard) أو لتعزيز إمكانية الوصول.

إليك مثال يستخدم الخاصية :focus لتطبيق إطار برتقالي مصمت (solid orange outline) عند التركيز على الرابط (link is focused).

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

/* Focus state حالة التركيز */
a:focus {
 outline: 2px solid orange;
}
            

معاينة:

تُغيِّر الحالة :active أنماط الرابط (link's styles) أثناء النقر عليه، مما يوفر للمستخدم تغذية راجعة (feedback) فورية تفيد بأن إجراءه قيد التسجيل. إليك مثال على استخدام الفئة الزائفة (:active pseudo-class) :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

/* Active state حالة نشطة */
a:active {
 color: pink;
}
            

معاينة:

سيجعل مثال الكود هذا لون الرابط وردياً pink بمجرد النقر عليه.