بایگانی‌های آموزش CSS

ویژگی cursor در CSS نقش مهمی در بهبود تجربه کاربری دارد. این ویژگی مانند یک راهنمای بصری نامحسوس عمل می‌کند و به کاربر نشان می‌دهد چه المان‌هایی قابل کلیک، درَگ کردن، تغییر اندازه و یا وارد کردن متن هستند.

استفاده صحیح از این نشانه‌های بصری، نه‌تنها ظاهر وب‌سایت را حرفه‌ای‌تر می‌کند، بلکه درک‌پذیری و حس تعامل کاربر با رابط را افزایش می‌دهد. زمانی که کاربران مجبور نباشند حدس بزنند چطور باید با رابط کاربری ما تعامل داشته باشند، تمرکز بیشتری روی محتوای اصلی داشته و تجربه کاربری روان‌تری خواهند داشت.

در این آموزش، سینتکس ویژگی cursor، مقادیر پشتیبانی شده و روش‌های کاربرد مؤثر آن را در مثال‌های واقعی بررسی می‌کنیم.

ویژگی Cursor در CSS چیست؟

با ویژگی cursor در CSS، توسعه‌دهندگان می‌توانند ظاهر نشانگر ماوس را هنگام قرار گرفتن روی المنت‌های مختلف کنترل کنند. این ویژگی در ظاهر ساده، اما در عمل قدرتمند است؛ چرا که پیش از هرگونه تعامل کاربر (کلیک، تایپ یا درَگ)، ماهیت عملکرد المنت را منتقل می‌کند.

سینتکس پایه ویژگی cursor در CSS به شکل زیر است:

cursor: pointer;

در این مثال، از مقدار از پیش تعریف‌شده pointer استفاده می‌کنیم تا مرورگر بداند از چه سبک پیش‌فرضی برای نشانگر استفاده کند.

برای مشاهده فهرست کامل مقادیر ویژگی cursor، کافی است این لینک را بررسی نمایید.

نکات مربوط به نوع ورودی و نمایش نشانگر

دستگاه‌های مختلف، نشانگرها را به‌صورت متفاوتی مدیریت می‌کنند. بنابراین هنگام طراحی، باید ورودی‌های متنوع را در نظر بگیریم:

در دستگاه‌های لمسی (مانند تلفن‌های همراه و تبلت‌ها)، نشانگر ماوس وجود ندارد. بنابراین تنظیم cursor: pointer; به کاربران موبایل کمکی نمی‌کند تا قابل کلیک بودن یک المنت را تشخیص دهند. بنابراین در چنین حالتی، باید از نشانه‌های بصری جایگزین مانند رنگ، سایه یا افکت‌های هاور استفاده کنیم تا قابلیت کلیک‌پذیری دکمه‌ها واضح‌تر شود:

.button {
/* Clear visual styling for mobile */
background-color: #4f46e5;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;

/* Mobile-friendly touch targets */
min-height: 44px;
min-width: 44px;

/* Visual feedback without cursor */
transition: background-color 0.2s;
}

.button:active {
background-color: #3730a3; /* Darker on tap */
transform: scale(0.98); /* Slight press effect */
}

.button:disabled {
background-color: #9ca3af;
color: #6b7280;
}

/* Only add cursor on devices that support hover */
@media (hover: hover) {
.button {
cursor: pointer;
}

.button:hover {
background-color: #4338ca;
}
}

در دستگاه‌های ترکیبی (مانند لپ‌تاپ‌های دارای تاچ‌اسکرین یا تبلت‌های Surface مجهز به کیبورد)، کاربران ممکن است مداوماً بین حالت لمسی و ماوس جابه‌جا شوند. در این موارد، می‌توان با استفاده از media queryها، ورودی‌های مختلف را شناسایی کرده و برای هر حالت، رفتار مناسب را تعریف کرد:

/* Only apply hover cursors when hover is available */
@media (hover: hover) {
  .button {
    cursor: pointer;
  }
}

/* Adjust for coarse pointers (touch) */
@media (pointer: coarse) {
  .resize-handle {
    min-width: 44px; /* Larger touch targets */
  }
}

تأثیر بر دسترس‌پذیری

کاربرانی که از صفحه‌خوان یا کیبورد استفاده می‌کنند، معمولاً نیازی به نشانگر ماوس ندارند. بنابراین باید مطمئن شویم که رابط کاربری حتی بدون بازخورد بصری نشانگر نیز قابل استفاده است. این کار را می‌توان با تست پیمایش فقط با صفحه کلید انجام داد تا از عملکرد صحیح تعاملات اطمینان حاصل شود.

این رویکرد چند حالته باعث می‌شود که ویژگی cursor تجربه کاربر را بهبود دهد، نه این که وابستگی ایجاد کند. در ادامه، نحوه استفاده عملی از این ویژگی در پروژه‌های واقعی را بررسی می‌کنیم.

چطور از ویژگی cursor استفاده کنیم

ما هر روز در هنگام وب‌گردی، تغییرات نشانگر ماوس را تجربه می‌کنیم؛ گاهی حتی بدون این‌که متوجه شویم. برای مثال، در سیستم‌عامل macOS، هنگامی که ماوس را به لبه یک پنجره نزدیک می‌کنیم، نشانگر به شکل یک فلش دوبل تغییر اندازه درمی‌آید و به ما اطلاع می‌دهد که پنجره قابل تغییر اندازه است. بدون نیاز به کلیک، هدف به‌روشنی منتقل می‌شود.

بیایید چند نمونه واقعی را بررسی کنیم که در آن‌ها استایل‌های cursor نقش تعیین کننده‌ای در شکل‌دهی به تعامل کاربر با رابط کاربری دارند.

پنل‌های قابل درَگ و تغییر اندازه

در این مثال، چندین استایل cursor به‌صورت هماهنگ استفاده شده‌اند.

cursor: move را روی بخش هدر اعمال می‌کنیم تا نشان دهیم پنل قابل درَگ شدن است.
cursor:e-resize؛ s-resize؛ و se-resize به‌ترتیب روی لبه راست، پایین و گوشه پنل استفاده شده‌اند تا امکان تغییر اندازه در جهت افقی، عمودی یا مورب را نشان دهند.

پشت صحنه چه اتفاقی می‌افتد؟

در اینجا، CSS فقط مسئول نمایش بازخورد بصری است، در حالی‌که عملکرد واقعی درَگ شدن و تغییر اندازه توسط جاوااسکریپت مدیریت می‌شود.

ما می‌توانیم این قابلیت را با جاوااسکریپت ساده و استفاده از eventهای mousedown، mousemove و mouseup پیاده‌سازی کنیم یا برای امکانات پیشرفته‌تر از کتابخانه‌هایی مانند Interact.js یا React DnD کمک بگیریم.

// Basic vanilla JS approach
element.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);

// Or with Interact.js (simpler API)
interact('.draggable').draggable({
  listeners: { move: dragMoveListener }
});

در واقع، استایل‌های cursor به کاربران اطلاع می‌دهند که چه اقدامی می‌توانند انجام دهند، در حالی که جاوااسکریپت عملکرد واقعی آن را پیاده‌سازی می‌کند. برای مثال، زمانی که کاربر نشانگر cursor: move را مشاهده می‌کند، متوجه می‌شود که المنت قابل درَگ کردن است و هنگام کلیک و کشیدن ماوس، جاوااسکریپت وظیفه مدیریت حرکت را بر عهده دارد.

دکمه‌های تعاملی با نشانگر pointer

در این بخش، نمونه‌ای از استفاده cursor: pointer در CodePen ارائه شده است که در این لینک قابل مشاهده می‌باشد.

این مثال از مقادیر زیر استفاده می‌کند:

cursor: pointer روی دکمه‌ها، برای نشان دادن قابلیت کلیک. این نشانگر که به شکل دست باز نمایش داده می‌شود، به‌طور عمومی در رابط‌های کاربری برای نشان دادن المنت قابل تعامل مورد استفاده قرار می‌گیرد.
cursor: not-allowed روی دکمه‌های غیرفعال، که به صورت دایره‌ای با خط مورب نمایش داده می‌شود و به‌وضوح بیان می‌کند که تعامل با المنت ممکن نیست.

در بسیاری از فریم‌ورک‌ها مانند React (به‌ویژه در نسخه ۱۹ و قابلیت‌های asynchronous جدید آن)، از هوک useFormStatus برای مدیریت state بارگذاری در هنگام ارسال فرم استفاده می‌شود. در این شرایط، مقدار cursor: not-allowed برای غیرفعال‌سازی تعامل کاربر در حین پردازش فرم به کار می‌رود.

این بازخورد بصری معمولاً همراه با کاهش شفافیت (opacity)، تغییر رنگ یا غیرفعال‌کردن انیمیشن‌ها استفاده می‌شود تا وضعیت غیرفعال بودن المنت به‌وضوح قابل تشخیص باشد.

حالت بارگذاری با نشانگر wait

در این مثال (قابل مشاهده در این لینک)، از مقدار cursor: wait برای نمایش state در حال بارگذاری استفاده شده است. پیشنهاد می‌شود برای درک بهتر عملکرد آن، به‌صورت تعاملی با دمو کار کنید.

در این سناریو، مقدار cursor: wait با افزودن یک کلاس CSS به نام .is-loading فعال می‌شود. این استایل باعث می‌شود نشانگر ماوس به یک آیکون چرخان (spinner cursor) تغییر کند تا کاربر متوجه شود عملیاتی در حال انجام است.

طراحان معمولاً این بازخورد را با المان‌های بصری دیگر مانند اسپینر، تغییر متن دکمه یا رنگ پس‌زمینه ترکیب می‌کنند تا وضعیت بارگذاری را واضح‌تر نشان دهند.

ویرایش متن با نشانگر text

در نمونه مربوط به cursor: text در CodePen، از این مقدار هم برای فیلدهای input و هم برای یک div سفارشی استفاده شده است.

نشانگر text به شکل I-beam نمایش داده می‌شود و نشان می‌دهد که متن در این ناحیه قابل ویرایش است.

اگرچه مرورگرها به‌طور پیش‌فرض این نوع نشانگر را روی فیلدهای input اعمال می‌کنند، اما در مواردی که از بخش‌های قابل ویرایش سفارشی (مانند contenteditable) استفاده می‌کنیم، بهتر است به‌صورت صریح مقدار cursor: text را تنظیم کنیم تا یک‌دستی تجربه کاربری حفظ شود.

گالری قابل اسکرول با نشانگرهای grab و grabbing

در این مثال، کاربر می‌تواند ناحیه طراحی‌شده را با ماوس درَگ کند و حرکت دهد.

دو مقدار cursor در این دمو به کار رفته است:

cursor: grab هنگام قرار گرفتن نشانگر روی ناحیه قابل درَگ
cursor: grabbing زمانی که کاربر دکمه ماوس را نگه داشته و در حال درَگ فعال است

در لحظه کلیک، جاوااسکریپت مقدار cursor را از grab به grabbing تغییر می‌دهد. با تغییر ظاهر از دست باز به مشت بسته، کاربر تجربه‌ای طبیعی از تعامل فیزیکی در دنیای واقعی را احساس می‌کند، مشابه با زمانی که کاربر چیزی را با دست می‌گیرد و جابه‌جا می‌نماید.

استفاده از نشانگرهای سفارشی در CSS

می‌توانیم در CSS نشانگرهای سفارشی (Custom Cursors) ایجاد کنیم. سینتکس پایه برای استفاده از تصویر دلخواه به‌عنوان نشانگر به شکل زیر است:

cursor: url(path-to-cursor-image) x y, fallback-keyword;

در یک پروژه واقعی، این کد ممکن است به‌صورت زیر استفاده شود:

cursor: url(custom-cursor.png) 10 15, auto;

توضیح پارامترها:

url(path-to-cursor-image)، مسیر فایل تصویر نشانگر سفارشی
x y، می‌توان با تعیین مختصات اختیاری، نقطه دقیق تصویر را به‌عنوان محل کلیک مشخص کرد
fallback-keyword، اگر تصویر بارگذاری نشود، مرورگر مقدار پیش‌فرض را نمایش می‌دهد (افزودن آن ضروری است)

همچنین می‌توانیم چند تصویر نشانگر را به‌صورت پشت سر هم تعریف کنیم و با استفاده از ویرگول آن‌ها را از هم جدا نماییم:

cursor: url(first-image.png) 5 5, 
         url(second-image.svg),
         url(third-image.cur) 0 0,
         fallback-keyword;

در این حالت، مرورگر به‌ترتیب تلاش می‌کند هر نشانگر را بارگذاری کند و اگر هیچ‌کدام موفق نباشند، از مقدار پیش‌فرض (pointer) استفاده خواهد کرد.

ساخت فایل‌های نشانگر سفارشی

برای توسعه‌دهندگانی که قصد دارند بدون شروع از صفر، نشانگرهای اختصاصی طراحی کنند، منابع رایگان متعددی وجود دارد که می‌تواند بسیار مفید واقع شود:

RealWorld Cursors، ویرایشگر و کتابخانه رایگان نشانگر با هزاران فایل .cur قابل دانلود
Cursor.cc، ویرایشگر آنلاین ساده برای ساخت نشانگرهای پیکسلی
Icons8 Cursor Collection، مجموعه‌ای حرفه‌ای از طراحی‌های نشانگر در فرمت‌های متنوع

بیشتر ویرایشگرهای تصویر مانند GIMP، Photoshop و سایر ابزارهای آنلاین نیز امکان خروجی گرفتن فایل‌های .cur را فراهم می‌کنند. کافی است نشانگرها را در ابعاد کوچک (معمولاً ۳۲×۳۲ یا ۱۶×۱۶ پیکسل) طراحی کنیم تا عملکرد بهینه و سازگاری بالایی در مرورگرهای مختلف داشته باشند.

محدودیت‌های ویژگی cursor در CSS

با وجود کاربرد گسترده ویژگی cursor، این ویژگی محدودیت‌هایی نیز دارد که باید به آن‌ها توجه کرد:

ناسازگاری بین مرورگرها: نحوه نمایش نشانگرها ممکن است در مرورگرهای مختلف (نظیر Chrome، Firefox و Safari) متفاوت باشد. حتی برخی مقادیر مانند grab در نسخه‌های قدیمی‌تر نیاز به حالت جایگزین دارند.
کاهش عملکرد جزئی: استفاده از تصاویر بزرگ یا نشانگرهایی که مداوماً تغییر می‌کنند، ممکن است باعث تأخیر در عملکرد سایت شود، به‌ویژه در دستگاه‌های ضعیف‌تر.
تغییر انتظارات کاربر: استفاده اشتباه از cursor: pointer; روی المنت‌های غیر قابل کلیک (یا برعکس) می‌تواند باعث سردرگمی کاربر شود. هرچند جزئی به نظر می‌رسد، اما همین مورد می‌تواند تجربه کاربری را مختل کند.
چالش‌های دسترس‌پذیری: تغییر نشانگر برای کاربرانی که از صفحه‌خوان یا فقط صفحه کلید برای پیمایش استفاده می‌کنند، تأثیری ندارد. همچنین کاربرانی که از ابزارهای ورودی جایگزین (به‌ویژه افراد دارای ناتوانی حرکتی) استفاده می‌کنند، ممکن است تغییر نشانگر را اصلاً مشاهده نکنند.

برای بهبود تجربه این دسته از کاربران، توصیه می‌شود استایل‌های cursor را همراه با شاخص‌های دسترس‌پذیری دیگر به‌کار بگیریم:

استفاده از aria-disabled="true" همراه با cursor: not-allowed برای المنت‌های غیرفعال
افزودن ویژگی role در صورت نیاز (برای مثال role="button" برای divهای قابل کلیک)
افزودن ویژگی‌هایی مانند aria-label یا aria-describedby برای ارائه توضیح بیشتر در تعاملات پیچیده
طراحی استایل‌های focus مناسب برای کاربران صفحه کلید

اهمیت استایل‌های Focus برای کاربران کیبورد

برای کاربرانی که با صفحه کلید پیمایش می‌کنند، نشانگر focus همان نقشی را ایفا می‌کند که تغییر cursor برای کاربران ماوس دارد. این نشانگر مشخص می‌کند کدام المنت در حال حاضر فعال و قابل تعامل است:

CSS
.interactive-element {
  cursor: pointer;
}

.interactive-element:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.disabled-element {
  cursor: not-allowed;
  opacity: 0.6;
}

.disabled-element:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

استفاده از pseudo-class :focus-visible باعث می‌شود حلقه فوکوس تنها هنگام استفاده از صفحه کلید نمایش داده شود، نه هنگام کلیک با ماوس. این رویکرد موجب هماهنگی بهتر میان کاربران ماوس و کیبورد می‌شود: تغییر cursor راهنمای کاربران ماوس است، و استایل‌های focus راهنمای کاربران صفحه‌کلید.

با وجود این محدودیت‌ها، ویژگی cursor همچنان ابزاری قدرتمند برای بهبود تجربه کاربری است، به شرط آنکه با دقت و هدفمند استفاده شود.

نکته کلیدی این است که از آن به عنوان افزاینده تجربه رابط کاربری استفاده کنیم، نه تنها به عنوان نشانه عملکرد.

سازگاری مرورگرها با ویژگی cursor در CSS

ویژگی cursor در مرورگرهای مدرن از پشتیبانی بسیار گسترده‌ای برخوردار است.

مقادیر پایه مانند pointer، default، text و wait تقریباً در تمام مرورگرهای امروزی پشتیبانی می‌شوند. در واقع، پشتیبانی از این ویژگی حتی به Internet Explorer نسخه ۴ بازمی‌گردد، موضوعی که cursor را به یکی از پایدارترین ویژگی‌های CSS تبدیل کرده است.

برای مشاهده‌ی جزئیات کامل سازگاری، می‌توانیم به مستندات MDN مراجعه کنیم.

جمع‌بندی

در این مقاله بررسی کردیم که چگونه ویژگی cursor در CSS می‌تواند تعامل کاربر با رابط را به شکل محسوسی بهبود دهد. این ویژگی از اولین قابلیت‌هایی بود که در آغاز یادگیری CSS باعث شد این زبان برای من هیجان‌انگیز و قابل‌درک شود.

در پایان، به چند نکته‌ی مهم اشاره می‌کنیم:

استفاده از cursor: none برای پنهان کردن نشانگر، تنها در محیط‌های تمام صفحه یا بازی‌ها مناسب است؛ در رابط‌های معمولی می‌تواند موجب سردرگمی کاربر شود.
از cursor spoofing پرهیز کنیم؛ حالتی که در آن از نشانگرهای تقلیدی یا گمراه کننده برای فریب کاربر استفاده می‌شود. این کار نه‌تنها اعتماد کاربر را از بین می‌برد، بلکه ممکن است در حملات فیشینگ مورد سوء استفاده قرار گیرد.
از به‌کارگیری نادرست نشانگرها بپرهیزیم. برای مثال، cursor: pointer روی المنت‌های غیر قابل کلیک یا cursor: grab روی محتوایی که واقعاً قابلیت درگ شدن ندارد، موجب ارسال سیگنال‌های اشتباه و تضعیف تجربه کاربر می‌شود.

در نهایت، چه تازه‌کار باشیم و چه توسعه‌دهنده‌ای باتجربه، همواره به یاد داشته باشیم که استایل‌های نشانگر باید تجربه کاربر را بهبود بخشند، نه پیچیده‌تر کنند.
وقتی کاربران به نشانه‌های بصری ما اعتماد می‌کنند، سریع‌تر عمل می‌کنند و تمرکز بیشتری روی محتوای اصلی دارند.