প্রকাশিত: ২৯ অক্টোবর, ২০২৫
Chrome 143 থেকে আপনি অ্যাঙ্কার্ড কন্টেইনার কোয়েরি ব্যবহার করে সনাক্ত করতে পারেন যে কখন কোনও অ্যাঙ্কার্ড এলিমেন্ট ফলব্যাক অ্যাঙ্কর পজিশনিং ব্যবহার করছে। এই পোস্টটি এই বৈশিষ্ট্যটি যে সমস্যার সমাধান করে তা ব্যাখ্যা করে।
CSS অ্যাঙ্কর পজিশনিং API একটি এলিমেন্ট (যেমন পপওভার) অন্য এলিমেন্ট (অ্যাঙ্কর) এর সাথে সংযুক্ত করার একটি শক্তিশালী উপায় প্রদান করে এবং এলিমেন্টটি জায়গা ফুরিয়ে গেলে ব্যবহৃত পজিশন-ট্রাই-ফলব্যাকের একটি সেট সংজ্ঞায়িত করে। উদাহরণস্বরূপ, যদি আপনার অ্যাঙ্কর করা এলিমেন্টটি প্রাথমিকভাবে উপরে থাকার জন্য স্টাইল করা হয়, কিন্তু আপনি যখন স্ক্রোল করেন এবং এটি স্ক্রিনের প্রান্তে আঘাত করে, তখন ব্রাউজারটি ভিউপোর্টে রাখার জন্য "ফ্লিপিং" পরিচালনা করতে পারে।
তবে, অ্যাঙ্কর পজিশনিং স্পেসিফিকেশনের লেভেল ১ একটি উল্লেখযোগ্য ফাঁক রেখে গেছে: যদিও CSS উপাদানটিকে একটি ফলব্যাক অবস্থানে স্থানান্তর করতে পারত, তবে কোন ফলব্যাকটি বেছে নেওয়া হয়েছে তা জানার কোনও উপায় ছিল না। এর অর্থ হল আপনি সেই চূড়ান্ত অবস্থানের উপর ভিত্তি করে বিভিন্ন স্টাইল প্রয়োগ করতে পারবেন না। যদি আপনার টুলটিপটি নীচ থেকে উপরে উল্টে যায়, তবে জাভাস্ক্রিপ্ট দিয়ে এটি ঠিক না করা পর্যন্ত এর তীরটি ভুল দিকে নির্দেশ করবে।
অ্যাঙ্কর্ড কন্টেইনার কোয়েরি ( CSS অ্যাঙ্কর পজিশন লেভেল 2 স্পেসিফিকেশনে সংজ্ঞায়িত) এই সমস্যার সমাধান করে, CSS অ্যাঙ্কর পজিশনিংকে অনুপস্থিত প্রাসঙ্গিক সচেতনতা প্রদান করে।
এটি কীভাবে কাজ করে: ফলব্যাকগুলি অনুসন্ধান করা
অ্যাঙ্করড কন্টেইনার কোয়েরিগুলি আপনাকে ব্রাউজার কীভাবে অ্যাঙ্কর পজিশনিং সমাধান করেছে তার উপর ভিত্তি করে স্টাইল প্রয়োগ করতে দেয়।
এটি দুটি নতুন CSS বৈশিষ্ট্য সহ সেট আপ করা হয়েছে:
-
container-type: anchored: এটি পজিশন করা এলিমেন্টে (যেমন, আপনার টুলটিপ) প্রয়োগ করুন। এটি এটিকে একটি কোয়েরি কন্টেইনারে পরিণত করে যা এর অ্যাঙ্কর পজিশনিং অবস্থা সম্পর্কে "সচেতন"। -
@container anchored(fallback: ...): এই নতুন at-rule সিনট্যাক্স আপনাকে জিজ্ঞাসা করতে দেয় যে কোন position-try-fallbacks বিকল্পটি শেষ পর্যন্ত ব্যবহৃত হয়েছিল।
কল্পনা করুন আপনার কাছে একটি টুলটিপ আছে যা আপনি নীচে রাখতে চান, কিন্তু উপরের অবস্থানটি ফলব্যাক হিসেবে ব্যবহার করুন। নিম্নলিখিত কোড:
- প্রাথমিকভাবে
.tooltipতার অ্যাঙ্করের নীচে (--my-anchor) স্থাপন করার চেষ্টা করে। - যদি এটি ফিট না হয়, তাহলে ফলব্যাক এটিকে উপরে নিয়ে যাবে।
-
@containerকোয়েরি এটি সনাক্ত করে। যখন উপরের ফলব্যাক প্রয়োগ করা হয়, তখনanchored(fallback: top)কোয়েরিটি সত্য হয়ে যায়। - এটি আপনাকে ::before ছদ্ম-উপাদানের বিষয়বস্তু "উপরের" তীর (▲) থেকে "নিচে" তীর (▼) এ পরিবর্তন করতে এবং এর অবস্থান সামঞ্জস্য করতে দেয়।
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
এই সবকিছুই সম্পূর্ণরূপে CSS-এ করা হয়—কোন জাভাস্ক্রিপ্ট নেই, কোন পর্যবেক্ষক নেই, কোন অতিরিক্ত ক্লাস নেই। দ্রষ্টব্য: আপনি যদি পপওভার API ব্যবহার করেন, তাহলে আপনার অ্যাঙ্করগুলির স্পষ্টভাবে নামকরণ করার প্রয়োজন হবে না, কারণ একটি অন্তর্নিহিত অ্যাঙ্কর সম্পর্ক তৈরি হয়।
নিচের ডেমোটি দেখুন যা বর্ডার হ্যাক ব্যবহার করে একটি CSS ত্রিভুজ তৈরি করে এবং অ্যাঙ্করড কোয়েরি দিয়ে ত্রিভুজটিকে পুনরায় স্থাপন করে:
উপসংহার
অ্যাঙ্কর করা কোয়েরিগুলি CSS ব্রাউজার-নেটিভকে একটি পজিশন করা এলিমেন্টের বর্তমান অ্যাঙ্কর অবস্থান সম্পর্কে সচেতনতা প্রদান করে। এর অর্থ হল আপনি আরও অনেক বেশি স্থিতিস্থাপক এবং প্রসঙ্গ-সচেতন উপাদান তৈরি করতে পারেন। টুলটিপ তীরটি কেবল একটি উদাহরণ; আপনি এটিও করতে পারেন:
- মেনু উল্টানোর সময় এর ব্যাকগ্রাউন্ড-রঙ পরিবর্তন করুন।
- অ্যাঙ্করের সবচেয়ে কাছের প্রান্তে একটি বর্ডার স্টাইল সরান।
- একটি পপওভারে বর্ডার-ব্যাসার্ধ সামঞ্জস্য করুন যাতে "সংযুক্ত" কোণটি বর্গাকার হয়।
- কোন ফলব্যাক পজিশনে স্ন্যাপ করা হবে তার উপর ভিত্তি করে একটি এলিমেন্টকে ভিন্নভাবে অ্যানিমেট করুন।
এটি অ্যাঙ্কর পজিশনিং এবং সাধারণভাবে কম্পোনেন্ট লাইব্রেরির জন্য একটি বিশাল জয়, যা কম কোড ব্যবহার করে আরও শক্তিশালী এবং স্বয়ংসম্পূর্ণ UI উপাদানগুলিকে সক্ষম করে।