CSS چند ویژگی برای بهبود تجربه کاربری (UX/UI) فراهم می‌کند. این ویژگی‌ها روی نحوه تعامل کاربر با عناصر تأثیر می‌گذارند.

🔹 1. resize

به کاربر اجازه می‌دهد یک المان (مثل <textarea>) را تغییر اندازه دهد.

textarea {
  resize: both;   /* قابل تغییر در هر دو جهت */
}

مقادیر:

• none → تغییر اندازه غیرفعال

• both → تغییر اندازه افقی و عمودی

• horizontal → فقط افقی

• vertical → فقط عمودی

🔹 2. outline-offset

فاصله outline از عنصر را مشخص می‌کند.

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

🔹 3. cursor

شکل نشانگر ماوس را هنگام قرار گرفتن روی عنصر تغییر می‌دهد.

button {
  cursor: pointer; /* شکل دست (لینک‌مانند) */
}

مقادیر رایج:

• default → نشانگر عادی

• pointer → دست (برای لینک و دکمه)

• text → نشانگر انتخاب متن

• move → جابجایی

• not-allowed → علامت ممنوع

🔹 4. caret-color

رنگ مکان‌نما (خط چشمک‌زن در فیلد متنی) را تغییر می‌دهد.

input {
  caret-color: red;
}

🔹 5. nav-index (کمتر استفاده میشه)

کنترل ترتیب فوکوس عناصر هنگام استفاده از کلید Tab.

input.first {
  nav-index: 1;
}
input.second {
  nav-index: 2;
}

🔹 6. appearance

ظاهر پیش‌فرض کنترل‌ها را حذف یا تغییر می‌دهد.

input[type="text"] {
  appearance: none;
}

✅ مثال کامل:

<textarea>متنی بنویسید...</textarea>
<input type="text" placeholder="نام کاربری" />
<button>کلیک کن</button>

textarea {
  resize: vertical;
  cursor: text;
}

input:focus {
  outline: 2px solid coral;
  outline-offset: 4px;
  caret-color: red;
}

button {
  cursor: pointer;
}

👉 با این ویژگی‌ها می‌توانیم تعامل کاربر با فرم‌ها، دکمه‌ها و المان‌ها را خیلی حرفه‌ای‌تر کنیم.