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-সেল গ্রিডে কাজ করে।

বিভিন্ন সম্ভাব্য ইনসেট-এরিয়া পজিশনিং বিকল্প, 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() ফাংশন, অ্যাঙ্কর পজিশনিং API-এরও অংশ, এটির অ্যাঙ্করের আকারের (প্রস্থ, উচ্চতা, বা ইনলাইন এবং ব্লকের আকার) উপর ভিত্তি করে একটি অ্যাঙ্কর পজিশন করা উপাদানের আকার বা অবস্থান করতে ব্যবহার করা যেতে পারে।

নিম্নোক্ত 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-options সম্পত্তি সহ @position-try নির্দেশিকা ব্যবহার করতে পারেন।

নিম্নলিখিত উদাহরণে, একটি মেনুর ডানদিকে একটি সাবমেনু প্রদর্শিত হবে। মেনু এবং সাবমেনুগুলি পপওভার অ্যাট্রিবিউটের সাথে অ্যাঙ্কর পজিশনিং 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-block মতো অন্তর্নির্মিত ব্রাউজার-সমর্থিত ফ্লিপ কীওয়ার্ড ব্যবহার করতে পারেন। 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 লিঙ্কটি ব্যবহার করতে পারেন বা এটি সরাসরি একটি প্যাকেজ ম্যানেজারে আমদানি করতে পারেন।

অ্যাক্সেসযোগ্যতার উপর একটি নোট

যদিও অ্যাঙ্কর পজিশনিং এপিআই একটি উপাদানকে অন্যদের তুলনায় অবস্থান করার অনুমতি দেয়, এটি তাদের মধ্যে অন্তর্নিহিতভাবে কোনো অর্থপূর্ণ শব্দার্থিক সম্পর্ক তৈরি করে না। যদি আসলে অ্যাঙ্কর উপাদান এবং অবস্থানকারী উপাদানের মধ্যে একটি শব্দার্থিক সম্পর্ক থাকে (উদাহরণস্বরূপ অবস্থান করা উপাদানটি অ্যাঙ্কর টেক্সট সম্পর্কে একটি সাইডবার মন্তব্য), এটি করার একটি উপায় হল অ্যাঙ্কর উপাদান থেকে নোঙর উপাদানের দিকে নির্দেশ করার জন্য 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: রোমান কোমারভ দ্বারা অ্যাঙ্কর পজিশনিং
• অ্যাঙ্কর ডেমোর উনার কোডপেন সংগ্রহ
• অ্যাঙ্কর পজিশনিং টুল