سی ایس ایس اسکرول اسنیپ ویب سائٹس کو ویب صفحہ یا کسی دوسرے اسکرول کنٹینر کو مخصوص اسکرول پوزیشن پر لے جانے کی اجازت دیتا ہے جب صارف اسکرولنگ آپریشن کرتا ہے۔ یہ خصوصیت رہی ہے۔ تمام جدید براؤزرز میں تعاون یافتہ دو سال سے زیادہ عرصے سے، لیکن بہت سی ویب سائٹس جو اس سے فائدہ اٹھا سکتی ہیں اب بھی اسے استعمال نہیں کر رہی ہیں۔
اسکرول سنیپنگ شاید افقی carousels کے ساتھ سب سے زیادہ وابستہ ہے (دیکھیں۔ کرس کا صرف سی ایس ایس کا طریقہ) اور مخصوص ویب صفحات کو فل سکرین سلائیڈز میں تقسیم کیا گیا ہے۔ لیکن وہاں کیوں رکا؟ مجھے یقین ہے کہ سنیپنگ کسی بھی ویب صفحہ پر اسکرولنگ کے تجربے کو بہتر بنا سکتی ہے جو آئٹمز کو گرڈ یا فیڈ میں رکھتا ہے۔
مثال کے طور پر، زیادہ تر شاپنگ ویب سائٹس ایک گرڈ میں مصنوعات دکھاتی ہیں۔ مثالی طور پر، صارف کم سے کم کوشش کے ساتھ گرڈ قطاروں کے درمیان کودنا پسند کرے گا۔ صارف دبا سکتا ہے۔ خلا صفحہ کو تقریباً ایک اسکرین (ویوپورٹ کی اونچائی) سے اسکرول کرنے کے لیے، لیکن گرڈ کی قطاروں کی اونچائی پر منحصر ہے، اسکرول پوزیشن بالآخر گرڈ کے ساتھ "آؤٹ آف سنک" ہو جائے گی، اور صارف کو اسے دستی طور پر دوبارہ ایڈجسٹ کرنا پڑے گا۔
اگر ہم اس صفحہ پر اسکرول سنیپنگ شامل کرتے ہیں، تو صارف مسلسل اس کے ساتھ اگلی قطار تک اسکرول کر سکتا ہے۔ خلا کلید (دبائیں۔ منتقل + خلا پچھلی قطار تک سکرول کرے گا)۔ یہ کافی آسان ہے۔
مجھے لگتا ہے کہ اسکرول سنیپنگ اس ویب سائٹ میں خوش آئند اضافہ ہوگا۔ اور اسے نافذ کرنا اتنا پیچیدہ بھی نہیں ہے۔ سی ایس ایس کوڈ جو میں نے اس مثال کے لیے استعمال کیا ہے نسبتاً آسان ہے:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}آپ کو انتظار کرنے کی ضرورت نہیں ہے اگر آپ جس ویب سائٹ پر باقاعدگی سے جاتے ہیں اس میں ابھی تک اسکرول سنیپنگ شامل نہیں کی گئی ہے اور آپ کو لگتا ہے کہ اس سے آپ کے اسکرولنگ کے تجربے میں بہتری آئے گی۔ آپ خود اسکرول سنیپنگ شامل کر سکتے ہیں — صارف کے انداز کے ساتھ۔
ویب سائٹس میں صارف کی طرزیں شامل کرنا
اوپر والی ویڈیو میں، آپ دیکھ سکتے ہیں کہ میں نے سفاری کی اعلیٰ ترجیحات میں ایک user.css فائل کا انتخاب کیا ہے۔ یہ فائل یوزر اسٹائل شیٹ ہے۔ اس میں سی ایس ایس کی طرزیں ہیں جو میں نے لکھی ہیں، مقامی میں محفوظ کی ہیں۔ .css فائل، اور سفاری میں شامل کیا گیا۔ یہ "یوزر اسٹائلز" پھر ہر ویب صفحہ پر لاگو ہوتے ہیں جو میں سفاری میں کھولتا ہوں۔
کروم اور فائر فاکس صارفین کو یوزر اسٹائل شیٹ منتخب کرنے کی اجازت نہیں دیتے ہیں۔ فائر فاکس نے اسی طرح کی ایک خصوصیت کی حمایت کی۔ userContent.css ماضی میں، لیکن اس خصوصیت کو فرسودہ کر دیا گیا تھا۔ ڈیفالٹ کی طرف سے غیر فعال 2019 میں۔ میں تجویز کرتا ہوں۔ اسٹائلس براؤزر کی توسیع ان دو براؤزرز (اور دیگر کرومیم پر مبنی براؤزرز) کے لیے۔
Stylus کا ایک اہم فائدہ یہ ہے کہ یہ آپ کو مخصوص ویب سائٹس اور URLs کے لیے صارف کی طرزیں لکھنے کی اجازت دیتا ہے۔ سفاری کی یوزر اسٹائل شیٹ تمام ویب سائٹس پر لاگو ہوتی ہے، لیکن اس پر کام کیا جا سکتا ہے، جیسے کہ نئی :has() سیوڈو کلاس کو ایسے سلیکٹرز بنائیں جو صرف مخصوص ویب سائٹس سے مماثل ہوں۔.
CSS کاسکیڈنگ ماڈیول a کی وضاحت کرتا ہے۔ صارف کی اصلیت اسٹائلز کے لیے جو صارف شامل کرتا ہے۔ سفاری کی یوزر اسٹائل شیٹ اس اصل سے تعلق رکھتی ہے، لیکن اسٹائلس ایکسٹینشن صارف کے اسٹائل کو مصنف کی اصل میں داخل کرتی ہے، جہاں ویب سائٹ کی اسٹائل شیٹس رہتی ہیں۔ خاص طور پر، Stylus صارف کی طرزیں براہ راست صفحہ پر a کے ذریعے داخل کرتا ہے۔ <style> کے آخر میں عنصر <html> جو اسے بناتا ہے صفحہ پر آخری اسٹائل شیٹ. تکنیکی طور پر، اس کا مطلب ہے کہ Stylus کے ذریعے شامل کردہ طرزوں کو مصنف کی طرز کے طور پر درجہ بندی کیا جاتا ہے کیونکہ وہ صارف کی اصل میں نہیں ہیں، لیکن میں انہیں صارف کی طرزیں کہتا رہوں گا کیونکہ صارف انہیں شامل کرتا ہے۔
تاہم، اس فرق کو ذہن میں رکھنا ضروری ہے کیونکہ یہ جھرن کو متاثر کرتا ہے۔ جب سلیکٹر کی مخصوصیت برابر ہوتی ہے، تو ایک حقیقی صارف کا انداز صفحہ کے اپنے انداز سے کمزور ہوتا ہے۔ یہ صارف کی طرز کو بہترین بناتا ہے۔ صارف کے ڈیفالٹس کے لیے موزوں. انہی شرائط کے تحت، Stylus کے ذریعے شامل کردہ ایک سٹائل ہے۔ مضبوط صفحہ کے انداز سے زیادہ، اس لیے اسٹائلس کو صارف کے ڈیفالٹس کی وضاحت کے لیے آسانی سے استعمال نہیں کیا جا سکتا۔
اگر ہم شامل کریں۔ !important مرکب میں، Stylus کے ذریعے شامل کیے گئے حقیقی صارف کے انداز اور طرز دونوں صفحہ کے انداز سے زیادہ مضبوط ہیں۔ لہذا جب آپ کسی ویب سائٹ پر اپنے صارف کی طرزیں مسلط کرنا چاہتے ہیں، تو اس سے کوئی فرق نہیں پڑتا کہ آپ سفاری کا "اسٹائل شیٹ" اختیار استعمال کرتے ہیں یا اسٹائلس ایکسٹینشن۔ آپ کا !important طرزیں کسی بھی طرح سے جیت جائیں گی۔
اگلے حصے میں، میں کا ایک سیٹ استعمال کروں گا۔ !important ٹویٹر کی ویب سائٹ کے ٹائم لائن پیج پر اسکرول سنیپنگ کو نافذ کرنے کے لیے صارف کے انداز۔ میرا مقصد یہ ہے کہ میری ٹویٹر ٹائم لائن کو پڑھنے کے عمل کو تیز تر کرنا عجیب و غریب اسکرول پوزیشنوں سے بچنا ہے جہاں سب سے اوپر کی ٹویٹ صرف جزوی طور پر اسکرین پر ہوتی ہے۔
ٹوئٹر کی ٹائم لائن کے لیے اسنیپ اسکرول کریں۔
کچھ تجربات کے بعد، میں نے درج ذیل سی ایس ایس کوڈ کو طے کر لیا ہے۔ یہ طرزیں فائر فاکس میں اچھی طرح کام کرتی ہیں، لیکن میں نے کروم اور سفاری میں کچھ مسائل کا تجربہ کیا ہے۔ میں ان مسائل کو بعد میں مضمون میں مزید تفصیل سے بیان کروں گا، لیکن فی الحال، آئیے فائر فاکس کے رویے پر توجہ مرکوز کرتے ہیں۔
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}شامل کرنا ضروری ہے۔ !important ہر ڈیکلریشن کے لیے کیونکہ ہمارے کسٹم اسکرول سنیپنگ کے نفاذ کے درست طریقے سے کام کرنے کے لیے صارف کے تمام اسٹائلز کو ویب پیج کے اپنے اسٹائلز کو جیتنا چاہیے۔ میری خواہش ہے کہ بار بار لکھنے کے بجائے !importantمیں صرف اپنے صارف کے انداز کو "اہم پرت" میں ڈال سکتا ہوں، لیکن ایسی سی ایس ایس خصوصیت موجود نہیں ہے۔ (ابھی تک).
میرے اسکرول اسنیپ یوزر اسٹائل کو عمل میں دیکھنے کے لیے نیچے دی گئی ویڈیو دیکھیں۔ نوٹ کریں کہ کس طرح ہر پریس پر خلا کلیدی ٹویٹس کے اگلے سیٹ کو ویو میں اسکرول کرتی ہے، اور ہر سیٹ کا پہلا ٹویٹ ویو پورٹ کے اوپری کنارے پر منسلک ہوتا ہے۔ یہ مجھے اپنی ٹائم لائن کو زیادہ تیزی سے پڑھنے کی اجازت دیتا ہے۔ جب مجھے ٹویٹس کے پچھلے سیٹ پر واپس جانے کی ضرورت ہو تو میں دبا سکتا ہوں۔ منتقل + خلا.
مجھے اس قسم کی اسکرول سنیپنگ کے بارے میں جو چیز پسند ہے وہ یہ ہے کہ یہ مجھے یہ اندازہ لگانے کی اجازت دیتا ہے کہ جب بھی میں دباؤں گا تو صفحہ کتنی دور تک اسکرول کرے گا۔ خلا. ہر اسکرول کا فاصلہ اسکرین پر نظر آنے والی ٹویٹس کی مشترکہ بلندیوں کے برابر ہے۔ دوسرے لفظوں میں، اسکرین کے نیچے جزوی طور پر دکھائی دینے والا ٹویٹ اسکرین کے اوپری حصے میں چلا جائے گا، جو بالکل وہی ہے جو میں چاہتا ہوں۔
Space ڈیو کی ٹویٹ کو اسکرین کے اوپری حصے تک اسکرول کرے گا۔اپنی ٹویٹر ٹائم لائن پر میرے اسکرول اسنیپ یوزر اسٹائل کو آزمانے کے لیے، ان مراحل پر عمل کریں:
- انسٹال کریں اسٹائلس کی توسیع Firefox Add-ons یا Chrome ویب اسٹور کے ساتھ۔
- پر اپنی ٹویٹر ٹائم لائن پر جائیں۔ https://twitter.com/home.
- براؤزر کے ٹول بار میں اسٹائلس آئیکن پر کلک کریں اور پاپ اپ میں "یہ URL" پر کلک کریں۔
- Stylus ایک نئے براؤزر ٹیب میں کوڈ ایڈیٹر کھولے گا۔ میرے اسکرول اسنیپ یوزر اسٹائلز کو ایڈیٹر میں کاپی پیسٹ کریں اور بائیں جانب سائڈبار میں Save بٹن دبائیں۔ طرزیں آپ کے ٹویٹر ٹائم لائن پر فوری طور پر لاگو ہو جائیں گی (صفحہ کو دوبارہ لوڈ کرنے کی ضرورت نہیں)۔
- آپ کسی بھی وقت اسٹائل کو اپ ڈیٹ کر سکتے ہیں۔ ایڈیٹر کو دوبارہ کھولنے کے لیے اسٹائلس آئیکن اور پنسل آئیکن پر کلک کریں۔
سنیپنگ کو اوور رائڈ کرنے میں ناکامی۔
ٹویٹر کی ٹائم لائن کے لیے اسکرول سنیپنگ کے میرے نفاذ میں ایک بڑی خامی ہے۔ اگر کوئی ٹویٹ ویو پورٹ سے اونچا ہے، تو اس ٹویٹ کے نیچے والے حصے کو ظاہر کرنے کے لیے صفحہ کو اسکرول کرنا ناممکن ہے (مثال کے طور پر، اگر آپ اس ٹویٹ کو پسند کرنا یا اسے ریٹویٹ کرنا چاہتے ہیں) کیونکہ براؤزر صفحہ کو زبردستی اسنیپ کرتا ہے تاکہ وہ اوپر کا حصہ دکھا سکے۔ ٹویٹ (یا مندرجہ ذیل ٹویٹ کا سب سے اوپر)۔
اس مسئلے کی شدت کا انحصار صارف کے ڈسپلے پر ہے۔ ٹویٹر کی ٹائم لائن کو ایک بڑے ڈیسک ٹاپ مانیٹر پر چھوٹے صفحے کے زوم فیکٹر پر دیکھتے ہوئے، آپ کو ویو پورٹ سے زیادہ لمبی ٹویٹس کا سامنا نہیں کرنا پڑے گا۔
میں نے CSS ورکنگ گروپ سے پوچھا ہے کہ کیا ایسا طریقہ کار شامل کرنا ممکن ہو گا جس سے صارف کو اجازت ہو؟ براؤزر کی لازمی اسکرول سنیپنگ کو اوور رائیڈ کریں۔. مجھے شاید یہ بتانا چاہئے کہ یہ مسئلہ، کم از کم نظریہ میں، سے سوئچ کرکے حل کیا جاسکتا ہے۔ mandatory کرنے کے لئے proximity سنیپنگ میں نے ٹیسٹ کیا ہے۔ proximity کروم اور فائر فاکس میں سنیپنگ، اور مجھے یہ متضاد اور الجھا ہوا پایا۔ جب میں اس کی توقع نہیں کرتا تھا تو براؤزر اکثر اسنیپ ہوجاتا ہے، اور اس کے برعکس۔ ہوسکتا ہے کہ ٹویٹر کا کوڈ اس میں مداخلت کر رہا ہو۔ proximity الگورتھم کے مطابق، براؤزر ابھی بھی تھوڑے چھوٹے ہیں، یا شاید میں صرف "غلط اسکرول کر رہا ہوں"، اگر یہ بھی ممکن ہے۔ میں نہیں جانتا.
لیکن میں ساتھ جانے کی بنیادی وجہ mandatory snapping یہ ہے کہ میں ایسے حالات سے بچنا چاہتا تھا جہاں سب سے اوپر کی ٹویٹ صرف جزوی طور پر اسکرول کے بعد اسکرین پر ہوتی ہے۔ ٹویٹس کے سیٹوں کے درمیان فاسٹ سکرولنگ کی قسم جو میں نے اوپر کی ویڈیو میں دکھائی ہے صرف اس کے ساتھ ہی ممکن ہے mandatory سنیپنگ
اگر آپ، میری طرح، ترجیح دیتے ہیں mandatory سنیپنگ، میں "لمبے ٹویٹ" کے مسئلے کے لیے درج ذیل دو حل تجویز کر سکتا ہوں:
- آپ ٹویٹ کو اس کے اپنے صفحے پر کھول سکتے ہیں اور اس کے بعد ٹائم لائن پر واپس جا سکتے ہیں۔
- اگر آپ صرف لائک یا ریٹویٹ بٹن پر کلک کرنا چاہتے ہیں تو آپ کر سکتے ہیں۔ منتقل- ٹویٹ کو منتخب کرنے کے لیے اس پر کلک کریں اور پھر دبائیں۔ L اسے پسند کرنا، یا T اس کے بعد درج اسے ریٹویٹ کرنے کے لیے۔
کروم اور سفاری میں مسائل
میرے اسکرول اسنیپ صارف کی طرزیں کروم، سفاری اور فائر فاکس میں نمایاں طور پر مختلف اسکرول سنیپنگ رویے پیدا کرتی ہیں۔ وہ اختلافات جزوی طور پر ہیں کیونکہ اسنیپنگ میکانزم کا صحیح نفاذ ہے۔ براؤزر پر چھوڑ دیا:
سی ایس ایس اسکرول اسنیپ ماڈیول جان بوجھ کر اسنیپ پوزیشنز کو نافذ کرنے کے لیے استعمال ہونے والی کسی بھی عین مطابق اینیمیشن یا فزکس کی وضاحت یا مینڈیٹ نہیں کرتا ہے۔ یہ صارف ایجنٹ پر چھوڑ دیا جاتا ہے۔
سفاری کے موجودہ ورژن میں ایک بگ ہے جو اسکرول سنیپنگ کو ٹویٹر ٹائم لائن پر صحیح طریقے سے کام کرنے سے روکتا ہے۔ میرے پاس اس مسئلے کی اطلاع دی۔.
کروم میں، مجھے درج ذیل مسائل کا سامنا کرنا پڑا ہے۔
- اسکرولنگ آپریشنز متضاد طور پر متحرک ہوتے ہیں۔ کبھی کبھی حرکت پذیری سست ہوتی ہے، کبھی یہ فوری ہوتی ہے، اور کبھی کبھی یہ سست شروع ہوتی ہے لیکن پھر اسے مختصر کر دیا جاتا ہے۔ مجھے یہ پریشان کن لگا۔
- سکرولنگ آپریشنز عام طور پر بہت آہستہ سے متحرک ہوتے ہیں۔ میں نے کروم اور فائر فاکس میں ایک ٹیسٹ کیا (20 خلا دبائیں)، اور مجھے فائر فاکس (کروم میں 70 سیکنڈ بمقابلہ فائر فاکس میں 18.5 سیکنڈ) کروم میں میری ٹویٹر ٹائم لائن پر اتنا ہی فاصلہ طے کرنے میں 11% زیادہ وقت لگا۔
- جب میں اپنے لیپ ٹاپ کے ٹریک پیڈ کا استعمال کرتے ہوئے اسکرول کرتا ہوں، تو صفحہ بہت چمکتا ہے۔ جب میں کو دبا کر تیزی سے سکرول کرنے کی کوشش کرتا ہوں۔ خلا کلیدی طور پر، صفحہ بہت آہستہ سے سکرول کرتا ہے اور گھومتا ہے۔ مجھے شبہ ہے کہ دونوں مسائل ایک ہی الگورتھم کی وجہ سے ہیں۔ ایسا لگتا ہے کہ کروم ان معاملات میں بہت زیادہ شرح پر دوبارہ سنیپ کرتا ہے۔ میرے پاس اس مسئلے کی اطلاع دی۔.
یہ براؤزر کیڑے اور براؤزرز کے درمیان فرق اسکرول سنیپنگ کو لاگو کرنے پر غور کرنے والی ویب سائٹس کے لیے ایک مسئلہ ہو سکتا ہے۔ مثال کے طور پر، ایک ویب ڈویلپر روک سکتا ہے کیونکہ وہ یہ پسند نہیں کرتے کہ اسکرول سنیپنگ ایک مخصوص براؤزر میں کس طرح برتاؤ کرتی ہے۔ براؤزرز اس مسئلے کو زیادہ باہمی تعاون کے قابل بن کر کم کر سکتے ہیں۔ درحقیقت، اسکرول اسنیپ کراس براؤزر کے فوکس کے شعبوں میں سے ایک ہے۔ انٹراپ 2022 کی کوشش.
صورتحال کو بہتر کرنے کا ایک اور طریقہ نئی CSS خصوصیات کو متعارف کرانا ہے جو اسکرول سنیپنگ کو مزید کنفیگر کرنے کے قابل بنائے گی۔ اس میں سنیپنگ اینیمیشن کی مدت، سنیپنگ کے لیے قربت کی حد کی لمبائی، اور لازمی سنیپنگ کو اوور رائیڈ کرنے کا طریقہ کار شامل ہو سکتا ہے۔
سنیپ کرنا یا نہیں کرنا؟
میں ٹویٹر کی ٹائم لائن پر اپنے اسکرول اسنیپ یوزر اسٹائلز کو چند ہفتوں سے استعمال کر رہا ہوں، اور میں واپس نہیں جانا چاہتا۔ صرف کے ساتھ میری فیڈ کے ذریعے فوری طور پر پلٹائیں کرنے کی صلاحیت خلا کلید صرف ایک اور سطح پر ہے۔
تاہم، میں اسے ایک اعلی درجے کی خصوصیت سمجھتا ہوں جو شاید سب کے لیے نہیں ہے۔ ایک وجہ ہے کہ میں نے اسے صرف ٹائم لائن پر فعال کیا ہے (/home path) اور ٹویٹر کی ویب سائٹ پر کہیں اور نہیں۔ صفحہ اسکرول کرنے کے طریقے میں سنیپنگ ایک اہم تبدیلی ہے، اور اس کی عادت ڈالنے میں کچھ وقت لگتا ہے۔ یہ ایک مخصوص استعمال کے معاملے کے لیے بہت اچھا کام کر سکتا ہے، لیکن یہ راستے میں آ کر صارف کو مایوس بھی کر سکتا ہے۔
اس لیے فیڈز والی ویب سائٹس کو اسکرول سنیپنگ کو صرف ایک اختیاری خصوصیت کے طور پر پیش کرنے پر غور کرنا چاہیے، مختلف براؤزرز میں اور مختلف ان پٹ طریقوں (ماؤس، کی بورڈ، ٹریک پیڈ، ٹچ اسکرین وغیرہ) کے ساتھ محتاط غور و فکر اور کافی جانچ کے بعد۔
تمہارے جانے سے پہلے…
آخر میں، میں انسٹال کرنے اور آزمانے کی انتہائی سفارش کرتا ہوں۔ اسٹائلس براؤزر کی توسیع. ویب ڈویلپرز (یا کوئی بھی جو سی ایس ایس کو جانتا ہے) اپنے براؤزر میں کسی بھی ویب سائٹ کو اسٹائل کرنے کی طاقت رکھتا ہے۔ آپ اپنی پسندیدہ ویب سائٹس میں معمولی بہتری اور اصلاحات کا اطلاق کر سکتے ہیں۔ میں اسے زیادہ تر صفحہ کے عناصر کو چھپانے کے لیے استعمال کرتا ہوں جو مجھے پریشان کن لگتے ہیں، جیسے چسپاں ہیڈر، ویڈیو پاپ اپس، اور ووٹوں کی تعداد۔
لیکن زیادہ اہم بات یہ ہے کہ، Stylus آپ کو کسی بھی ویب سائٹ پر CSS کی نئی خصوصیات کو تیزی سے جانچنے اور اگر ضروری ہو تو براؤزر کی خرابیوں کی اطلاع دینے کی اجازت دیتا ہے۔ ایسا کرنے سے، آپ ویب پلیٹ فارم کو تھوڑا بہتر بنانے میں مدد کر سکتے ہیں۔
