في هذا الدرس 7تصفّح المواضيع
قبل أن ينقر المستخدم على أي عنصر في الصفحة، يخبره شكل مؤشر الفأرة بالوظيفة المتوقعة منه فوراً. وتربط خاصية cursor في CSS عناصر الواجهة بأيقونات المؤشر القياسية في نظام التشغيل لتبدو الأزرار والبطاقات مألوفة وواضحة الدلالة.
تشمل أهم القيم القياسية pointer لشكل اليد على الأزرار القابلة للنقر، و not-allowed لدائرة المنع فوق عنصر معطل مثل .btn-disabled، و grab مع grabbing لليد المفتوحة والمقبوضة عند سحب البطاقات، و text لمؤشر الكتابة، و zoom-in لعدسة التكبير، و wait للانتظار، و help لعلامة الاستفهام الإرشادية.
.btn-action { cursor: pointer; }
.btn-disabled { cursor: not-allowed; opacity: 0.6; }
.drag-card { cursor: grab; }
.drag-card:active { cursor: grabbing; }
.zoom-thumb { cursor: zoom-in; }
.term-hint { cursor: help; }تتيح لك مساحات الرسم والأدوات التفاعلية تخصيص شكل المؤشر بأيقونة خفيفة وصغيرة الحجم يفضل ألا تتجاوز 32x32 بكسل عبر الصيغة cursor: url("/images/examples/shield-icon.svg") 16 16, pointer;، حيث يحدد الرقمان الاختياريان 16 16 إحداثيات نقطة النقر الفعالة في مركز الأيقونة بدلاً من زاويتها العلوية اليسرى.
وتلزم قواعد CSS بكتابة قيمة قياسية احتياطية مثل pointer أو auto بعد الفاصلة في نهاية القائمة، لضمان بقاء مؤشر الفأرة واضحاً وقابلاً للاستخدام فوراً إذا تعذر تحميل ملف الصورة.
عند وضع أيقونة بحث زخرفية أو شارة توضيحية فوق حقل إدخال <input> أو زر باستخدام التموضع المطلق position: absolute، تعترض تلك الطبقة العلوية نقرات الفأرة الواقعة فوق مساحتها، فيتفاجأ المستخدم بعدم استجابة الحقل الموجود أسفلها.
يحل ضبط pointer-events: none على العنصر الزخرفي العلوي هذه المشكلة جذرياً؛ إذ يجعل الطبقة شفافة تماماً لاختبارات النقر واللمس لتعبر النقرات مباشرة إلى العنصر التفاعلي الواقع تحتها، بينما تعيد القيمة pointer-events: auto تفعيل استقبال النقرات عند الحاجة.
.field-wrap { position: relative; width: 280px; }
.search-input { width: 100%; padding: 10px 76px 10px 12px; }
.search-badge {
position: absolute; right: 10px; top: 8px;
pointer-events: none;
}يؤدي النقر المتكرر السريع على أزرار العدادات أو التبويبات غالباً إلى تظليل نص الزر باللون الأزرق عن طريق الخطأ. ويمنع تطبيق user-select: none على أزرار التحكم التفاعلية هذا التظليل العشوائي ليظل النقر سلساً ونظيفاً.
وعلى العكس تماماً، يتيح تطبيق user-select: all على أرقام المراجع أو رموز التفعيل تحديد السلسلة النصية كاملة بنقرة فأرة واحدة لنسخها بدقة دون سقوط أول حرف أو آخره، في حين تحافظ القيمة user-select: text على التحديد الطبيعي المعتاد للنصوص.
مختبر مؤشر الفأرة وخصائص الواجهة التفاعلي
تسمح المتصفحات افتراضياً بسحب مقبض تحجيم حقل <textarea> بالاتجاهين الأفقي والرأسي معاً عبر resize: both، مما قد يمدد الحقل عرضياً فوق الأعمدة والأزرار المجاورة ويكسر التخطيط. لذا يقيد ضبط resize: vertical التحجيم بالاتجاه الرأسي فقط لكتابة الرسائل الطويلة بأمان، بينما تقصره resize: horizontal على العرض، وتلغيه resize: none تماماً. وعلى الصناديق العادية يشترط اقتران resize بخاصية تدفق مثل overflow: auto.
وتكمل خاصيتان إضافيتان سلاسة التنقل داخل واجهة الصفحة؛ وهما scroll-behavior: smooth على العنصر html لجعل الانتقال للروابط الداخلية انسيابياً، و scroll-margin-top: 72px على العناوين المستهدفة لحجز مسافة علوية تمنع اختفاء العنوان خلف أشرطة التنقل الثابتة.
html { scroll-behavior: smooth; }
.section-heading { scroll-margin-top: 72px; }
.comment-field { width: 100%; min-height: 90px; resize: vertical; }
.resizable-panel {
width: 240px; overflow: auto; resize: horizontal;
}إياك والخلط بين خصائص تحسين المظهر وبين الحماية الأمنية الفعلية؛ فوضع user-select: none على مقالات الموقع لا يمنع نسخ المحتوى إطلاقاً لأن النص الكامل متاح في مصدر الصفحة وأدوات المطور خلال ثوانٍ، بل يزعج القارئ الشرعي الذي يحتاج لترجمة كلمة أو اقتباس جملة.
وبالمثل، فإن تنسيق زر بصنف .btn-disabled مع cursor: not-allowed أو pointer-events: none يمثل إشارة بصرية مساعدة فقط، إذ يستطيع أي مستخدم إلغاء القاعدة من أدوات المطور أو إرسال طلب مباشر إلى الخادم؛ لذا يظل التحقق من الصلاحيات والبيانات على الخادم أمراً إلزامياً لا بديل عنه.
تتكامل خصائص واجهة المستخدم في CSS لتوجيه نظر المستخدم ويده بوضوح، ومنع حجب النقرات خلف الطبقات الزخرفية، وتسهيل نسخ المعرفات بنقرة واحدة، وحماية ثبات الأعمدة عند تحجيم حقول النص. يجمع الجدول التالي خلاصة هذه الخصائص وقيمها العملية:
| الخاصية | أبرز القيم المعتمدة | الدور العملي في الواجهة |
|---|---|---|
cursor | pointer, not-allowed, grab, grabbing, text, zoom-in, wait, help | مطابقة شكل المؤشر لوظيفة العنصر التفاعلي |
cursor المخصص | url("icon.svg") 16 16, pointer | تعيين أيقونة مخصصة مع قيمة قياسية احتياطية إلزامية |
pointer-events | auto, none | تمرير نقرات الفأرة عبر الأيقونات الزخرفية العلوية |
user-select | none, all, text, auto | منع تظليل الأزرار بالخطأ أو تحديد الرموز بنقرة واحدة |
resize | none, vertical, horizontal, both | تقييد تحجيم الحقول رأسياً أو تفعيله مع overflow: auto |
scroll-behavior | smooth, auto | تمرير انسيابي ناعم عند الانتقال للروابط المرجعية |
scroll-margin-top | 72px | حجز هامش تمرير علوي لمنع اختفاء العنوان خلف الشريط الثابت |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت توظيف دلالات cursor والقيم الاحتياطية الإلزامية، وتمرير النقرات عبر pointer-events: none، وتنظيم التحديد عبر user-select، وتقييد التحجيم عبر resize: vertical مع إدراك حدود الحماية المظهرية. وننتقل في الخطوة التالية إلى درس المتغيرات في لغة CSS لتوحيد ألوان ومقاسات التصميم بمرونة عالية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Cursor Affordance الدلالة البصرية للمؤشر
- الإشارة البصرية التي يمنحها شكل مؤشر الفأرة كاليد أو المنع أو السحب لتوضيح قابلية التفاعل مع العنصر.
- للمراجعة
- 02 Pointer Hit-Testing اختبار إصابة النقرة
- عملية تحديد المتصفح للعنصر العلوي المستلم لنقرة الفأرة، ويتم تجاوزها عند ضبط pointer-events على none.
- للمراجعة
- 03 Atomic Text Selection التحديد الكامل بنقرة واحدة
- استخدام القيمة user-select: all بحيث يؤدي النقر مرة واحدة على الرمز المرجعي إلى تحديده كاملاً للنسخ.
- للمراجعة
- 04 Scroll Snap Clearance هامش التمرير العلوي
- مسافة علوية تضاف عبر scroll-margin-top للعناصر المستهدفة لمنع احتجابها خلف أشرطة التنقل الثابتة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- طبقة الأزرار والحقول والمؤشرات التفاعلية التي يتعامل المستخدم من خلالها مع تطبيق الويب.
- للمراجعة
- 02 UX UX
- User Experience
- مدى وضوح وسلاسة وراحة التجربة الكلية التي يشعر بها الزائر أثناء التفاعل والتنقل داخل الواجهة.
- للمراجعة
- 03 SVG SVG
- Scalable Vector Graphics
- صيغة رسوميات متجهة خفيفة وحادة تستخدم بكثرة لأيقونات المؤشر المخصصة مع كلمة احتياطية قياسية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أضف pointer-events: none إلى الشارة العلوية .search-badge ليمر النقر فوقها مباشرة إلى حقل الإدخال الواقع تحتها.
-
اضبط الحقل .comment-field على القيمة resize: vertical مع حدود ارتفاع مناسبة لحماية عرض العمود من التمدد الأفقي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.