آموزش مکان نما در CSS به زبان ساده

ویژگیcursor در CSS برای تعریف نوع مکان نما (اشاره گر ماوس) هنگام حرکت ماوس روی یک منطقه خاص یا یک لینک در صفحه وب، استفاده می شود.

تغییر ظاهر مکان نما

به طور معمول مرورگرها در قسمت های خالی صفحه وب ماوس را به صورت اشاره گر، روی هر لینک یا قسمت قابل کلیک به صورت دست و روی هر متن یا فیلد متنی به صورت نشانگر ویرایشی نمایش می دهند. با استفاده از CSS می توانید این ویژگی ها را برای نمایش انواع مکان نماهای مختلف دوباره تعریف کنید.

مثال

h1 {

cursor: move;

}

p {

cursor: text;

}

جدول زیر مکان نماهای مختلف مورد پشتیبانی در بیشتر مرورگرها را نشان می دهد.

نمایش	مقدار		مثال
	default	a:hover{cursor:default;}
	pointer	a:hover{cursor:pointer;}
	text	a:hover{cursor:text;}
	wait	a:hover{cursor:wait;}
	help	a:hover{cursor:help;}
	progress	a:hover{cursor:progress;}
	crosshair	a:hover{cursor:crosshair;}
	move	a:hover{cursor:move;}
	url()	a:hover{cursor:url(“custom.cur”), default;}

ایجاد مکان نمای سفارشی

می توانید مکان نماهای کاملاً سفارشی نیز داشته باشید.

ویژگیcursor لیستی از مقادیر مکان نماهای تعریف شده توسط کاربر (که با کاما از یکدیگر جدا شده اند) و در ادامه آن یک مکان نمای عمومی را کنترل می کند. اگر مکان نمای اول به صورت نادرست مشخص شده باشد یا اینکه پیدا نشود، مکان نمای بعدی در لیست که با کاما جدا شده، استفاده می شود و تا زمان پیدا کردن یک مکان نمای قابل استفاده، این روند ادامه پیدا می کند.

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

نکته: قالب استانداردی که می توان برای مکان نماها استفاده شود، فرمت cur. است. با این حال، می توانید با استفاده از نرم افزارهای تبدیل تصویر آنلاین و در دسترس، تصاویری مانند jpg. و gif. را به فرمت cur. تبدیل کنید.

مثال

a {

cursor: url(“custom.gif”), url(“custom.cur”), default;

}

در مثال بالا custom.gif و custom.cur فایل های مکان نمای سفارشی هستند که در حافظه سرور بارگذاری شده است و در صورت حذف مکان نمای سفارشی یا عدم پشتیبانی توسط مرورگر، مقدار پیش فرض (default) مکان نمای عمومی مورد استفاده قرار می گیرد.

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

توجه: IE9 و نسخه های قبلی فقط مقادیر URL از نوع .cur را برای نشانه گر ایستا و نوع ani. را برای مکان نمای متحرک پشتیبانی می کنند. اما مرورگرهایی مانند Firefox ، Chrome و Safari از .cur،.png ، .gif و .jpg نیز پشتیبانی می کنند اما از ani. پشتیبانی نمی کنند.

۳ نکته کلیدی و ضروری که هر طراح وب باید بداند:

1. اهمیت حیاتی تعیین مکان‌نمای عمومی (Fallback): همان‌طور که اشاره شد، حتماً باید یک مقدار پیش‌فرض عمومی (مانند default یا pointer) در انتهای لیست url() قرار دهید. اگر به هر دلیلی فایل تصویر مکان‌نمای سفارشی شما پاک شود، آدرس‌دهی اشتباه باشد یا سرعت اینترنت کاربر کند باشد، مرورگر بدون مقدار پشتبان دچار سردرگمی شده و ممکن است ظاهر ماوس را به حالت عادی و نامناسب درآورد.

2. بهینه‌سازی ابعاد تصویر در مکان‌نمای سفارشی: برای تصاویر سفارشی (مثل .png یا .cur)، استاندارد طلایی ابعاد ۳۲ در ۳۲ پیکسل (یا نهایتاً ۱۶ در ۱۶ پیکسل برای آیکون‌های کوچک) است. اگر از تصاویر بزرگ‌تر استفاده کنید، مرورگرها ممکن است آن را مقیاس‌بندی کنند، کیفیت آن را کاهش دهند یا اصلاً از نمایش آن خودداری کنند. همچنین نقطه کلیک (Hotspot) در تصاویر بزرگ ممکن است جابه‌جا شود.

3. بهبود تجربه کاربری (UX) با استفاده هوشمندانه: از تغییر دادن بی‌رویه مکان‌نما پرهیز کنید. تغییر شکل ماوس باید فقط برای المان‌هایی استفاده شود که قابلیت تعامل، کلیک، کشیدن (Drag) یا ویرایش دارند. تغییر مکان‌نما روی متن‌های عادی یا تصاویر غیرقابل کلیک، باعث سردرگمی کاربر و افت تجربه کاربری سایت شما خواهد شد.

جمع‌بندی

ویژگی cursor در CSS ابزاری ساده اما بسیار قدرتمند برای بهبود تجربه کاربری (UX) در طراحی وب است. با استفاده درست از مقادیر پیش‌فرض مانند pointer، text یا move می‌توانید به کاربران نشان دهید که کدام بخش‌های صفحه قابل تعامل هستند. همچنین با قابلیت تعریف مکان‌نمای سفارشی (url) این امکان را دارید تا به وب‌سایت خود جلوه‌ای منحصربه‌فرد و متناسب با هویت برند ببخشید؛ به شرط آنکه استانداردهای ابعاد تصویر و تعیین مقدار پشتیبان (Fallback) را همیشه رعایت کنید تا در تمامی مرورگرها به بهترین شکل نمایش داده شود.