CSS অ্যাঙ্কর পজিশনিং এপিআই উপস্থাপন করা হচ্ছে

Una Kravets

প্রকাশিত: ১০ মে, ২০২৪

CSS অ্যাঙ্কর পজিশনিং API ওয়েব ডেভেলপমেন্টে একটি যুগান্তকারী পরিবর্তন আনে কারণ এটি আপনাকে অ্যাঙ্কর নামে পরিচিত অন্যান্য উপাদানের তুলনায় উপাদানগুলিকে স্থানীয়ভাবে অবস্থান করতে দেয়। এই API মেনু এবং সাবমেনু, টুলটিপস, সিলেক্ট, লেবেল, কার্ড, সেটিংস ডায়ালগ এবং আরও অনেক কিছুর মতো অনেক ইন্টারফেস বৈশিষ্ট্যের জন্য জটিল লেআউট প্রয়োজনীয়তাগুলিকে সহজ করে তোলে। ব্রাউজারে অ্যাঙ্কর পজিশনিং তৈরি করার মাধ্যমে, আপনি তৃতীয় পক্ষের লাইব্রেরির উপর নির্ভর না করেই স্তরযুক্ত ব্যবহারকারী ইন্টারফেস তৈরি করতে সক্ষম হবেন, সৃজনশীল সম্ভাবনার একটি জগৎ খুলে দেবেন।

অ্যাঙ্কর পজিশনিং Chrome 125 থেকে পাওয়া যায়।

মূল ধারণা: অ্যাঙ্কর এবং অবস্থানগত উপাদান

এই API-এর মূলে রয়েছে অ্যাঙ্কর এবং পজিশন করা উপাদানের মধ্যে সম্পর্ক। অ্যাঙ্কর হল এমন একটি উপাদান যা anchor-name বৈশিষ্ট্য ব্যবহার করে একটি রেফারেন্স পয়েন্ট হিসাবে মনোনীত করা হয়। একটি পজিশন করা উপাদান হল এমন একটি উপাদান যা একটি অ্যাঙ্করের সাপেক্ষে position-anchor বৈশিষ্ট্য ব্যবহার করে বা স্পষ্টভাবে তার পজিশনিং লজিকে anchor-name ব্যবহার করে স্থাপন করা হয়।

অ্যাঙ্কর স্থাপন করা হচ্ছে

অ্যাঙ্কর তৈরি করা সহজ। নির্বাচিত উপাদানটিতে অ্যাঙ্কর-নাম বৈশিষ্ট্য প্রয়োগ করুন এবং এটিকে একটি অনন্য শনাক্তকারী নির্ধারণ করুন। এই অনন্য শনাক্তকারীটি অবশ্যই একটি ডাবল ড্যাশ দিয়ে শুরু করতে হবে, অনেকটা CSS ভেরিয়েবলের মতো।

.anchor-button {
    anchor-name: --anchor-el;
}

একবার একটি অ্যাঙ্কর-নাম বরাদ্দ করা হলে, .anchor-button একটি অ্যাঙ্কর হিসেবে কাজ করে, যা অন্যান্য উপাদানের অবস্থান নির্দেশ করার জন্য প্রস্তুত। আপনি দুটি উপায়ের একটিতে এই অ্যাঙ্করটিকে অন্যান্য উপাদানের সাথে সংযুক্ত করতে পারেন:

অন্তর্নিহিত অ্যাঙ্কর

একটি অ্যাঙ্করকে অন্য একটি এলিমেন্টের সাথে সংযুক্ত করার প্রথম উপায় হল একটি ইমপ্লিসিট অ্যাঙ্কর ব্যবহার করা, যেমনটি নিম্নলিখিত কোড উদাহরণে দেখানো হয়েছে। position-anchor প্রোপার্টিটি আপনার অ্যাঙ্করের সাথে যে এলিমেন্টটি সংযুক্ত করতে চান তাতে যোগ করা হয় এবং অ্যাঙ্করের নাম (এই ক্ষেত্রে --anchor-el ) একটি মান হিসেবে থাকে।

.positioned-notice {
    position-anchor: --anchor-el;
}

একটি অন্তর্নিহিত অ্যাঙ্কর সম্পর্কের মাধ্যমে, আপনি anchor() ফাংশন ব্যবহার করে উপাদানগুলিকে তার প্রথম আর্গুমেন্টে স্পষ্টভাবে অ্যাঙ্করের নাম উল্লেখ না করেই অবস্থান নির্ধারণ করতে পারেন।

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

স্পষ্ট অ্যাঙ্কর

বিকল্পভাবে, আপনি সরাসরি অ্যাঙ্কর ফাংশনে অ্যাঙ্কর নাম ব্যবহার করতে পারেন (উদাহরণস্বরূপ, top: anchor(--anchor-el bottom )। এটিকে একটি স্পষ্ট অ্যাঙ্কর বলা হয়, এবং আপনি যদি একাধিক উপাদানের সাথে অ্যাঙ্কর করতে চান তবে এটি কার্যকর হতে পারে (উদাহরণস্বরূপ পড়ুন)।

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

অ্যাঙ্করের সাপেক্ষে উপাদানগুলির অবস্থান নির্ধারণ করুন

অ্যাঙ্কর পজিশনিং CSS অ্যাবসোলিউট পজিশনিং এর উপর ভিত্তি করে তৈরি হয়। পজিশনিং ভ্যালু ব্যবহার করার জন্য আপনাকে আপনার পজিশন করা এলিমেন্টে position: absolute যোগ করতে হবে। তারপর, পজিশনিং ভ্যালু প্রয়োগ করতে anchor() ফাংশন ব্যবহার করুন। উদাহরণস্বরূপ, অ্যাঙ্করিং এলিমেন্টের উপরের বাম দিকে একটি অ্যাঙ্করড এলিমেন্ট স্থাপন করতে, নিম্নলিখিত পজিশনিং ব্যবহার করুন:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

এখন আপনার একটি উপাদান অন্যটির সাথে সংযুক্ত আছে, যেমনটি নিচের ছবিতে দেখানো হয়েছে।

এই মানগুলির জন্য লজিক্যাল পজিশনিং ব্যবহার করার জন্য, সমতুল্যগুলি নিম্নরূপ:

• top = inset-block-start
• left = inset-inline-start
• bottom = inset-block-end
• right = inset-inline-end

anchor-center দিয়ে একটি পজিশন করা এলিমেন্টকে কেন্দ্র করুন

আপনার অ্যাঙ্কর পজিশন করা এলিমেন্টকে অ্যাঙ্করের সাপেক্ষে কেন্দ্রীভূত করা সহজ করার জন্য, anchor-center নামে একটি নতুন মান রয়েছে যা justify-self , align-self , justify-items , এবং align-items বৈশিষ্ট্যের সাথে ব্যবহার করা যেতে পারে।

এই উদাহরণটি justify-self: anchor-center ব্যবহার করে পূর্ববর্তীটি পরিবর্তন করে, যাতে নোঙ্গরের উপরে অবস্থিত উপাদানটি কেন্দ্রীভূত করা যায়।

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

একাধিক অ্যাঙ্কর

এলিমেন্টগুলিকে একাধিক অ্যাঙ্করের সাথে সংযুক্ত করা যেতে পারে। এর অর্থ হল আপনাকে একাধিক অ্যাঙ্করের সাথে সম্পর্কিত অবস্থানের মান সেট করতে হতে পারে। anchor() ফাংশন ব্যবহার করে এবং প্রথম আর্গুমেন্টে আপনি কোন অ্যাঙ্করটি উল্লেখ করছেন তা স্পষ্টভাবে উল্লেখ করে এটি করুন। নিম্নলিখিত উদাহরণে, একটি পজিশন করা এলিমেন্টের উপরের-বাম অংশটি একটি অ্যাঙ্করের নীচে-ডানে নোঙ্গর করা হয়েছে, এবং পজিশন করা এলিমেন্টের নীচে-ডান অংশটি দ্বিতীয় অ্যাঙ্করের উপরের-বামে নোঙ্গর করা হয়েছে:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

inset-area সহ অবস্থান

অ্যাবসোলিউট পজিশনিং থেকে ডিফল্ট ডাইরেকশনাল পজিশনিং ছাড়াও, অ্যাঙ্করিং API-তে ইনসেট এরিয়া নামে একটি নতুন লেআউট মেকানিজম অন্তর্ভুক্ত রয়েছে।

ইনসেট এরিয়া অ্যাঙ্কর পজিশন করা উপাদানগুলিকে তাদের নিজ নিজ অ্যাঙ্করের সাপেক্ষে স্থাপন করা সহজ করে তোলে এবং অ্যাঙ্করিং উপাদানটিকে কেন্দ্রে রেখে 9-কোষের গ্রিডে কাজ করে।

৯-কোষের গ্রিডে দেখানো বিভিন্ন সম্ভাব্য ইনসেট-এরিয়া পজিশনিং বিকল্প

পরম অবস্থানের পরিবর্তে ইনসেট এরিয়া ব্যবহার করতে, ভৌত বা লজিক্যাল মান সহ inset-area বৈশিষ্ট্য ব্যবহার করুন। উদাহরণস্বরূপ:

• শীর্ষ-কেন্দ্র: inset-area: top অথবা inset-area: block-start
• বাম-কেন্দ্র: inset-area: left অথবা inset-area: inline-start
• নীচের-কেন্দ্র: inset-area: bottom অথবা inset-area: block-end
• ডান-কেন্দ্র: inset-area: right অথবা inset-area: inline-end

anchor-size() সহ উপাদানের আকার নির্ধারণ করুন

anchor-size() ফাংশন, যা anchor positioning API-এরও অংশ, anchor positioned element-কে তার anchor-এর আকার (প্রস্থ, উচ্চতা, অথবা ইনলাইন এবং ব্লক আকার) এর উপর ভিত্তি করে আকার বা অবস্থান নির্ধারণ করতে ব্যবহার করা যেতে পারে।

নিচের CSS-এ উচ্চতার জন্য এটি ব্যবহারের একটি উদাহরণ দেখানো হয়েছে, যেখানে calc() ফাংশনের মধ্যে anchor-size(height) ব্যবহার করে টুলটিপের সর্বোচ্চ উচ্চতা অ্যাঙ্করের উচ্চতার দ্বিগুণ নির্ধারণ করা হয়েছে।

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

পপওভার এবং ডায়ালগের মতো টপ-লেয়ার এলিমেন্ট সহ অ্যাঙ্কর ব্যবহার করুন

popover . এবং <dialog> এর মতো টপ-লেয়ার এলিমেন্টের সাথে অ্যাঙ্কর পজিশনিং অবিশ্বাস্যভাবে ভালো কাজ করে। যদিও এই এলিমেন্টগুলি DOM সাবট্রির বাকি অংশ থেকে আলাদা লেয়ারে স্থাপন করা হয়, অ্যাঙ্কর পজিশনিং আপনাকে এগুলিকে আবার টেদার করতে এবং উপরের লেয়ারে নয় এমন এলিমেন্টগুলির সাথে স্ক্রোল করতে দেয়। লেয়ারযুক্ত ইন্টারফেসের জন্য এটি একটি বিশাল জয়।

নিচের উদাহরণে, টুলটিপ পপওভারের একটি সেট একটি বোতাম ব্যবহার করে খোলা শুরু হয়। বোতামটি হল অ্যাঙ্কর এবং টুলটিপ হল পজিশন করা উপাদান। আপনি অন্য যেকোনো অ্যাঙ্কর করা উপাদানের মতোই পজিশন করা উপাদানটিকে স্টাইল করতে পারেন। এই নির্দিষ্ট উদাহরণের জন্য, anchor-name এবং position-anchor হল বোতাম এবং টুলটিপে ইনলাইন স্টাইল। যেহেতু প্রতিটি অ্যাঙ্করের একটি অনন্য অ্যাঙ্কর নাম প্রয়োজন, ডায়নামিক কন্টেন্ট তৈরি করার সময়, ইনলাইনিং হল এটি করার সবচেয়ে সহজ উপায়।

@position-try ব্যবহার করে অ্যাঙ্করের অবস্থান সামঞ্জস্য করুন

একবার আপনার প্রাথমিক অ্যাঙ্কর পজিশন হয়ে গেলে, অ্যাঙ্করটি যদি তার ধারণকারী ব্লকের প্রান্তে পৌঁছায় তবে আপনি অবস্থানটি সামঞ্জস্য করতে চাইতে পারেন। বিকল্প অ্যাঙ্কর পজিশন তৈরি করতে, আপনি @position-try নির্দেশিকাটি position-try-options প্রপার্টির সাথে ব্যবহার করতে পারেন।

নিচের উদাহরণে, একটি মেনুর ডানদিকে একটি সাবমেনু দেখা যাচ্ছে। মেনু এবং সাবমেনুগুলি পপওভার অ্যাট্রিবিউটের সাথে অ্যাঙ্কর পজিশনিং API-এর একটি দুর্দান্ত ব্যবহার, কারণ এই মেনুগুলি সাধারণত একটি ট্রিগার বোতামে অ্যাঙ্কর করা থাকে।

এই সাবমেনুতে, যদি অনুভূমিকভাবে পর্যাপ্ত স্থান না থাকে, তাহলে আপনি এটিকে মেনুর নীচে সরাতে পারেন। এটি করার জন্য, প্রথমে প্রাথমিক অবস্থান সেট আপ করুন:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

তারপর, @position-try ব্যবহার করে আপনার ফলব্যাক অ্যাঙ্করড পজিশন সেট আপ করুন:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

অবশেষে, position-try-options দিয়ে দুটিকে সংযুক্ত করুন। সব মিলিয়ে, এটি দেখতে এরকম দেখাচ্ছে:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

অ্যাঙ্কর পজিশন অটো-ফ্লিপ কীওয়ার্ড

যদি আপনার কোন মৌলিক সমন্বয় থাকে, যেমন উপর থেকে নীচে বা বাম থেকে ডানে (অথবা উভয়) উল্টানো, তাহলে আপনি কাস্টম @position-try ঘোষণা তৈরির ধাপটি এড়িয়ে যেতে পারেন এবং বিল্ট-ইন ব্রাউজার-সমর্থিত flip কীওয়ার্ড যেমন flip-block এবং flip-inline ব্যবহার করতে পারেন। এগুলি কাস্টম @position-try ঘোষণার জন্য স্ট্যান্ড-ইন হিসাবে কাজ করে এবং একে অপরের সাথে একত্রে ব্যবহার করা যেতে পারে:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

ফ্লিপ কীওয়ার্ড আপনার অ্যাঙ্কর কোডকে উল্লেখযোগ্যভাবে সহজ করে তুলতে পারে। মাত্র কয়েকটি লাইনের সাহায্যে, আপনি বিকল্প অবস্থান সহ একটি সম্পূর্ণ কার্যকরী অ্যাঙ্কর তৈরি করতে পারেন:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

সাবস্ক্রোলারে অ্যাঙ্করগুলির জন্য position-visibility

কিছু ক্ষেত্রে আপনি পৃষ্ঠার সাবস্ক্রোলারের মধ্যে একটি উপাদান অ্যাঙ্কর করতে চাইতে পারেন। এই ক্ষেত্রে, আপনি position-visibility ব্যবহার করে অ্যাঙ্করের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। অ্যাঙ্করটি কখন দৃশ্যমান থাকে? কখন এটি অদৃশ্য হয়ে যায়? এই বৈশিষ্ট্যের সাহায্যে আপনার এই বিকল্পগুলির উপর নিয়ন্ত্রণ রয়েছে। আপনি যখন অবস্থানকৃত উপাদানটি অ্যাঙ্করটি দৃশ্যমান না হওয়া পর্যন্ত দৃশ্যমান রাখতে চান তখন আপনি position-visibility: anchors-visible ব্যবহার করেন:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

বিকল্পভাবে, আপনি position-visibility: no-overflow ব্যবহার করেন যাতে অ্যাঙ্করটি তার পাত্রে উপচে না পড়ে।

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

বৈশিষ্ট্য সনাক্তকরণ এবং পলিফিলিং

যেহেতু এই মুহূর্তে ব্রাউজার সাপোর্ট সীমিত, তাই আপনি সম্ভবত কিছু সতর্কতা অবলম্বন করে এই API ব্যবহার করতে চাইবেন। প্রথমে, আপনি @supports ফিচার কোয়েরি ব্যবহার করে সরাসরি CSS-এ সাপোর্ট আছে কিনা তা পরীক্ষা করতে পারেন। এটি করার উপায় হল আপনার অ্যাঙ্কর স্টাইলগুলিকে নিম্নলিখিতগুলির মধ্যে মোড়ানো:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

অতিরিক্তভাবে, আপনি Oddbird এর CSS অ্যাঙ্কর পজিশনিং পলিফিল দিয়ে অ্যাঙ্কর পজিশনিং বৈশিষ্ট্যটি পলিফিল করতে পারেন, যা Firefox 54, Chrome 51, Edge 79 এবং Safari 10 থেকে কাজ করে। এই পলিফিলটি বেশিরভাগ মৌলিক অ্যাঙ্কর পজিশন বৈশিষ্ট্যগুলিকে সমর্থন করে, যদিও বর্তমান বাস্তবায়ন সম্পূর্ণ নয় এবং কিছু পুরানো সিনট্যাক্স রয়েছে। আপনি unpkg লিঙ্কটি ব্যবহার করতে পারেন অথবা সরাসরি প্যাকেজ ম্যানেজারে আমদানি করতে পারেন।

অ্যাক্সেসিবিলিটি সম্পর্কে একটি নোট

যদিও অ্যাঙ্কর পজিশনিং API একটি উপাদানকে অন্যদের সাপেক্ষে অবস্থান করার অনুমতি দেয়, এটি স্বভাবতই তাদের মধ্যে কোনও অর্থপূর্ণ শব্দার্থিক সম্পর্ক তৈরি করে না। যদি অ্যাঙ্কর উপাদান এবং অবস্থানকৃত উপাদানের মধ্যে আসলে একটি শব্দার্থিক সম্পর্ক থাকে (উদাহরণস্বরূপ, অবস্থানকৃত উপাদানটি অ্যাঙ্কর টেক্সট সম্পর্কে একটি সাইডবার মন্তব্য), তবে এটি করার একটি উপায় হল অ্যাঙ্কর উপাদান থেকে অবস্থানকৃত উপাদান(গুলি) নির্দেশ করার জন্য aria-details ব্যবহার করা। স্ক্রিন রিডার সফ্টওয়্যার এখনও aria-details মোকাবেলা করতে শিখছে, তবে সমর্থন উন্নত হচ্ছে।

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

যদি আপনি popover অ্যাট্রিবিউট অথবা <dialog> এলিমেন্টের সাথে অ্যাঙ্কর পজিশনিং ব্যবহার করেন, তাহলে ব্রাউজারটি সঠিক অ্যাক্সেসিবিলিটির জন্য ফোকাস নেভিগেশন সংশোধন পরিচালনা করবে, তাই আপনার পপওভার বা ডায়ালগগুলিকে DOM ক্রমে রাখার প্রয়োজন হবে না। স্পেসিফিকেশনে অ্যাক্সেসিবিলিটি সম্পর্কে আরও পড়ুন।

উপসংহার

এটি একটি একেবারে নতুন বৈশিষ্ট্য এবং আপনি এটি দিয়ে কী তৈরি করেন তা দেখে আমরা উত্তেজিত। এখন পর্যন্ত, আমরা কমিউনিটি থেকে কিছু সত্যিই সুন্দর ব্যবহারের কেস দেখেছি যেমন চার্টে ডায়নামিক লেবেল, সংযোগকারী লাইন, পাদটীকা এবং ভিজ্যুয়াল ক্রস-রেফারেন্সিং। আপনি যখন অ্যাঙ্কর পজিশনিং নিয়ে পরীক্ষা-নিরীক্ষা করছেন, তখন আমরা আপনার প্রতিক্রিয়া শুনতে আগ্রহী এবং যদি আপনি কোনও বাগ খুঁজে পান, তাহলে আমাদের জানান ।

আরও পড়া

• CSS অ্যাঙ্কর পজিশনিং ব্যবহার করে উপাদানগুলিকে সংযুক্ত করার জন্য একটি রেখা অঙ্কন করা
• ভবিষ্যৎ CSS: রোমান কোমারভের অ্যাঙ্কর পজিশনিং
• উনার কোডপেন অ্যাঙ্কর ডেমোর সংগ্রহ
• অ্যাঙ্কর পজিশনিং টুল