وہ CSS Media Query جس نے میرے ڈیزائن کے انداز کو بدل دیا
میں پہلے اسکرین کا سائز دیکھ کر ویب سائٹس ڈیزائن کیا کرتا تھا۔
میرا خیال تھا کہ مجھے یہ معلوم کرنے کی ضرورت ہے کہ صارف فون استعمال کر رہا ہے یا ٹیبلٹ۔ میں نے یہ چیک کرنے کی کوشش کی کہ کیا اسکرین کی اونچائی اس کی چوڑائی سے زیادہ ہے یا نہیں۔ اس سے صرف اورینٹیشن (orientation) کا پتہ چلتا تھا۔ اس سے ڈیوائس کی قسم کا پتہ نہیں چلتا تھا۔
مجھے ایک بہتر طریقہ ملا۔ یہ دیکھنے کے لیے کہ لوگ آپ کی سائٹ کے ساتھ کیسے انٹریکٹ (interact) کرتے ہیں، میڈیا کوئریز (media queries) کا استعمال کریں۔
(hover) کوئری یہ چیک کرتی ہے کہ آیا کوئی ڈیوائس ایلیمنٹس کے اوپر ہوور (hover) کر سکتی ہے یا نہیں۔
ماؤس یا ٹریک پیڈ والی ڈیوائسز کے لیے @media (hover: hover) استعمال کریں۔
صرف ٹچ والی ڈیوائسز جیسے کہ فونز کے لیے @media (hover: none) استعمال کریں۔
یہ آپ کو موبائل پر ہوور کے مسائل حل کرنے میں مدد دیتا ہے۔ فون پر، ہوور رولز اکثر کام نہیں کرتے یا عجیب طریقے سے کام کرتے ہیں۔ آپ ایسا کوڈ لکھ سکتے ہیں جو موبائل پر بٹن دکھائے لیکن ڈیسک ٹاپ پر انہیں تب تک چھپائے رکھے جب تک صارف ہوور نہ کر لے۔
Tailwind اسے arbitrary variants کے ذریعے آسان بنا دیتا ہے:
آپ (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 رپورٹ کرے گا کیونکہ وہاں ماؤس موجود ہے۔
صرف اسکرین کے سائز کے لیے ڈیزائن کرنا چھوڑ دیں۔ اس بنیاد پر ڈیزائن کرنا شروع کریں کہ صارفین آپ کے انٹرفیس کو کیسے ٹچ یا کلک کرتے ہیں۔