CSS অ্যাঙ্কর পজিশনিংয়ের মাধ্যমে টুলটিপ বা পপওভার তৈরি করার সময়, ব্রাউজার অটোমেটিক এলিমেন্টকে ফলব্যাক পজিশনে "ফ্লিপ" করতে পারে, অন্যথায় এটি ভিউপোর্ট উপচে পড়বে। এমনটি হলে, আপনি হয়ত পজিশন করা কন্টেন্টের স্টাইল অ্যাডজাস্ট করতে চাইবেন, যেমন পজিশন করা কন্টেন্ট থেকে অ্যাঙ্করের দিকে নির্দেশ করা তীরচিহ্নের পজিশন পরিবর্তন করা।
অ্যাঙ্কর করা কন্টেনার কোয়েরি আপনাকে কোনও এলিমেন্টের অ্যাক্টিভ পজিশনিং স্টেট কোয়েরি করার এবং সেই অনুযায়ী স্টাইল প্রয়োগ করার অনুমতি দিয়ে এই সমস্যার সমাধান করে। ভিউ পোর্ট কলিশন ফ্লিপিং (দিকনির্দেশক তীরচিহ্ন রিস্টাইলিং ছাড়া) সহ সাধারণ অ্যাঙ্কর করা ড্রপডাউন এবং ফ্লাইআউট পজিশনিংয়ের জন্য, ভিউ পোর্ট-অ্যাওয়ার ড্রপডাউন দেখুন।
সমস্যা
এমন একটি টুলটিপের কথা ভাবুন যা ডিফল্ট হিসেবে অ্যাঙ্করের উপরে দেখা যায়। এটির নিচে "নিম্নমুখী" তীরচিহ্ন আছে। ব্যবহারকারী স্ক্রল করলে এবং টুলটিপ ফ্লিপ করে অ্যাঙ্করের নিচে দেখালে, তীরচিহ্নটি এখন ভুল দিকে নির্দেশ করছে এবং টুলটিপের ভুল দিকে রয়েছে।
সমাধান: অ্যাঙ্কর করা কন্টেনার কোয়েরি
আপনার পজিশন করা এলিমেন্টে container-type: anchored সেট করার মাধ্যমে, আপনি এটিকে একটি কোয়েরি কন্টেনারে পরিণত করেন যা নিজের অ্যাঙ্কর-পজিশন করা স্টেট সম্পর্কে জানে। তারপর আপনি @container anchored() কোয়েরি ব্যবহার করে এর ডিসেন্ডেন্ট বা সিউডো-এলিমেন্ট আপডেট করতে পারবেন।
১. টুলটিপ ও ট্রিগার তৈরি করুন
টুলটিপ তৈরি করতে Popover API ব্যবহার করুন। popovertarget-এর মাধ্যমে পপওভার ইনভোক করলে, ট্রিগার বোতামের সাথে অটোমেটিক একটি ইমপ্লিসিট অ্যাঙ্কর কানেকশন তৈরি হয়, তাই কোনও এক্সপ্লিসিট anchor-name বা position-anchor-এর প্রয়োজন হয় না।
<button popovertarget="tooltip" id="anchor" aria-describedby="tooltip">anchor</button>
<div id="tooltip" popover role="tooltip"></div>
অ্যাঙ্কর পজিশনিংয়ের সাথে ব্যবহার করার জন্য পপওভার ইনসেট ও মার্জিন স্টাইল রিসেট করুন, তবে শুধুমাত্র অ্যাঙ্কর পজিশনিং কাজ করলে তবেই এটি করা যাবে।
@supports (anchor-name: --my-anchor) {
[popover] {
inset: auto;
margin: unset;
}
}
২. কন্টেনার সেট-আপ করুন
যে এলিমেন্ট পজিশন করা হচ্ছে সেটিতে container-type: anchored প্রয়োগ করুন। ফ্লিপিং আচরণ চালু করতে এই এলিমেন্টে অবশ্যই position-try-fallbacks সংজ্ঞায়িত থাকতে হবে।
#tooltip {
position: fixed;
position-area: block-start;
position-try-fallbacks: flip-block;
/* Enable anchored container queries */
container-type: anchored;
}
৩. ফলব্যাকের উপর ভিত্তি করে স্টাইল
নির্দিষ্ট ফলব্যাক চালু থাকলে স্টাইল প্রয়োগ করতে @container anchored(fallback: <value>) ব্যবহার করুন।
সব কন্টেনার কোয়েরির মতো, @container শুধুমাত্র কন্টেনারের ডিসেন্ড্যান্ট স্টাইল করতে পারে। তীরচিহ্ন তৈরি করার একটি সাধারণ কৌশল হল ::before এবং ::after ছদ্ম-এলিমেন্ট ব্যবহার করা, যেগুলিকে ডিসেন্ডেন্ট হিসেবে বিবেচনা করা হয় এবং সরাসরি স্টাইল করা যায়। তবে, টুলটিপ স্টাইল করতে (ধাপ ৪-এ যেমন দেখানো হয়েছে), আমরা টুলটিপে একটি চাইল্ড এলিমেন্ট যোগ করব এবং এর ::before ছদ্ম-এলিমেন্টে তীরচিহ্ন তৈরি করব।
<div id="tooltip" popover role="tooltip">
<div class="tooltip-content">Tooltip</div>
</div>
.tooltip-content::before {
/* Default "down" arrow for the 'top' position */
content: "▼";
position: absolute;
inset-block-end: 0;
inset-inline-start: 1rem;
}
/* Update to an "up" arrow when the 'flip-block' fallback (bottom) is active */
@container anchored(fallback: flip-block) {
.tooltip-content::before {
content: "▲";
inset-block-start: 0;
inset-block-end: auto;
}
}
৪. কন্টেনারে স্টাইল যোগ হচ্ছে
ফ্লিপ করার সময় কন্টেনারের প্রপার্টি (যেমন margin বা background-color) পরিবর্তন করতে হলে, আপনাকে ইনার র্যাপার এলিমেন্ট ব্যবহার করতে হবে।
- বাইরের দিকে দেখানো এলিমেন্টে
container-type: anchoredপ্রয়োগ করুন। @containerব্লকের মধ্যে থাকা ইনার এলিমেন্ট টার্গেট করুন।
@container anchored(fallback: flip-block) {
.tooltip-content {
border-radius: 0 0 .5rem .5rem;
margin-block-start: 0.25rem;
}
}
পেশাদার পদ্ধতি
- লজিক্যাল ফলব্যাককে অগ্রাধিকার দিন: আরও সহজ কোয়েরির জন্য
position-try-fallbacks-এflip-blockওflip-inline-এর মতো কীওয়ার্ড ব্যবহার করুন যা RTL ও বিভিন্ন লেখার মোড অটোমেটিক ম্যানেজ করে। - তীরের জন্য ছদ্ম-এলিমেন্ট ব্যবহার করুন: টুলটিপ তীরগুলি সম্পূর্ণরূপে আলংকারিক এবং
::beforeবা::after-এর জন্য উপযুক্ত, যা অতিরিক্ত DOM ছাড়াই অ্যাঙ্কর করা কন্টেনার কোয়েরির মাধ্যমে স্টাইল করা যেতে পারে।
ফলব্যাক স্ট্র্যাটেজি
প্রয়োগ করা ফলব্যাকের উপর ভিত্তি করে তীরচিহ্ন পজিশন করা হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট এবং ফলব্যাক পজিশনে প্রতিক্রিয়া জানানোর অন্য কোনও উপায় নেই। অ্যাঙ্কর পজিশন কন্টেনার কোয়েরি কাজ করে না এমন ব্রাউজারে তীরচিহ্ন লুকাতে, @supports (container-type: anchored)-এর মাধ্যমে CSS কাজ করে কিনা তা পরীক্ষা করুন।
@supports (container-type: anchored) {
.tooltip-content::before {
content: "▼";
}
}
পপওভারের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট
পপওভার API মূলত প্রোগ্রেসিভ এনহ্যান্সমেন্ট, তবে এর সংজ্ঞায়িত আচরণ — টপ-লেয়ার প্রোমোশন, লাইট-ডিসমিস এবং popovertarget ইনভোকেশন — শুধুমাত্র CSS-এর সমতুল্য নয়। পুরনো ব্রাউজারের ক্ষেত্রে পলিফিল বা ম্যানুয়াল ফলব্যাক প্রয়োজন হয়, যদি আপনি কোনওটিই শিপ করতে না চান।
Polyfill: পুরনো ব্রাউজারে popover অ্যাট্রিবিউট কাজ করানোর জন্য, শর্তসাপেক্ষে @oddbird/popover-polyfill লোড করুন। বাধ্যতামূলক: HTMLElement.prototype-এ popover প্রপার্টি চেক করে ফিচার শনাক্ত করুন এবং নেটিভ সাপোর্ট না থাকলে শুধুমাত্র তখনই পলিফিল লোড করুন — শর্তহীনভাবে এটি লোড করবেন না।
বান্ডলার বা ইমপোর্ট ম্যাপের মাধ্যমে:
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
বান্ডলার ছাড়া, <script type="module">-এর মধ্যে CDN থেকে ইমপোর্ট করুন:
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
স্টাইলিং সংক্রান্ত সতর্কতা: পলিফিল আসল :popover-open ছদ্ম-ক্লাসকে সংজ্ঞায়িত করতে পারে না, তাই এটি পরিবর্তে .\:popover-open ক্লাস প্রয়োগ করে। বাধ্যতামূলক: :is() বা :where()-এর সাথে দুটিকে একত্রিত করুন, অন্যথায় :popover-open নেই এমন ব্রাউজার সম্পূর্ণ নিয়মটি বাতিল করে দেয়:
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
বিকল্প হিসেবে, পলিফিল ছাড়া লিগ্যাসি ফলব্যাকের জন্য, position: fixed ব্যবহার করুন এবং getBoundingClientRect()-এর মাধ্যমে ম্যানুয়ালি কোঅর্ডিনেট হিসেব করুন অথবা ব্যবহারের ক্ষেত্রে গ্রহণযোগ্য হলে inset: auto-এর সাথে ডিফল্ট পজিশনিংয়ের উপর নির্ভর করুন।
Popover API কাজ করে না এমন ব্রাউজারে অ্যাঙ্কর পজিশনিংও কাজ করে না, তাই টুলটিপ স্ক্রিনের মাঝখানে দেখা যাবে।