CSS - User Interface واجهة المستخدم

CSS - خصائص واجهة المستخدم (User Interface)

🔸 في CSS3، تمت إضافة خصائص جديدة تتحكم في **تجربة التفاعل مع المستخدم**، مثل التحكم في تغيير حجم العناصر، أو شكل المؤشر (Cursor)، أو منع تحديد النص.

🖱️ خاصية resize - التحكم في قابلية تغيير الحجم

تُستخدم لتحديد ما إذا كان يمكن تغيير حجم العنصر (غالبًا في <textarea>)، وفي أي اتجاه.

textarea {
  resize: none;        /* منع تغيير الحجم */
  resize: both;        /* يمكن تغيير الطول والعرض */
  resize: horizontal;  /* فقط عرض */
  resize: vertical;    /* فقط ارتفاع */
}

🧪 مثال: منع تغيير الحجم

<textarea style="resize: none;">لا يمكن تغيير حجمي</textarea>

---

🧷 خاصية outline-offset - إزاحة الحدود الخارجية

تُستخدم لتحديد المسافة بين الـ outline وحدود العنصر الحقيقي.

input {
  outline: 2px solid red;
  outline-offset: 5px;
}

---

🚫 خاصية user-select - منع تحديد النص

تُستخدم لمنع المستخدم من تحديد النص (مثل حماية عناوين أو أزرار).

p {
  user-select: none;
}

<p>لا يمكن تحديد هذا النص بالماوس</p>

---

🖱️ خاصية cursor - تغيير شكل المؤشر

تُستخدم لتحديد شكل مؤشر الفأرة عند الوقوف فوق العنصر.

button {
  cursor: pointer; /* شكل يد عند المرور */
}

input[type="text"] {
  cursor: text;    /* مؤشر نص */
}

.disabled {
  cursor: not-allowed; /* رمز ممنوع */
}

---

📌 ملاحظات هامة

• resize تعمل فقط مع العناصر القابلة لتغيير الحجم مثل textarea.
• user-select مفيدة لحماية بعض النصوص من النسخ.
• cursor تضيف تجربة تفاعل مريحة للمستخدم عند التعامل مع الروابط والأزرار.
• outline-offset مفيدة لتحسين وضوح تركيز المستخدم على العناصر.