x

العمل مع الفئات الزائفة Pseudo-Classes والعناصر الزائفة Pseudo-Elements في CSS

ما هي أمثلة الفئات الزائفة Pseudo-classes المرتبطة بإجراءات المستخدم User Action على العناصر؟

نظري

تُعد ملاحظات المستخدم (User feedback) عنصراً جوهرياً (crucial element) في تصميم المواقع الإلكترونية. فعلى سبيل المثال، من المهم أن يتلقى المستخدمون إشارات مرئية (visual cues) عند تفاعلهم مع عناصر الموقع، كتحريك مؤشر الفأرة فوق زر معين أو النقر على رابط. وتساعد هذه الإشارات المستخدمين على فهم حالة العناصر التفاعلية؛ كتوضيح ما إذا كان الرابط قد تمت زيارته مسبقاً أم لا.

فهم الفئات الزائفة الخاصة بإجراءات المستخدم Understanding User Action Pseudo-Classes

تُعد الفئات الزائفة المرتبطة بإجراءات المستخدم (User action pseudo-classes) في لغة CSS كلماتٍ مفتاحيةً خاصةً تتيح لك تقديم هذا النوع من التغذية الراجعة (feedback) دون الحاجة إلى استخدام JavaScript أو لغات برمجة أخرى.

تتضمن هذه الفئات الزائفة (pseudo-classes) كلاً من :hover و :active و :focus و :visited ، وغيرها. وهي تتيح لك تغيير مظهر العناصر بناءً على تفاعلات المستخدم (user interactions)، مما يعزز تجربة المستخدم (user experience) بشكل عام.

لنستعرض بعض الفئات الزائفة (pseudo-classes) المتعلقة بإجراءات المستخدم، ولنرى كيف تعمل.

الفئات الزائفة المرتبطة بإجراءات المستخدم الشائعة Common User Action Pseudo-Classes


:active

تطبق الفئة الزائفة :active الأنماط (styles) عندما يُفعّل المستخدم عنصرًا. على سبيل المثال، عندما ينقر المستخدم على زر أو رابط، توفر رد فعل بصري فوري، تُشعِر المستخدم بأن إجراءاته قد تم رصدها.

index.html


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

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

styles.css


a:active {
 color: crimson;
}

معاينة:


:hover

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

index.html


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

<button class="btn">مرِّر مؤشر الفأرة فوقي</button>

styles.css


.btn:hover {
 background-color: darkgreen;
 color: white;
 cursor: pointer;
}

معاينة:


:focus

تُطبّق الفئة الزائفة :focus أنماطًا عند اكتساب عنصر ما للتركيز، عادةً عبر التنقل باستخدام لوحة المفاتيح أو عند نقر المستخدم داخل حقل إدخال في نموذج (form input). لا يقتصر هذا على تقديم ملاحظات (feedback) فحسب، بل هو ضروري أيضًا لسهولة الوصول (accessibility). فهو يضمن للمستخدمين الذين يعتمدون بشكل كبير على لوحات المفاتيح تحديد العنصر الذي يتفاعلون معه بسهولة.

إليك مثالًا على حقل إدخال (input field) يكتسب التركيز عند النقر عليه أو التنقل إليه عبر لوحة المفاتيح (keyboard) :

index.html


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

<form>
 <input type="text">
</form>

styles.css


input:focus {
 outline: 2px solid darkgreen;
 border-radius: 4px;
}

معاينة:


:visited

تستهدف الفئة الزائفة :visited الروابط التي زارها المستخدم. ويمكن أن يكون هذا مفيداً لمساعدة المستخدمين على التمييز بين الصفحات التي زاروها بالفعل وتلك التي لم يزوروها بعد. إليك مثال على تغيير لون نص الرابط (anchor text color) إلى اللون السماوي (cyan) عند زيارة الرابط:

index.html


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

<a href="https://www.example.com" target="_blank">تفضل بزيارة Example.com</a>

styles.css


a:visited {
 color: cyan;
}

معاينة:


:checked

تتيح لك الفئة الزائفة :checked في لغة CSS تنسيق عناصر النماذج - مثل مربعات الاختيار (checkboxes) وأزرار الاختيار (radio buttons) - عند تحديدها (اختيارها checked). وتُعد هذه الفئة الزائفة مفيدة لتخصيص مظهر تلك العناصر بهدف تحسين تجربة المستخدم، وذلك على الرغم من أن المتصفحات توفر تنسيقات افتراضية لها.

إليك مثالًا مع مربع اختيار (checkbox) للموافقة على الشروط في موقع ويب.

ملاحظة: يستخدم بعض كود CSS في هذا المثال خصائص لم نتناولها بعد. الغرض من ذلك هو فقط إعطاؤك فكرة عن كيفية إنشاء مربع اختيار (checkbox) مخصص. ستتعلم تفاصيل عمل كل هذا في الدروس وورش العمل القادمة.

index.html


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

<form>
 <label>
  موافق
  <input class="checkbox" type="checkbox" />
 </label>
</form>

styles.css


.checkbox {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 0.25s ease;
vertical-align: middle;
}

.checkbox:hover {
border-color: #888;
}

.checkbox:checked {
background-color: #4caf50;
border-color: #4caf50;
}

.checkbox:checked::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.checkbox:focus {
outline: 2px solid #90caf9;
outline-offset: 2px;
}

معاينة:

في هذا المثال، نستخدم الخاصية appearance مضبوطة على none لإزالة التنسيق الافتراضي الذي يطبقه المتصفح على مربعات الاختيار. عندما يحدد المستخدم المربع، سيكون له لون خلفية green.

فئات زائفة أخرى متعلقة بالإجراءات Other Action Pseudo-Classes

من الأمثلة الأخرى على الفئات الزائفة المرتبطة بالإجراءات (action pseudo-classes) :

  • :focus-within : تُستخدم لتطبيق أنماط على عنصر ما عندما يكتسب هو أو أي من العناصر المتفرعة عنه التركيز (focus).

  • :enabled : لاستهداف أزرار النماذج أو العناصر الأخرى المُمكَّنة حالياً (currently enabled).

  • :disabled : لاستهداف أزرار النماذج أو العناصر الأخرى المعطّلة (disabled).

  • :target : تُستخدم لتطبيق أنماط على عنصر يُمثّل هدفاً لجزء من رابط URL (وهو الجزء الذي يلي رمز # في الرابط).


أسئلة :

ما الذي تتيح لك القيام به الفئات الزائفة الخاصة بإجراءات المستخدم (user action pseudo-classes) ؟

1. تتيح لك إنشاء الرسوم المتحركة والانتقالات. ❌

2. تسمح لك بتعديل هيكل DOM ديناميكيًا. ❌

3. تتيح لك تقديم ملاحظات للمستخدم دون الاعتماد على JavaScript. ✅

4. تسمح لك بتنسيق العنصر الأخير في قائمة. ❌


ما الذي تقوم به الفئة الزائفة :checked في لغة CSS ؟

1. تحدد عنصرًا عندما يكون معطلاً. ❌

2. تحدد عنصرًا عندما يتم التمرير فوقه بالفأرة. ❌

3. تنسق عناصر مثل مربعات الاختيار أو أزرار الاختيار (checkboxes or radio buttons) التي تم تحديدها (checked). ✅

4. تنسق عنصرًا عندما يكتسب التركيز. ❌


ما الذي تقوم به الفئة الزائفة :focus ؟

1. تحدد عنصرًا عندما يتم التمرير فوقه بالفأرة. ❌

2. تطبق الأنماط عندما يكتسب عنصر التركيز، عادةً عبر التنقل بلوحة المفاتيح أو النقر. ✅

3. تحدد عنصرًا بعد إرسال نموذج. ❌

4. تطبق الأنماط على عنصر عندما يكون معطلاً. ❌