جاري التحميل...

واجهة المستخدم في CSS

Optional Advanced وضع للتو قالباً على صورة واحدة. هذه الحصة صندوق أدوات آخر: واجهة المستخدم. تغيّر شكل المؤشر ووميض الـ caret وشكل الويدجت الأصلي. لا تثقب ملصقاً هنا، ولا تقسم المقال إلى أعمدة صحيفة.

الجواب المباشر

خصائص واجهة المستخدم في CSS تشير إلى التفاعل. cursor يختار شكل الفأرة (pointer، wait، help، not-allowed…). resize يجعل الركن قابلاً للسحب — غالباً على textarea. outline مع outline-offset يرسم حلقة تركيز دون أن تأخذ مساحة تخطيط (تعرف outline من نموذج الصندوق؛ هنا عادة لوحة المفاتيح). user-select يقلل التحديد العرضي. caret-color يلوّن شريط الإدخال. appearance (و-webkit-appearance) ينزع جلد الويدجت الأصلي لتعيد تصميمه. أبقِ التركيز مرئياً. لا تحوّل الصفحة كلها إلى ملصق غير قابل للنسخ.

لماذا ليست قناعاً ولا أعمدة

القناع يقرر أي بكسلات لصندوق واحد تبقى ظاهرة. الأعمدة المتعددة تقطع تيار نص. خصائص الواجهة لا تفعل أياً منهما. العرض والارتفاع يبقيان ما لم يدخل resize. المرشحات وmask-image ما زالت للفن. السؤال هنا: «هل يبدو قابلاً للنقر؟ هل أكتب؟ هل أكبر الصندوق؟ هل مستخدم لوحة المفاتيح يرى أين هو؟»

cursor — قل الحقيقة

cursor وعد. pointer يعني «هذا يُنقر». ضعه على أزرار وروابط حقيقية. لا تضع يداً على عنوان لا يفعل شيئاً.

Cursor map for honest controls

css 
a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default هو السهم. text شعاع I فوق نص قابل للتحديد. grab / grabbing لمقابض السحب. توجد مؤشرات url(...) مخصصة؛ اجعلها صغيرة واذكر كلمة احتياطية دائماً. مؤشر كاذب أسوأ من لا شيء: ينقرون شعاراً ولا يحدث شيء.

resize — كبّر صندوقاً لا تخطيطاً

resize يعمل على صناديق لها overflow. الاستخدام اليومي حقل ملاحظات:

Resize a textarea

css 
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

القيم: none، both، horizontal، vertical. اقرنه بـ overflow غير visible وإلا قد لا يظهر المقبض. لا تنثر resize: both على كل بطاقة: غلاف الصفحة لا يجب أن يصير زوايا سحب. min-height / max-width يمنعان الحقل من الانهيار أو الانفجار.

outline كحلقة تركيز

درس نموذج الصندوق علّم أن outline يقع خارج الحدود ولا يأخذ مساحة. في أدوات الواجهة تبقي الحلقة لـ تركيز لوحة المفاتيح — غالباً مع :focus-visible حتى لا يُحاط مستخدم الفأرة عند كل نقرة:

Focus outline with offset

css 
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

لا تشحن *:focus { outline: none; } عاماً ما لم يكن لكل عنصر بديل مرئي بنفس القدر. outline-offset يبعد الحلقة دون تحريك الجيران. هذا ليس border (يغيّر الحجم) وليس تلاشي قناع على تسمية الزر.

user-select — خفف التحديد العرضي

التحديد ميزة. خفّضه فقط حيث لا يجب أن يلوّن النقر المزدوج شريطاً — تسمية شريط أدوات، شريحة سحب — لا المقال.

Limit selection on chrome, not prose

css 
.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none يمنع الإبراز. text الافتراضي المقروء. all يحدد العنصر كله بنقرة — مناسب لرمز قصير، مزعج على فقرة. ما زالت البادئات (-webkit-user-select) تظهر في WebKit القديم. لا تعطّل النسخ على نص قانوني أو أسعار أو رسائل خطأ.

caret-color — لوّن شريط الكتابة

الـ caret هو الشريط الوميض داخل الحقل. طابقه مع العلامة دون إخفائه:

Caret color in a field

css 
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto يتبع لون النص. تطابق لطيف. caret-color: transparent «للنظافة» فخ: لا يرى أحد أين يكتب. هذا ليس color للصفحة كلها ولا mask-image على الحرف.

appearance — أعد طلاء الويدجت الأصلي

المتصفحات ترسم مربعات الاختيار وحقول البحث بمنظر أصلي. appearance: none (مع -webkit-appearance: none عند الحاجة) ينزع الجلد لتعيد الرسم:

Reset appearance then restyle

css 
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

بعد none أنت مدين بحد وحالة محددة وحلقة تركيز. مربع اختيار غير مرئي ليس تصميماً مخصصاً. الدعم يختلف حسب النوع؛ اختبر الويدجت الحقيقي. لا تستخدم appearance لإصلاح قناع أكل صورة أو لاستبدال الأعمدة.

الواجهة مقابل القناع والأعمدة وoutline الصندوق

📊 UI vs mask vs columns vs outline

Tool Job Poor fit
cursor / resize / caret-color / appearance Interaction chrome on controls Stenciling a photo; newspaper columns
user-select Limit highlight on chrome, not articles Hiding copy people must paste
outline + :focus-visible Keyboard focus ring (no layout space) Replacing border math; fading labels with a mask
mask-image Soft holes on one element’s pixels Pointer shape; growing a textarea
Multi-column (column-*) Fragment flowing text Cursors, carets, native widget skin

Optional Advanced استخدم الأعمدة لـ النثر والأقنعة لـ الصور. واجهة المستخدم طبقة التحكم. column-count على نموذج إعدادات أو mask-image على زر إرسال لا يجعل النموذج «أكثر واجهة».

ماذا لا تمحُ

لا تحذف كل إشارة أصلية. أشرطة التمرير والـ caret وحلقات التركيز موجودة لحاجة. أهداف اللمس ما زالت تحتاج حجماً. إن كان العنصر معطّلاً فـ cursor: not-allowed مع السمة الحقيقية disabled أهدأ من قناع يخفي التسمية.

UI polish is not a mask or columns

css 
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

إن كانت المشكلة حافة صورة فارجع للقناع. إن كان مقالاً طويلاً فارجع للأعمدة — أو لتدفق الكتل العادي. إن كان الإحساس «غير قابل للنقر» فابدأ بـ cursor وعنصر حقيقي لا بمرشح زينة.

جرّب بنفسك

  1. ضع cursor: pointer على <button> حقيقي وnot-allowed على [disabled].
  2. أعطِ textarea القيمة resize: vertical مع min-height وoverflow: auto.
  3. أضف outline مع :focus-visible وoutline-offset — انتقل إليه بـ Tab.
  4. ضع user-select: none على شريحة شريط الأدوات فقط؛ اترك المقال قابلاً للتحديد.
  5. لوّن caret-color في حقل. لا تقنّع الحقل ولا تضع column-count.

أخطاء شائعة

  • cursor: pointer على نص ليس رابطاً ولا زراً
  • resize: both على بطاقات التخطيط وشريط التنقل
  • outline: none عام بلا بديل :focus-visible
  • user-select: none على صفحات كاملة أو أسعار أو أخطاء
  • caret-color: transparent «لمظهر نظيف»
  • appearance: none ثم بلا حد ولا حالة تحديد ولا حلقة تركيز
  • معاملة القناع أو الأعمدة المتعددة كلمسة واجهة

الخلاصة

  • CSS واجهة المستخدم يشير إلى التفاعل: المؤشر، resize، الـ caret، الجلد الأصلي
  • cursor يجب أن يصدق؛ resize للحقول لا لغلاف الصفحة
  • أبقِ حلقة التركيز مرئية؛ user-select وcaret-color بخفة
  • appearance: none فقط عندما تعيد تصميم الويدجت كاملاً
  • ليست قالب قناع وليست أعمدة صحيفة
  • Optional Advanced التالية: تحويلات ثلاثية الأبعاد (transforms-3d)

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 75 من 76
Css درس تعليمي