সেই CSS Media Query যা আমার ডিজাইনের দৃষ্টিভঙ্গি বদলে দিয়েছে
আমি আগে স্ক্রিন সাইজ দেখে ওয়েবসাইট ডিজাইন করতাম।
আমি ভাবতাম ব্যবহারকারী ফোন নাকি ট্যাবলেট ব্যবহার করছেন তা শনাক্ত করা প্রয়োজন। আমি স্ক্রিনের উচ্চতা প্রস্থের চেয়ে বেশি কি না তা পরীক্ষা করার চেষ্টা করেছি। এটি কেবল ওরিয়েন্টেশন (orientation) পরীক্ষা করত। এটি ডিভাইসের ধরন পরীক্ষা করত না।
আমি আরও ভালো একটি উপায় খুঁজে পেয়েছি। মানুষ আপনার সাইটের সাথে কীভাবে ইন্টারঅ্যাক্ট করছে তা পরীক্ষা করতে media queries ব্যবহার করুন।
(hover) কুয়েরি পরীক্ষা করে যে কোনো ডিভাইস এলিমেন্টের ওপর হোভার (hover) করতে পারে কি না।
মাউস বা ট্র্যাকপ্যাডযুক্ত ডিভাইসের জন্য @media (hover: hover) ব্যবহার করুন।
ফোনের মতো শুধুমাত্র টাচ-নির্ভর ডিভাইসের জন্য @media (hover: none) ব্যবহার করুন।
এটি আপনাকে মোবাইলে হোভার সংক্রান্ত সমস্যাগুলো সমাধান করতে সাহায্য করে। ফোনে হোভার রুলগুলো প্রায়শই কাজ করে না বা অদ্ভুত আচরণ করে। আপনি এমন কোড লিখতে পারেন যা মোবাইলে বাটন দেখাবে কিন্তু ডেস্কটপে ব্যবহারকারী হোভার না করা পর্যন্ত সেগুলো লুকিয়ে রাখবে।
Tailwind arbitrary variants-এর মাধ্যমে এটি সহজ করে তোলে:
আপনি (pointer) ব্যবহার করে পয়েন্টার প্রিসিশন (pointer precision) বা পয়েন্টারের সূক্ষ্মতাও পরীক্ষা করতে পারেন।
• Mouse: hover এবং fine pointer • Trackpad: hover এবং fine pointer • Finger touch: no hover এবং coarse pointer • Stylus: সাধারণত hover এবং fine pointer
আপনি যদি শুধুমাত্র প্রধান ডিভাইসের পরিবর্তে প্রতিটি ইনপুট ডিভাইস পরীক্ষা করতে চান, তবে এগুলো ব্যবহার করুন:
• @media (any-hover: hover) • @media (any-pointer: fine)
মাউস সংযুক্ত একটি ট্যাবলেটের প্রাথমিক ইনপুট হিসেবে hover: none রিপোর্ট করতে পারে। কিন্তু যেহেতু সেখানে একটি মাউস আছে, তাই এটি any-hover: hover রিপোর্ট করবে।
শুধুমাত্র স্ক্রিন সাইজের জন্য ডিজাইন করা বন্ধ করুন। ব্যবহারকারীরা আপনার ইন্টারফেস কীভাবে টাচ বা ক্লিক করছে, তার ওপর ভিত্তি করে ডিজাইন করা শুরু করুন।