অ্যাঙ্কর পজিশনিং

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

CSS অ্যাঙ্কর পজিশনিং অন্য উপাদানের সাথে সম্পর্কিত একটি উপাদানকে ঘোষণামূলকভাবে অবস্থান করার একটি উপায় প্রদান করে।

টিথারিং উপাদান

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

আপনাকে অবস্থান করা উপাদানটিতে কয়েকটি বৈশিষ্ট্য সেট করতে হবে যাতে এটি টিথার করা যায়। প্রথমে, আপনাকে নথির প্রবাহ থেকে উপাদানটিকে টেনে আনতে হবে, যাতে এটি ভাসতে থাকে, position: absolute বা position: fixed ।

এর পরে, আপনি অ্যাঙ্করে সেট করা অ্যাঙ্করের নামের সাথে position-anchor সেট করে আপনি কোন অ্যাঙ্করটি টিথার করতে চান তা সেট করতে হবে।

অবশেষে, আপনাকে কীভাবে অ্যাঙ্করটি স্থাপন করতে হবে তা সেট করতে হবে। আপনি এই মডিউলে পরে position-area সম্পর্কে আরও শিখবেন।

#anchor {
   anchor-name: --my-anchor;
}

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

অন্তর্নিহিত tethers

Popovers টিথার এমনকি সহজ. আপনি যখন একটি popovertarget সহ একটি বোতাম ব্যবহার করে বা showPopover({source}) এর সাথে একটি source সেট করে একটি পপওভার খোলেন, তখন পপওভারে ইতিমধ্যেই একটি "অন্তর্ভুক্ত অ্যাঙ্কর" সেট থাকে৷ যেহেতু একটি পপওভার ইতিমধ্যেই position: fixed , একটি পপওভার স্থাপন করতে, আপনাকে যা করতে হবে তা হল অবস্থান সেট করা।

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

সম্ভাব্য নোঙ্গর স্কোপিং

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

জাভাস্ক্রিপ্ট সমাধানগুলির মধ্যে প্রতিটি অ্যাঙ্করে অনন্য আইডি যোগ করা এবং তারপর অবস্থান করা উপাদান থেকে এটি উল্লেখ করা জড়িত। এটি কষ্টকর হয়ে ওঠে, এবং CSS-এর anchor-scope সাথে একটি সহজ সমাধান রয়েছে।

anchor-scope প্রপার্টি সেট করে যে কোন অ্যাঙ্করের নামগুলি শুধুমাত্র একটি উপাদান এবং তার বংশধরদের মধ্যে মিলিত হবে। এটি সমস্ত সংজ্ঞায়িত অ্যাঙ্কর নামের সুযোগকে সীমিত করতে এক বা একাধিক অ্যাঙ্কর নামের তালিকা বা কীওয়ার্ড all গ্রহণ করে।

একটি anchor-scope আদর্শভাবে অবস্থান করা উপাদান এবং অ্যাঙ্কর উপাদান উভয়ের পূর্বপুরুষের সাথে যোগ করা হয় যাতে একই নামের অন্যান্য অ্যাঙ্কর উপাদান থাকে না। প্রায়শই, এটি পুনঃব্যবহারযোগ্য উপাদানের মূলে থাকে।

নিম্নলিখিত উদাহরণটি একই anchor-name সাথে বারবার উপাদানগুলিতে প্রয়োগ করার সময় anchor-scope পার্থক্য দেখায়। উদাহরণে, সমস্ত <img> উপাদান এবং ইমেজ ব্যানার --image অ্যাঙ্কর নাম উল্লেখ করে। যখন anchor-scope <li> উপাদানগুলিতে প্রয়োগ করা হয়, position-anchor: --image ব্যানারের মতো একই <li> উপাদানের মধ্যে শুধুমাত্র <img> উপাদানের সাথে মিলবে, অন্যথায় এটি সর্বশেষ রেন্ডার করা <img> সাথে মিলবে।

পজিশনিং

এখন আপনি উপাদানটিকে আপনার অ্যাঙ্করে সংযুক্ত করেছেন, এখন এটিকে অবস্থান করার সময়। অ্যাঙ্কর পজিশনিং পজিশনিং-এর জন্য দুটি পদ্ধতি প্রদান করে - position-area এবং anchor() ফাংশন।

position-area

position-area প্রপার্টি আপনাকে এক বা দুটি কীওয়ার্ড নির্দিষ্ট করে অ্যাঙ্করের চারপাশে একটি উপাদান স্থাপন করতে দেয়। এটি অনেক সাধারণ ব্যবহারের ক্ষেত্রে কভার করে এবং প্রায়ই শুরু করার জন্য এটি একটি ভাল জায়গা।

position-area কিভাবে কাজ করে

position-area অ্যাঙ্করের প্রান্ত এবং পজিশনড এলিমেন্টের আসল ধারণকারী ব্লক দ্বারা তৈরি একটি এলাকায় অবস্থান করা উপাদানের জন্য একটি নতুন ধারণকারী ব্লক তৈরি করে কাজ করে।

যদিও position-area জন্য অনেক কীওয়ার্ড উপলব্ধ রয়েছে, সেগুলিকে আরও বোধগম্য করার জন্য কয়েকটি বিভাগে বিভক্ত করা যেতে পারে। সিনট্যাক্স অন্বেষণ করার জন্য Anchor-tool.com একটি দুর্দান্ত সরঞ্জাম।

শারীরিক কীওয়ার্ড

আপনি শারীরিক কীওয়ার্ড ব্যবহার করতে পারেন, top , left , bottom , right এবং center । উদাহরণস্বরূপ, position-area: top right অবস্থান করা উপাদানটিকে অ্যাঙ্করের উপরে এবং ডানদিকে রাখবে। এই কীওয়ার্ডগুলির শারীরিক অক্ষের সমতুল্য, y-start , x-start , y-end এবং x-end রয়েছে।

লজিক্যাল কীওয়ার্ড

এছাড়াও আপনি লজিক্যাল কীওয়ার্ড, block-start , block-end , inline-start এবং inline-end ব্যবহার করতে পারেন। উদাহরণস্বরূপ, position-area: block-end inline-start ইংরেজির মতো ভাষায় অ্যাঙ্করের নীচে এবং বামে অবস্থান করা উপাদানটিকে বা ব্লক অক্ষের নোঙ্গরের পরে এবং নথির লেখার মোডে ইনলাইন অক্ষের অ্যাঙ্করের আগে স্থাপন করবে। center একটি লজিক্যাল কীওয়ার্ড দিয়েও ব্যবহার করা যেতে পারে।

আপনি যদি লজিক্যাল কীওয়ার্ড নির্দিষ্ট করেন, তাহলে ব্লক অক্ষ প্রথম এবং ইনলাইন অক্ষ দ্বিতীয় দিয়ে আপনি অক্ষটি বাদ দিতে পারেন। position-area: start end position-area: block-start inline-end বা এমনকি position-area: inline-end block-start মতো।

একাধিক গ্রিড এলাকায় বিস্তৃত

এখনও অবধি, আপনি লক্ষ্য করেছেন যে এই বিকল্পগুলি আপনাকে কেবলমাত্র একটি গ্রিড স্পেসের মধ্যে অবস্থানকৃত উপাদান স্থাপন করতে দেয়। ভৌত বা যৌক্তিক বৈশিষ্ট্যে span উপসর্গ যোগ করা সংলগ্ন কেন্দ্র গ্রিড স্থান যোগ করে। position-area: span-top right অ্যাঙ্করের ডানদিকে এবং অ্যাঙ্করের নীচে থেকে পজিশন করা উপাদানের আসল ব্লকের উপরে অবস্থান করা হবে।

ড্রপ-ডাউন মেনুর জন্য একটি সাধারণ অবস্থান-ক্ষেত্র হল position-area: block-end span-inline-end ।

span-all কীওয়ার্ড 3টি সারি বা কলাম বিস্তৃত করে।

একক কীওয়ার্ড

আপনি শুধুমাত্র একটি কীওয়ার্ড সেট করলে, অন্য অক্ষটি স্বয়ংক্রিয়ভাবে সেট হয়ে যায়। এটি মূলত কাজ করে যেমন আপনি এটি কাজ করবে বলে আশা করেন তবে এটি কীভাবে কাজ করে তা বোঝার জন্য এটি কার্যকর হতে পারে।

প্রদত্ত কীওয়ার্ডটি তার অক্ষ সম্পর্কে স্পষ্ট হলে, অন্য অক্ষটিকে span-all হিসাবে গণনা করা হয়। এর মানে হল যে position-area: bottom position-area: bottom span-all সমতুল্য, এবং অবস্থান করা উপাদানটি অ্যাঙ্করের নীচে থাকবে এবং এতে থাকা ব্লকের সম্পূর্ণ প্রস্থ উপলব্ধ থাকবে।

অন্যদিকে, যদি কীওয়ার্ডটি স্পষ্টভাবে একটি অক্ষ নির্দেশ না করে তবে এটি পুনরাবৃত্তি হয়। position-area: start start start সমতুল্য, এবং বাম থেকে ডান ভাষায় অ্যাঙ্করের উপরের বাম দিকে স্থাপন করা হয়।

anchor() ফাংশন

আরও উন্নত ব্যবহারের ক্ষেত্রে, position-area আপনার প্রয়োজনীয়তা পূরণ নাও করতে পারে। anchor() ফাংশন আপনাকে অন্য উপাদানের অবস্থানের উপর ভিত্তি করে পৃথক ইনসেট বৈশিষ্ট্য সেট করতে দেয়। এটি একটি CSS দৈর্ঘ্যের সমাধান করে, যার অর্থ আপনি এটিকে গণনায় এবং অন্যান্য CSS ফাংশনের সাথে ব্যবহার করতে পারেন। এছাড়াও, আপনি বিভিন্ন নোঙ্গরের সাথে বিভিন্ন দিক সংযুক্ত করতে পারেন।

anchor() ফাংশনটি একটি অ্যাঙ্কর নাম এবং একটি অ্যাঙ্কর সাইড নেয়। যদি আপনার এলিমেন্টে একটি ডিফল্ট অ্যাঙ্কর থাকে, হয় position-anchor দিয়ে সেট করুন বা স্পষ্টভাবে, যেমন একটি পপওভার সহ, আপনি অ্যাঙ্কর নামটি বাদ দিতে পারেন।

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

ফলব্যাক মান

যদি একটি anchor() ফাংশনের জন্য একটি নোঙ্গর খুঁজে না পাওয়া যায়, তাহলে সম্পূর্ণ ঘোষণাটি অবৈধ হবে৷ এটি ঘটতে পারে যদি অ্যাঙ্করটি অবস্থান করা উপাদানের পরে রেন্ডার করা হয়, অথবা যদি মিলিত anchor-name সাথে একটি উপাদান না থাকে। এটি পরিচালনা করতে, আপনি একটি ফলব্যাক দৈর্ঘ্য বা শতাংশ সেট করতে পারেন।

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

পূর্ববর্তী উদাহরণে, অবস্থান করা উপাদানের বাম মান --focused-anchor এ নোঙর করা হয়, কিন্তু সেই anchor-name তখনই বিদ্যমান থাকে যখন প্রথম বোতামটি ঘোরানো বা ফোকাস করা হয়। যেহেতু একটি anchor() ফাংশন একটি দৈর্ঘ্যে সমাধান করে, আপনি ফলব্যাক হিসাবে অন্য অ্যাঙ্কর ব্যবহার করতে পারেন। যদি আমরা একটি ফলব্যাক প্রদান না করি, অবস্থান করা উপাদান অবস্থান করা হবে না।

অ্যাঙ্কর সাইড কীওয়ার্ড

অ্যাঙ্কর সাইড ভ্যালু বেছে নেয় অ্যাঙ্করের কোন প্রান্তের বিপরীতে অবস্থান করবে। position-area অনুরূপ, অ্যাঙ্কর সাইড মান বিভিন্ন ধরনের সিনট্যাক্স সমর্থন করে।

এই উদাহরণটি দেখায় কিভাবে একটি শতাংশ মান সর্বদা নির্দিষ্ট অক্ষের শুরু থেকে শেষ পর্যন্ত যায়:

anchor()

কারণ anchor() একটি দৈর্ঘ্য, এটি খুব নমনীয়। আপনি max() এবং calc() মতো CSS ফাংশনগুলির সাথে মানটি ম্যানিপুলেট করতে পারেন।

একটি সীমাবদ্ধতা হল আপনি ইনসেট বৈশিষ্ট্যগুলিতে শুধুমাত্র anchor() ফাংশন ব্যবহার করতে পারবেন।

পূর্বের উদাহরণটি খোলা বিবরণ প্যানেলের পিছনে একটি পটভূমি যোগ করে যা একটি ভিন্ন প্যানেল খোলার সময় মসৃণভাবে অ্যানিমেট হয় এবং একটি হোভার করা বিবরণ প্যানেল অন্তর্ভুক্ত করার জন্য প্রসারিত হয়। এটি সম্পন্ন করতে, এটি দুটি অ্যাঙ্করের মধ্যে ছোট দৈর্ঘ্য বাছাই করতে min() ব্যবহার করে।

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

উদাহরণটি খোলা প্যানেলের চারপাশে ইনলাইন স্থান যোগ করতে calc() ব্যবহার করে।

নোঙ্গর এর আকার ব্যবহার করে

আপনার অবস্থানকৃত উপাদানের আকার, অবস্থান বা মার্জিনের জন্য অ্যাঙ্করের মাত্রা ব্যবহার করতে আপনি anchor-size() ফাংশনটিও ব্যবহার করতে পারেন।

anchor-size() একটি অ্যাঙ্কর নাম নেয়, বা ডিফল্ট অ্যাঙ্কর ব্যবহার করে। ডিফল্টরূপে, এটি ব্যবহার করা হচ্ছে অক্ষে অ্যাঙ্করের আকার ব্যবহার করবে, তাই width: anchor-size() অ্যাঙ্করের প্রস্থ ফিরিয়ে দেবে। আপনি শারীরিক কীওয়ার্ড width এবং height বা লজিক্যাল কীওয়ার্ড block , inline , self-block এবং self-inline সহ আপনি কোন দৈর্ঘ্য চান তা নির্দিষ্ট করে অন্য অক্ষটিও ব্যবহার করতে পারেন।

ওভারফ্লো হ্যান্ডলিং

আপনি একটি ড্রপ-ডাউন মেনু উপাদান তৈরি করেছেন এবং ড্রপ-ডাউন মেনুটি যেখানে যেতে চান সেখানে রাখতে অ্যাঙ্কর পজিশনিং ব্যবহার করেছেন। কিন্তু তারপরে আপনি মেনুটিকে স্ক্রিনের অন্য দিকে নিয়ে যান, অথবা ব্যবহারকারীর মেনুর জন্য এটি ব্যবহার করেন এবং ব্যবহারকারীর নামটি অতিরিক্ত দীর্ঘ হয়। হঠাৎ, আপনার ড্রপ-ডাউন পর্দা বন্ধ. এখন কি?

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

ফলব্যাক বিকল্প

position-try-fallbacks নিয়ম ফলব্যাক বিকল্পগুলির একটি তালিকা নেয়। যখন ডিফল্ট অবস্থান ওভারফ্লো হয়, তখন প্রতিটি বিকল্প ক্রমানুসারে চেষ্টা করা হবে যতক্ষণ না এমন একটি অবস্থান যা ওভারফ্লো না হয়।

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

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

এছাড়াও বেশ কিছু flip- কীওয়ার্ড রয়েছে যা সাধারণ ফলব্যাক কেসগুলি পরিচালনা করে। flip-block এবং flip-inline ব্লক এবং ইনলাইন অক্ষের উপর উপাদানটিকে ফ্লিপ করার চেষ্টা করুন। উভয় অক্ষের উপর ফ্লিপ করার জন্য এগুলিকে flip-block flip-inline সাথে একত্রিত করা যেতে পারে। flip-start মান নোঙ্গরের শুরু থেকে শেষ কোণে একটি তির্যক রেখার উপর অবস্থান করা উপাদানটিকে উল্টে দেয়।

আপনি @position-try এর সাথে একটি কাস্টম ফলব্যাক বিকল্পও তৈরি করতে পারেন—এটি আপনাকে মার্জিন, প্রান্তিককরণ এবং এমনকি অ্যাঙ্কর পরিবর্তন করতে দেয়।

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

flip-block এবং flip-inline একটি বৈকল্পিক তৈরি করতে @position-try ফলব্যাক বিকল্পগুলিতে যোগ করা যেতে পারে।

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

পূর্ববর্তী উদাহরণে, ব্রাউজার এই পদক্ষেপগুলি অনুসরণ করে, এটি একটি সমাধান খুঁজে পাওয়ার সাথে সাথেই থামে যা ওভারফ্লো হয় না।

1. উপাদানটি position-area: end , অ্যাঙ্করের নীচে ডানদিকে।
2. যদি এটি ওভারফ্লো হয়, তাহলে উপাদানটিকে --bottom-span-right নামের কাস্টম ফলব্যাক বিকল্পের সাথে স্থাপন করা হয়, যা এটিকে position-area: bottom span-right , নীচে একটি অতিরিক্ত মার্জিন সহ।
3. যদি এটি ওভারফ্লো হয়, তাহলে উপাদানটিকে flip-inline --bottom-span-right দিয়ে স্থাপন করা হয়, যা কাস্টম ফলব্যাক বিকল্পটিকে flip-inline এর সাথে একত্রিত করে, যা মূলত position-area: bottom span-left ।
4. যদি এটি ওভারফ্লো হয়, উপাদানটিকে --use-alternate কাস্টম ফলব্যাক বিকল্প ব্যবহার করে স্থাপন করা হয়, যা এটিকে সম্পূর্ণ ভিন্ন অ্যাঙ্করের নিচে রাখে।
5. যদি এটি ওভারফ্লো হয়, তাহলে উপাদানটি position-area: end , যদিও এটি ওভারফ্লো হিসাবে পরিচিত।

ফলব্যাক অর্ডার

ডিফল্টরূপে, যখন প্রারম্ভিক অবস্থান ওভারফ্লো হয়, ব্রাউজার প্রতিটি বিকল্প position-try-fallbacks চেষ্টা করবে যতক্ষণ না এমন একটি অবস্থান পাওয়া যায় যা ওভারফ্লো হয় না। আপনি প্রতিটি ফলব্যাক বিকল্প পরীক্ষা করার জন্য position-try-order দিয়ে এই আচরণটিকে ওভাররাইড করতে পারেন এবং একটি নির্দিষ্ট অক্ষে সবচেয়ে বেশি স্থান আছে এমন একটি ব্যবহার করতে পারেন।

আপনি লজিক্যাল কীওয়ার্ড, most-block-size এবং most-inline-size , অথবা most-height এবং most-width শারীরিক কীওয়ার্ড দিয়ে অক্ষটি নির্দিষ্ট করতে পারেন।

position-try-order এবং position-try-fallbacks position-try শর্টহ্যান্ডের সাথে একত্রিত করা যেতে পারে, অর্ডারটি প্রথমে আসছে।

স্ক্রোলিং

যখন একজন ব্যবহারকারী স্ক্রোল করেন, তখন তারা আশা করেন পৃষ্ঠাটি তরলভাবে সরে যাবে। এটি সম্পন্ন করার জন্য, স্ক্রোল করার সময় কীভাবে অ্যাঙ্কর পজিশনিং ব্যবহার করা যেতে পারে তার উপর ব্রাউজারগুলির সীমা রয়েছে।

আপনি যখন বিভিন্ন স্ক্রোল পাত্রে অ্যাঙ্করগুলিতে একটি অবস্থানযুক্ত উপাদান টিথার করতে পারেন, তখন উপাদানটি কেবলমাত্র একটি অ্যাঙ্কর স্ক্রোলিংয়ের প্রতিক্রিয়াতে সরে যাবে। এটি হবে ডিফল্ট অ্যাঙ্কর, যা হয় একটি পপওভার থেকে অন্তর্নিহিত অ্যাঙ্কর, অথবা position-anchor মান।

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

আপনার উপলব্ধি পরীক্ষা করুন