প্রকাশিত: ফেব্রুয়ারি 26, 2025
Chrome 133 একটি নতুন মোড প্রবর্তন করে বিদ্যমান পপওভার বৈশিষ্ট্যের উপর ভিত্তি করে তৈরি করে: popover="hint" । এই ব্রাউজার-পরিচালিত মোডটি একটি নতুন স্ট্যাকিং প্রসঙ্গ সক্ষম করে যা টুলটিপ এবং অনুরূপ ক্ষণস্থায়ী ভাসমান উপাদান তৈরি করা সহজ করে। এটি ডিজাইনের নমনীয়তা বজায় রাখার সময় বিকাশকারীর প্রচেষ্টাকে হ্রাস করে।
ভূমিকা এবং ইতিহাস
Chrome 114 এ প্রবর্তিত Popover API, আপনাকে মেনু এবং টুলটিপের মতো অ্যাক্সেসযোগ্য ফ্লোটিং UI তৈরি করতে দেয়। ডিফল্টরূপে, popover="auto" আপনার জন্য আলোক-খারিজ কার্যকারিতা এবং ফোকাস ব্যবস্থাপনা পরিচালনা করে, অতিরিক্ত স্ক্রিপ্টিংয়ের প্রয়োজন ছাড়াই, যেমনটি Popover API প্রবর্তন করা হয়েছে। একটি popover="auto" পপওভার খোলার সময়, popover="auto" সহ অন্যান্য সমস্ত নন-অ্যান্সটর পপওভার বন্ধ হয়ে যাবে, যা একটি ergonomic API তৈরি করে যা সবচেয়ে বুদ্ধিমান কাজ করে৷
Popovers অন্যান্য popovers বন্ধ
<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>
এই উদাহরণে, পপওভার 2 খোলার ফলে পপওভার 1 বন্ধ হবে, যেহেতু popover="auto" শুধুমাত্র একটি সময়ে এই ধরনের একটি পপওভার খোলার অনুমতি দেয়।
যদিও এই আচরণটি মেনু এবং ডায়ালগের জন্য সুন্দরভাবে কাজ করে, এটি সমস্যা তৈরি করতে পারে যখন একাধিক ধরনের ভাসমান UI সহ-অস্তিত্বের প্রয়োজন হয়। উদাহরণস্বরূপ একটি মেনু এবং একটি টুলটিপ উভয়ই popover="auto" ব্যবহার করে সংঘর্ষ হতে পারে, যেখানে টুলটিপ খোলার ফলে মেনু বন্ধ হয়ে যায়। এটি একটি অস্বাভাবিক পরিস্থিতি বলে মনে হতে পারে, তবে এটি একটি আধুনিক অ্যাপ্লিকেশন-স্টাইল UI-তে অনেক কিছু আসে। উদাহরণস্বরূপ, github.com-এর হেডারের মেনুগুলি মেনু এবং টুলটিপ উভয়ের জন্যই পপওভার ব্যবহার করে, যা নির্দিষ্ট শর্তে উভয়কেই একই সময়ে দৃশ্যমান করার অনুমতি দেয়:
এটি সমাধান করার একটি উপায় হল টুলটিপ উপাদানগুলির জন্য popover="manual" ব্যবহার করা, যা স্ক্রিপ্টিংয়ের সাথে পপওভারের সম্পূর্ণ নিয়ন্ত্রণের অনুমতি দেয়। যাইহোক, এর জন্য স্ট্যাকিং আচরণ, হালকা-খারিজ, এবং ফোকাস পরিচালনার পুনঃপ্রয়োগ করা প্রয়োজন - ঠিক যে কাজগুলি পরিচালনা করার জন্য Popover API ডিজাইন করা হয়েছিল। এটি অনুপস্থিত কার্যকারিতা প্রদানের জন্য এপিআই প্রসারিত করার উপায়গুলি অন্বেষণ করতে আমাদের প্ররোচিত করেছে।
বিকাশকারী গবেষণার মাধ্যমে, আমরা দুটি সাধারণ স্ট্যাকিং প্রসঙ্গ চিহ্নিত করেছি:
- স্থায়ী UI : উদাহরণস্বরূপ, মেনু এবং ডায়ালগ।
- ক্ষণস্থায়ী UI : উদাহরণস্বরূপ, হোভারকার্ড এবং টুলটিপ।
উভয়কে সামঞ্জস্য করার জন্য, popover="hint" একটি দ্বিতীয় স্ট্যাক প্রবর্তন করে, popover="auto" থেকে আলাদা, যাতে টুলটিপগুলি উপস্থিত হওয়া সত্ত্বেও মেনুগুলি খোলা থাকে তা নিশ্চিত করে৷ বিভিন্ন UI প্রকারের জন্য একাধিক স্ট্যাকিং প্রসঙ্গ প্রবর্তন করার পরিবর্তে — যা মূলত z-index পুনরায় উদ্ভাবন করবে — এই পদ্ধতিটি কেবল দুটি বিস্তৃত বিভাগ সংজ্ঞায়িত করে জিনিসগুলিকে সহজ রাখে: স্থায়ী UI ( auto ) এবং ক্ষণস্থায়ী UI ( hint )। এটি নমনীয়তার মধ্যে একটি ভারসাম্য বজায় রাখে এবং পপওভার ব্যবহার করার আগে আপনি যে সমস্যাগুলির মুখোমুখি হয়েছিলেন সেগুলি পুনরুত্থিত হওয়া এড়াতে।
নতুন মান আচরণ
popover="auto" এবং popover="hint" উভয়ই হালকা খারিজ সমর্থন করে, যার অর্থ ব্যবহারকারী যখন তাদের বাইরে ক্লিক করেন, বা কীবোর্ডে Esc চাপেন তখন তারা স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। এই ক্ষেত্রে উভয় শৈলী অভিন্ন।
অন্যান্য পপোভারের জোর-আড়াল করার ক্ষেত্রে, popover="auto" খোলা হলে অন্য সমস্ত auto এবং hint পপওভার বন্ধ করে দেয়, এটি নিশ্চিত করে যে একটি সময়ে শুধুমাত্র একটি পপওভার সক্রিয় থাকে (এখানে একটি ব্যতিক্রম নেস্টেড পপোভার, নীচে ব্যাখ্যা করা হয়েছে)। popover="hint" , অন্য দিকে, শুধুমাত্র অন্যান্য hint পপওভারগুলিকে জোর করে লুকিয়ে রাখে, মেনু এবং টুলটিপগুলিকে খোলা থাকতে এবং সহাবস্থান করতে দেয়।
যেখানে তারা সবচেয়ে বেশি পার্থক্য করে তা হল তাদের বাসা বাঁধার আচরণে। popover="auto" নেস্টিং সমর্থন করে, একটি শিশু পপওভারকে অন্য পিতামাতার পপওভারের মধ্যে খোলা থাকার অনুমতি দেয়। popover="hint" একটি বিশেষ নেস্টিং আচরণ রয়েছে, যেখানে পৃথক "স্ট্যাকগুলি" আসে। যখন একটি hint পপওভার একটি auto পপওভারের ভিতরে থাকে, তখন এটি প্রাসঙ্গিক গ্রুপিং বজায় রাখার জন্য auto স্ট্যাকের সাথে যোগ দেয়, যার অর্থ অন্যান্য auto বা hint পপভারগুলি জোরপূর্বক লুকাতে না হওয়া পর্যন্ত এটি খোলা থাকবে। এটি স্বজ্ঞাত আচরণ প্রদান করে, যেখানে টুলটিপগুলি অন্যান্য মেনু বা পপওভারে বাধা দেয় না।
পরিশেষে, খুব ভিন্ন ব্যবহারের ক্ষেত্রে, সর্বদাই থাকে popover="manual" , যা বেক করা এই আচরণগুলির কোনোটির সাথে আসে না, যা আপনাকে আপনার প্রয়োজনীয় সুনির্দিষ্ট কার্যকারিতা এবং আচরণকে সংজ্ঞায়িত করতে দেয়।
popover="auto" | popover="hint" | popover="manual" | |
|---|---|---|---|
| হালকা খারিজ | হ্যাঁ | হ্যাঁ | না |
| জোর করে লুকান: | সম্পর্কহীন auto এস এবং hint এস | সম্পর্কহীন hint এস | কিছুই না |
| নেস্টিং: | হ্যাঁ | বিশেষ (আগে বর্ণিত) | N/A—কোন হালকা খারিজ |
হোভার ট্রিগারিং
একটি সাধারণ UX প্যাটার্ন হল টুলটিপ এবং হোভারকার্ড হোভার ট্রিগার করার জন্য। কিছু সময়ের জন্য আগ্রহের উপাদানের উপর মাউস ঘোরালে, হোভারকার্ড দেখানো হয়। বর্তমানে, এই আচরণটি জাভাস্ক্রিপ্টের মাধ্যমে প্রয়োগ করা প্রয়োজন, উদাহরণস্বরূপ mouseenter এবং mouseleave ইভেন্টের জন্য শ্রোতা যোগ করে। যাইহোক, আরেকটি এপিআই তৈরি করা হচ্ছে যা হোভার ট্রিগারিংকে ঘোষণামূলক করতে হবে: ইন্টারেস্ট ইনভোকারস এপিআই ।
এই API এখনও একটি কাজ চলছে, কিন্তু সাধারণ ধারণা হল interesttarget নামক একটি অ্যাট্রিবিউট যুক্ত করা অনেক উপাদানের সাথে, যা তাদের উপর হোভার-ট্রিগারিং আচরণ প্রদান করে:
<a interesttarget="my-hovercard" href="...">
Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
This is the hovercard
</span>
পূর্ববর্তী HTML এর সাথে, <a> লিঙ্কটি ঘোরালে স্বয়ংক্রিয়ভাবে my-hovercard পপওভার দেখাবে। পয়েন্টারটিকে সেই উপাদান থেকে সরিয়ে দিলে পপওভারটি লুকিয়ে যাবে। সব জাভাস্ক্রিপ্ট ছাড়া!
উদাহরণ
<button>An interesting button</button>
<div popover="hint">More info about the button</div>
[popover] {
margin: 0;
inset: auto;
position-area: bottom right;
}
const button = document.querySelector('button');
const popover = document.querySelector('[popover]');
button.onmouseenter = () => {
setTimeout(() => {
popover.showPopover({source: button});
}, 500);
}
button.onmouseleave = () => {
setTimeout(() => {
popover.hidePopover();
}, 500);
}
এই উদাহরণটি একটি মৌলিক টুলটিপ তৈরি করতে popover="hint" ব্যবহার করে, যা মাউসের সাহায্যে বোতামটি ঘোরালে বোতাম সম্পর্কে আরও তথ্য প্রদান করে। হোভার অ্যাক্টিভেশন সহজ 0.5 সেকেন্ড বিলম্বের সাথে mouseenter এবং mouseleave জন্য ইভেন্ট হ্যান্ডলার দ্বারা সরবরাহ করা হয়। মনে রাখবেন যে কয়েকটি বিবরণ রয়েছে যা এই উদাহরণ দ্বারা পরিচালিত হয় না:
- পপওভারকে ঘোরালে পপওভার বন্ধ হওয়া থেকে ট্রিগারিং উপাদান থেকে দূরে থাকাকে বাধা দেয় না। তাই পপওভার থেকে টেক্সট কপি বা পেস্ট করা সম্ভব নয়, উদাহরণস্বরূপ।
- কোনও "ডিবাউন্সিং" নেই: একটি সেকেন্ডের একটি ছোট ভগ্নাংশের জন্য বোতামটি ঘোরালে পপওভারটি ট্রিগার করার জন্য যথেষ্ট, এমনকি যদি বিলম্বের সময় শেষ হওয়ার আগে বোতামটি দ্রুত বন্ধ হয়ে যায়। এই ক্ষেত্রে, টুলটিপ "flickers" খোলা এবং দ্রুত বন্ধ.
- উদাহরণটি মোটেও অ্যাক্সেসযোগ্য নয়: মাউস ব্যবহার করে না এমন কোনো ব্যবহারকারী টুলটিপ সামগ্রী অ্যাক্সেস করতে পারে না।
এই ত্রুটিগুলি অতিরিক্ত জাভাস্ক্রিপ্ট দিয়ে সংশোধন করা যেতে পারে। উদাহরণস্বরূপ, পপওভারের কীবোর্ড-ভিত্তিক অ্যাক্টিভেশনকে সমর্থন করার জন্য focus (বা সম্ভবত keydown এবং keyup) ইভেন্ট হ্যান্ডলারদের যোগ করতে হবে। টুলটিপ অ্যাক্সেসযোগ্য কিনা তা নিশ্চিত করার জন্য যে জিনিসগুলি সঠিকভাবে পরিচালনা করা দরকার তার ব্যাখ্যার জন্য সারাহ হিগলির এই দুর্দান্ত ব্লগ পোস্টটি দেখুন। এই সমস্ত সমস্যা (এবং আরও) স্বয়ংক্রিয়ভাবে ইন্টারেস্ট ইনভোকারস API দ্বারা ঘোষণামূলকভাবে পরিচালনা করা হবে।
আরও জানুন
আরও বিস্তারিত জানার জন্য বৈশিষ্ট্য ব্যাখ্যাকারী বা HTML স্পেসিফিকেশন দেখুন।