منظرنامہ تقریباً ہمیشہ ایک جیسا ہی ہوتا ہے، جو کہ سکرول کے قابل کنٹینر کے اندر ڈیٹا ٹیبل ہوتا ہے۔ ہر قطار میں ایک ایکشن مینو ہوتا ہے، کچھ اختیارات کے ساتھ ایک چھوٹا ڈراپ ڈاؤن ہوتا ہے، جیسے کہ ترمیم، ڈپلیکیٹ اور ڈیلیٹ۔ آپ اسے بناتے ہیں، ایسا لگتا ہے کہ یہ تنہائی میں بالکل کام کرتا ہے، اور پھر کوئی اسے اس سکرول ایبل ڈیو کے اندر رکھتا ہے اور چیزیں الگ ہوجاتی ہیں۔ میں نے یہ درست بگ تین مختلف کوڈ بیسز میں دیکھا ہے: کنٹینر، اسٹیک، اور فریم ورک، سب مختلف۔ بگ، اگرچہ، مکمل طور پر ایک جیسی ہے۔ ڈراپ ڈاؤن کنٹینر کے کنارے پر کٹ جاتا ہے۔ یا یہ مواد کے پیچھے ظاہر ہوتا ہے جو منطقی طور پر اس کے نیچے ہونا چاہئے۔ یا یہ اس وقت تک ٹھیک کام کرتا ہے جب تک کہ صارف اسکرول نہیں کرتا، اور پھر یہ بہہ جاتا ہے۔ آپ z-index: 9999 تک پہنچ جاتے ہیں۔ بعض اوقات یہ مدد کرتا ہے، لیکن دوسری بار یہ بالکل کچھ نہیں کرتا ہے۔ یہ عدم مطابقت پہلا اشارہ ہے کہ کچھ گہرا ہو رہا ہے۔ اس کے واپس آنے کی وجہ یہ ہے کہ تین الگ الگ براؤزر سسٹم شامل ہیں، اور زیادہ تر ڈویلپر ہر ایک کو اپنے طور پر سمجھتے ہیں لیکن کبھی نہیں سوچتے کہ جب تینوں آپس میں ٹکراتے ہیں تو کیا ہوتا ہے: اوور فلو، اسٹیکنگ سیاق و سباق، اور بلاکس پر مشتمل۔
ایک بار جب آپ یہ سمجھ لیں کہ تینوں کیسے تعامل کرتے ہیں، ناکامی کے طریقے بے ترتیب محسوس کرنا بند کر دیتے ہیں۔ درحقیقت، وہ پیشین گوئی بن جاتے ہیں. تین چیزیں اصل میں اس کا سبب بنتی ہیں۔ آئیے ان میں سے ہر ایک کو تفصیل سے دیکھتے ہیں۔ اوور فلو کا مسئلہ جب آپ اوور فلو: hidden، overflow: scroll، یا overflow: auto کسی عنصر پر سیٹ کرتے ہیں، تو براؤزر کسی بھی ایسی چیز کو کلپ کر دے گا جو اس کی حدود سے باہر ہو، بشمول بالکل پوزیشن شدہ اولاد۔ سکرول کنٹینر { overflow: auto; اونچائی: 300px؛ /* یہ ڈراپ ڈاؤن کلپ کر دے گا، فل سٹاپ*/ }
ڈراپ ڈاؤن { پوزیشن: مطلق؛ /* کوئی فرق نہیں پڑتا -- پھر بھی .scroll-container*/ }
اس نے مجھے پہلی بار حیران کر دیا جب میں اس میں بھاگا۔ میں نے پوزیشن سنبھال لی تھی: مطلق کسی عنصر کو کنٹینر کی کلپنگ سے بچنے دے گا۔ ایسا نہیں ہوتا۔ عملی طور پر، اس کا مطلب ہے کہ بالکل پوزیشن والے مینو کو کسی بھی آباؤ اجداد کے ذریعے کاٹ دیا جا سکتا ہے جس کی نظر نہ آنے والی اوور فلو ویلیو ہو، چاہے وہ آباؤ اجداد مینو پر مشتمل بلاک ہی کیوں نہ ہو۔ کلپنگ اور پوزیشننگ الگ الگ نظام ہیں۔ وہ صرف ان طریقوں سے ٹکراتے ہیں جو مکمل طور پر بے ترتیب نظر آتے ہیں جب تک کہ آپ دونوں کو سمجھ نہ لیں۔
CreatePortal کا استعمال کرتے ہوئے React کی ایک مثال یہ ہے:
'react-dom' سے { createPortal } درآمد کریں؛ درآمد کریں { useState, useEffect, useRef } 'react' سے؛
فنکشن ڈراپ ڈاؤن ({ anchorRef, isOpen, Children }) { const [position, setPosition] = useState({ top: 0, left: 0 });
useEffect(() => { اگر (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); سیٹ پوزیشن ({ اوپر: rect.bottom + window.scrollY، بائیں: rect.left + window.scrollX، }); } }, [isOpen, anchorRef]);
اگر (! isOpen) واپس null؛
واپس تخلیق پورٹل (
اور، یقیناً، ہم رسائی کو نظر انداز نہیں کر سکتے۔ مواد پر ظاہر ہونے والے فکسڈ عناصر اب بھی کی بورڈ کے قابل رسائی ہونے چاہئیں۔ اگر فوکس آرڈر فکسڈ ڈراپ ڈاؤن میں قدرتی طور پر منتقل نہیں ہوتا ہے، تو آپ کو کوڈ کا استعمال کرکے اس کا نظم کرنا ہوگا۔ یہ بھی چیک کرنے کے قابل ہے کہ یہ دوسرے انٹرایکٹو مواد پر نہیں بیٹھتا ہے اور اسے مسترد کرنے کا کوئی طریقہ نہیں ہے۔ وہ کی بورڈ ٹیسٹنگ میں آپ کو کاٹتا ہے۔ سی ایس ایس اینکر پوزیشننگ: میرے خیال میں یہ کہاں جا رہا ہے۔ CSS اینکر پوزیشننگ وہ سمت ہے جس میں مجھے اس وقت سب سے زیادہ دلچسپی ہے۔ مجھے یقین نہیں تھا کہ جب میں نے پہلی بار اسے دیکھا تو حقیقت میں کتنی قیاس آرائیاں قابل استعمال تھیں۔ یہ آپ کو ڈراپ ڈاؤن اور اس کے ٹرگر کے درمیان تعلق کا براہ راست CSS میں اعلان کرنے دیتا ہے، اور براؤزر نقاط کو ہینڈل کرتا ہے۔ .trigger { anchor-name: --my-trigger؛ }
ڈراپ ڈاؤن مینو { پوزیشن: مطلق؛ پوزیشن اینکر: --my-trigger؛ اوپر: لنگر (نیچے)؛ بائیں: لنگر (بائیں)؛ پوزیشن-ٹرائی-فال بیکس: فلپ بلاک، فلپ ان لائن؛ }
پوزیشن-ٹری-فال بیکس پراپرٹی وہی ہے جو اسے دستی حساب سے استعمال کرنے کے قابل بناتی ہے۔ براؤزر ہار ماننے سے پہلے متبادل جگہوں کو آزماتا ہے، لہذا ویو پورٹ کے نیچے ایک ڈراپ ڈاؤن کٹ جانے کے بجائے خود بخود اوپر کی طرف پلٹ جاتا ہے۔ براؤزر سپورٹ کرومیم پر مبنی براؤزرز میں ٹھوس ہے اور سفاری میں بڑھ رہی ہے۔ فائر فاکس کو پولی فل کی ضرورت ہے۔ @oddbird/css-anchor-positioning پیکیج بنیادی تفصیلات کا احاطہ کرتا ہے۔ میں نے اس کے ساتھ لے آؤٹ ایج کیسز کو مارا ہے جس میں فال بیکس کی ضرورت ہے جس کی مجھے توقع نہیں تھی، لہذا اسے ایک ترقی پسند اضافہ کے طور پر سمجھیں یا اس کے ساتھ جوڑیں۔فائر فاکس کے لیے جاوا اسکرپٹ فال بیک۔ مختصر میں، امید افزا لیکن ابھی تک آفاقی نہیں۔ اپنے ہدف والے براؤزرز میں ٹیسٹ کریں۔ اور جہاں تک رسائی کا تعلق ہے، سی ایس ایس میں بصری تعلق کا اعلان کرنا قابل رسائی درخت کو کچھ نہیں بتاتا۔ aria-controls، aria-expanded، aria-haspopup — وہ حصہ اب بھی آپ پر ہے۔ کبھی کبھی فکس صرف عنصر کو منتقل کر رہا ہے۔ پورٹل تک پہنچنے یا کوآرڈینیٹ حسابات کرنے سے پہلے، میں ہمیشہ پہلے ایک سوال پوچھتا ہوں: کیا اس ڈراپ ڈاؤن کو اصل میں اسکرول کنٹینر کے اندر رہنے کی ضرورت ہے؟ اگر ایسا نہیں ہوتا ہے تو، مارک اپ کو اعلیٰ سطح کے ریپر پر منتقل کرنے سے مسئلہ مکمل طور پر ختم ہو جاتا ہے، بغیر جاوا اسکرپٹ اور نہ ہی کوآرڈینیٹ حسابات کے۔ یہ ہمیشہ ممکن نہیں ہوتا۔ اگر بٹن اور ڈراپ ڈاؤن ایک ہی جزو میں سمیٹے ہوئے ہیں، تو ایک کو دوسرے کے بغیر منتقل کرنے کا مطلب ہے کہ پورے API پر دوبارہ غور کیا جائے۔ لیکن جب آپ یہ کر سکتے ہیں تو ڈیبگ کرنے کے لیے کچھ نہیں ہے۔ مسئلہ صرف موجود نہیں ہے۔ جو جدید سی ایس ایس اب بھی حل نہیں کرتا ہے۔ CSS نے یہاں ایک طویل سفر طے کیا ہے، لیکن اب بھی ایسی جگہیں ہیں جو آپ کو مایوس کرتی ہیں۔ پوزیشن: فکسڈ اور ٹرانسفارم کے مسائل اب بھی موجود ہیں۔ یہ جان بوجھ کر قیاس آرائی میں ہے، جس کا مطلب ہے کہ سی ایس ایس کا کوئی حل موجود نہیں ہے۔ اگر آپ ایک اینیمیشن لائبریری استعمال کر رہے ہیں جو آپ کے لے آؤٹ کو تبدیل شدہ عنصر میں لپیٹ دیتی ہے، تو آپ کو پورٹلز یا اینکر پوزیشننگ کی ضرورت ہے۔ سی ایس ایس اینکر کی پوزیشننگ امید افزا ہے، لیکن نئی ہے۔ جیسا کہ پہلے ذکر کیا گیا ہے، فائر فاکس کو ابھی بھی پولی فل کی ضرورت ہے جب میں یہ لکھ رہا ہوں۔ میں نے اس کے ساتھ لے آؤٹ ایج کیسز کو مارا ہے جس میں فال بیکس کی ضرورت ہے جس کی مجھے توقع نہیں تھی۔ اگر آپ کو آج تمام براؤزرز میں یکساں رویے کی ضرورت ہے، تو آپ اب بھی مشکل حصوں کے لیے JavaScript تک پہنچ رہے ہیں۔ اس کے علاوہ میں نے اپنے ورک فلو کو حقیقت میں تبدیل کیا ہے وہ HTML Popover API ہے، جو اب تمام جدید براؤزرز میں دستیاب ہے۔ پاپ اوور انتساب والے عناصر براؤزر کی سب سے اوپر کی پرت میں رینڈر ہوتے ہیں، ہر چیز کے اوپر، جاوا اسکرپٹ کی پوزیشننگ کی ضرورت نہیں ہوتی ہے۔
Escape ہینڈلنگ، ڈسمس آن-کلِک-آؤٹ، اور ٹھوس ایکسیسبیلٹی سیمنٹکس ٹول ٹِپس، ڈسکلوزر ویجٹس، اور سادہ اوورلیز جیسی چیزوں کے لیے مفت آتے ہیں۔ یہ پہلا ٹول ہے جس تک میں ابھی پہنچا ہوں۔ اس نے کہا، یہ پوزیشننگ کو حل نہیں کرتا. یہ تہہ بندی کو حل کرتا ہے۔ پاپ اوور کو اس کے ٹرگر پر سیدھ میں کرنے کے لیے آپ کو ابھی بھی اینکر پوزیشننگ یا جاوا اسکرپٹ کی ضرورت ہے۔ Popover API لیئرنگ کو ہینڈل کرتا ہے۔ اینکر پوزیشننگ پلیسمنٹ کو سنبھالتی ہے۔ ایک ساتھ استعمال کیا جاتا ہے، وہ ان میں سے زیادہ تر کا احاطہ کرتے ہیں جو آپ پہلے لائبریری کے لیے کرتے ہیں۔ آپ کی صورتحال کے لیے فیصلہ کن رہنما اس مشکل سے گزرنے کے بعد، میں اب انتخاب کے بارے میں حقیقت میں کیسے سوچتا ہوں۔
ایک پورٹل استعمال کریں۔ میں اسے اس وقت استعمال کروں گا جب ٹرگر نیسٹڈ اسکرول کنٹینرز میں گہرا رہتا ہے۔ میں نے اس پیٹرن کو ٹیبل ایکشن مینو کے لیے استعمال کیا اور اسے فوکس کی بحالی اور رسائی کی جانچ کے ساتھ جوڑا بنایا۔ یہ سب سے قابل اعتماد آپشن ہے، لیکن اضافی وائرنگ کے لیے بجٹ کا وقت۔ فکسڈ پوزیشننگ کا استعمال کریں۔ یہ اس وقت کے لیے ہے جب آپ ونیلا جاوا اسکرپٹ یا ہلکے وزن والے فریم ورک میں ہوں اور اس بات کی تصدیق کر سکیں کہ کوئی بھی آباؤ اجداد ٹرانسفارمز یا فلٹرز کا اطلاق نہیں کرتا ہے۔ یہ سیٹ اپ کرنا آسان ہے اور ڈیبگ کرنا آسان ہے، جب تک کہ اس میں ایک رکاوٹ موجود ہے۔ CSS اینکر پوزیشننگ کا استعمال کریں۔ جب آپ کا براؤزر سپورٹ اس کی اجازت دے تو اس تک پہنچیں۔ اگر فائر فاکس سپورٹ درکار ہے تو اسے @oddbird polyfill کے ساتھ جوڑیں۔ یہ وہ جگہ ہے جہاں پلیٹ فارم بالآخر آگے بڑھ رہا ہے اور آخر کار آپ کے جانے کا نقطہ نظر بن جائے گا۔ DOM کی تشکیل نو کریں۔ اسے استعمال کریں جب فن تعمیر اس کی اجازت دے، اور آپ صفر رن ٹائم پیچیدگی چاہتے ہیں۔ مجھے یقین ہے کہ یہ ممکنہ طور پر سب سے کم درجہ کا آپشن ہے۔ پیٹرن کو یکجا کریں۔ یہ اس وقت کریں جب آپ اینکر پوزیشننگ کو اپنے بنیادی نقطہ نظر کے طور پر، غیر تعاون یافتہ براؤزرز کے لیے JavaScript فال بیک کے ساتھ جوڑا چاہتے ہیں۔ یا کوآرڈینیٹ کی درستگی کے لیے getBoundingClientRect() کے ساتھ جوڑا بنایا گیا DOM پلیسمنٹ کے لیے ایک پورٹل۔
نتیجہ میں اس مسئلے کو یک طرفہ مسئلے کے طور پر پیش کرتا تھا - پیچ کرنے اور آگے بڑھنے کے لیے کچھ۔ لیکن ایک بار جب میں اس میں شامل تینوں سسٹمز کو سمجھنے کے لیے کافی دیر تک بیٹھ گیا — اوور فلو کلپنگ، اسٹیکنگ سیاق و سباق، اور بلاکس پر مشتمل — اس نے بے ترتیب محسوس کرنا بند کر دیا۔ میں ٹوٹے ہوئے ڈراپ ڈاؤن کو دیکھ سکتا تھا اور فوری طور پر پتہ لگا سکتا تھا کہ کون سا اجداد ذمہ دار تھا۔ میں نے DOM کو کس طرح پڑھا اس میں تبدیلی ہی اصل راستہ تھا۔ کوئی واحد صحیح جواب نہیں ہے۔ میں جس چیز تک پہنچا اس کا انحصار اس بات پر تھا کہ میں کوڈبیس میں کیا کنٹرول کرسکتا ہوں: پورٹلز جب آباؤ اجداد کا درخت غیر متوقع تھا۔ فکسڈ پوزیشننگ جب یہ صاف اور سادہ تھی؛ عنصر کو منتقل کرنا جب مجھے کچھ نہیں روک رہا تھا۔ اور اب اینکر پوزیشننگ،جہاں میں کر سکتا ہوں. آپ جو بھی انتخاب کرتے ہیں، رسائی کو آخری قدم نہ سمجھیں۔ میرے تجربے میں، بالکل اسی وقت جب اسے چھوڑ دیا جاتا ہے۔ ARIA تعلقات، توجہ کا انتظام، کی بورڈ کا رویہ — یہ پالش نہیں ہیں۔ وہ اس چیز کا حصہ ہیں جو چیز کو حقیقت میں کام کرتی ہے۔ میرے GitHub ریپو میں مکمل سورس کوڈ دیکھیں۔ مزید پڑھنا یہ وہ حوالہ جات ہیں جو میں اس کے ذریعے کام کرتے ہوئے واپس آتا رہا ہوں:
اسٹیکنگ سیاق و سباق (MDN) "CSS اینکر پوزیشننگ گائیڈ"، جوآن ڈیاگو روڈریگ "پاپ اوور API کے ساتھ شروع کرنا"، Godstime Aburu فلوٹنگ UI (floating-ui.com) CSS اوور فلو (MDN)
