কার্সর (cursor) এর যাত্রা শুরু হয়েছিল "The Mother of All Demos" থেকে যেখানে ডাগলাস এнглеবার্ট (Douglas Englebart) সত্তরের দশকে মাউস (mouse) এবং গ্রাফিক্যাল ইউজার ইন্টারফেস (graphical user interface) বিশ্বকে পরিচয় করিয়েছিলেন। মাউস কার্সর আমাদের কম্পিউটার স্ক্রিনে আমরা কোথায় আছি সেটা দেখতে সাহায্য করে। একটি ইউজার এক্সপেরিয়েন্স টুল (user experience tool) হিসেবে, এটি খুব ভালো কাজ করে हमें দেখাতে যে আমরা স্ক্রিনের যেকোনো পয়েন্টে কী করতে পারি বা কম্পিউটার কী করছে। এই আর্টিকেল আপনাকে জানাবে আমাদের ওয়েবপেজে মাউস কার্সর ব্যবহার করার কিছু উপায় যাতে আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত হয়।
সিনট্যাক্স (Syntax)
আমাদের সিএসএস সিলেক্টরে, আমরা নিচের সিনট্যাক্স ব্যবহার করি কার্সরকে ডিফল্ট অ্যারো (arrow) ছাড়া অন্য কিছুতে পরিবর্তন করতে:
cursor: [ url(1.png), url(2.png) ], etc., <mandatory keyword value>
প্রথম স্কোয়ার ব্র্যাকেটের মাঝপথে, আমাদের একটি URL লিস্ট রয়েছে, কমা (comma) দিয়ে সেপারেটেড। এটি একটি অপশনাল (optional) ভ্যালু। এটি কাস্টোম কার্সর (custom cursors) ব্যবহার করার অনুমতি দেয় – ইন্টারনেটে অনেক কাস্টোম কার্সর ক্রিয়েটর (custom cursor creators) আছে যারা আপনাকে কিছু ইউনিক (unique) তৈরি করতে সাহায্য করে।
কমা-সেপারেটেড লিস্টটি ইন্ডিকেট করে যে ব্রাউজার প্রথমটাকে লোড করার চেষ্টা করবে। যদি সেটা প্রথমটাকে না পায় বা URL সঠিক না হয়, তবে সেটা লিস্টে নিচের দিকে যাবে যতক্ষণ না একটি কাজের খুঁজে পায় বা এটি ماندেটরি কীওয়ার্ড (mandatory keyword)-এ সেট হয় শেষে।
প্রথম প্যারামিটার – URL-সহ – অপশনাল। দ্বিতীয়টি নয়। আপনাকে অবশ্যই একটি কীওয়ার্ড অন্তর্ভুক্ত করতে হবে যা নির্দেশাবলী দেয় কোন কার্সর টাইপ আপনি সেখানে দেখতে চান। এখানে কিছু উপলব্ধ ভ্যালু:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS custom cursor</title> <style> table { width:100%; text-align: center; border-collapse: collapse; font-family: 'Roboto', sans-serif; } thead { width: 100%; background: lightblue; } tr:nth-child(even) { background-color: lightgrey; } td { width: 32%; height: 50px; padding: 10px; } td.test { color: red; font-weight: bold; } td#auto { cursor: auto; } td#cell { cursor: cell; } td#crosshair { cursor: crosshair; } td#default { cursor: default; } td#none { cursor: none; } td#pointer { cursor: pointer; } td#help { cursor: help; } td#progress { cursor: progress; } td#wait { cursor: wait; } td#text { cursor: text; } td#vertical-text { cursor: vertical-text; } td#zoom-in { cursor: zoom-in; } td#zoom-out { cursor: zoom-out; } </style> </head> <body> <table> <thead> <td>Cursor Type:</td> <td>Description:</td> <td>Test it Out: </td> </thead> <tr> <td>auto</td> <td>Automatically figures out which cursor to use based on context.</td> <td class="test" id="auto"> TEST </td> </tr> <tr> <td>default</td> <td>Typically an arrow, but depends on platform being used.</td> <td class="test" id="default"> TEST </td> </tr> <tr> <td>help</td> <td>Used to indicate help is available</td> <td class="test" id="help"> TEST </td> </tr> <tr> <td>none</td> <td>No cursor present</td> <td class="test" id="none"> TEST </td> </tr> <tr> <td>pointer</td> <td>Most often used when hovering over link or button to indicate it can be clicked.</td> <td class="test" id="pointer"> TEST </td> </tr> <tr> <td>progress</td> <td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td> <td class="test" id="progress"> TEST </td> </tr> <tr> <td>text</td> <td>Tells the user text can be highlighted.</td> <td class="test" id="text"> TEST </td> </tr> <tr> <tr> <td>wait</td> <td>Indicates that the computer is thinking and user CANNOT interact with UI...</td> <td class="test" id="wait"> TEST </td> </tr> <tr> <td>zoom-in</td> <td>Indicates to user that we can zoom in on something. </td> <td class="test" id="zoom-in"> TEST </td> </tr> <tr> <td>zoom-out</td> <td>Indicates to user that we can zoom out on something. </td> <td class="test" id="zoom-out"> TEST </td> </tr> </table> </body> </html>
উপরের কোডটি শুধু কিছু উপলব্ধ কার্সর শেয়ার করে যা আমরা আমাদের সাইটে ব্যবহার করতে পারি। অন্যান্য এর জন্য MDN চেক আউট করুন।
উপসংহার
আজ আমরা আমাদের ওয়েবসাইটে কার্সর যোগ করার বিভিন্ন পদ্ধতির ওপর আলোচনা করেছি যাতে ইউজার এক্সপেরিয়েন্স উন্নত হয়। কার্সর ব্যবহার করে ইন্ডিকেট করা যায় যে যেকোনো পয়েন্টে কী করা যায়, তাতে ইউজাররা জানে আপনার সাইট নেভিগেট করার সময় কী এক্সপেক্ট (expect) করতে হবে। এখান থেকে অনেক বেশি রয়েছে।
আমি সুপারিশ করছি আপনার চাহিদা অনুযায়ী কার্সর কাস্টোমাইজ করার বিভিন্ন পদ্ধতি চেক আউট করুন। এবং মনে রাখবেন: কার্সর হয় ইউএক্স (UX)-এর আধা অংশ। বাকি আধা অংশ হচ্ছে আসলে সেটা ইমপ্লিমেন্ট করা যা ইউজার কার্সর থেকে এক্সপেক্ট করে। সেটা আমরা অন্য সময়ে করব। হ্যাপি হ্যাকিং (Happy hacking)!
