CSS অ্যাঙ্কর পজিশনিং সহ একে অপরের সাথে এলিমেন্ট টিথার করুন

Jhey Tompkins

কিভাবে আপনি বর্তমানে অন্য একটি উপাদান tether না? আপনি তাদের অবস্থানগুলি ট্র্যাক করার চেষ্টা করতে পারেন, বা মোড়কের উপাদানের কিছু ফর্ম ব্যবহার করতে পারেন।

<!-- index.html -->
<div class="container">
  <a href="/link" class="anchor">I’m the anchor</a>
  <div class="anchored">I’m the anchored thing</div>
</div>

/* styles.css */
.container {
  position: relative;
}
.anchored {
  position: absolute;
}

এই সমাধানগুলি প্রায়ই আদর্শ নয়। তাদের প্রয়োজন জাভাস্ক্রিপ্ট বা অতিরিক্ত মার্কআপ প্রবর্তন। CSS অ্যাঙ্কর পজিশনিং API এর লক্ষ্য হল টিথারিং উপাদানগুলির জন্য একটি CSS API প্রদান করে এটি সমাধান করা। এটি অন্যান্য উপাদানের অবস্থান এবং আকারের উপর ভিত্তি করে একটি উপাদানের অবস্থান এবং আকার দেওয়ার একটি উপায় সরবরাহ করে।

ব্রাউজার সমর্থন

আপনি "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" পতাকার পিছনে ক্রোম ক্যানারিতে CSS অ্যাঙ্কর পজিশনিং API ব্যবহার করে দেখতে পারেন। সেই পতাকা সক্ষম করতে, Chrome Canary খুলুন এবং chrome://flags এ যান। তারপর "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" পতাকা সক্ষম করুন৷

ওডবার্ডে দল দ্বারা উন্নয়নে একটি পলিফিলও রয়েছে। github.com/oddbird/css-anchor-positioning- এ রেপো চেক করতে ভুলবেন না।

আপনি এর সাথে অ্যাঙ্করিং সমর্থন পরীক্ষা করতে পারেন:

@supports(anchor-name: --foo) {
  /* Styles... */
}

মনে রাখবেন যে এই APIটি এখনও পরীক্ষামূলক পর্যায়ে রয়েছে এবং পরিবর্তন হতে পারে। এই নিবন্ধটি একটি উচ্চ স্তরে গুরুত্বপূর্ণ অংশ কভার. বর্তমান বাস্তবায়নও CSS ওয়ার্কিং গ্রুপ স্পেকের সাথে সম্পূর্ণ সিঙ্ক নয়।

সমস্যাটি

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

সমস্যার আরেকটি অংশ হল যদি আপনি নিশ্চিত করতে চান যে টিথার করা উপাদানটি দৃশ্যে রয়ে গেছে—উদাহরণস্বরূপ, আপনি যদি একটি টুলটিপ খুলেন এবং এটি ভিউপোর্ট সীমার দ্বারা ক্লিপ হয়ে যায়। এটি ব্যবহারকারীদের জন্য একটি দুর্দান্ত অভিজ্ঞতা নাও হতে পারে। আপনি মানিয়ে নিতে টুলটিপ চান।

বর্তমান সমাধান

বর্তমানে, কিছু ভিন্ন উপায় রয়েছে যা আপনি সমস্যাটির সাথে যোগাযোগ করতে পারেন।

প্রথম আপ হল প্রাথমিক "অ্যাঙ্কর মোড়ানো" পদ্ধতি। আপনি উভয় উপাদান নিন এবং একটি পাত্রে তাদের মোড়ানো। তারপর আপনি নোঙ্গর আপেক্ষিক টুলটিপ অবস্থানের জন্য position ব্যবহার করতে পারেন.

<div class="containing-block">
  <div class="tooltip">Anchor me!</div>
  <a class="anchor">The anchor</a>
</div>

.containing-block {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

আপনি ধারকটি সরাতে পারেন এবং বেশিরভাগ অংশের জন্য আপনি যেখানে চান সেখানে সবকিছুই থাকবে।

অন্য পদ্ধতি হতে পারে যদি আপনি আপনার অ্যাঙ্করের অবস্থান জানেন বা আপনি এটিকে ট্র্যাক করতে পারেন। আপনি কাস্টম বৈশিষ্ট্য সহ আপনার টুলটিপে এটি পাস করতে পারেন।

<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>

:root {
  --anchor-width: 120px;
  --anchor-top: 40vh;
  --anchor-left: 20vmin;
}

.anchor {
  position: absolute;
  top: var(--anchor-top);
  left: var(--anchor-left);
  width: var(--anchor-width);
}

.tooltip {
  position: absolute;
  top: calc(var(--anchor-top));
  left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
  transform: translate(-50%, calc(-100% - 10px));
}

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

const setAnchorPosition = (anchored, anchor) => {
  const bounds = anchor.getBoundingClientRect().toJSON();
  for (const [key, value] of Object.entries(bounds)) {
    anchored.style.setProperty(`--${key}`, value);
  }
};

const update = () => {
  setAnchorPosition(
    document.querySelector('.tooltip'),
    document.querySelector('.anchor')
  );
};

window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);

এটি কিছু প্রশ্ন উত্থাপন করতে শুরু করে:

• আমি কখন শৈলী গণনা করব?
• আমি কিভাবে শৈলী গণনা করব?
• আমি কত ঘন ঘন শৈলী গণনা করব?

যে এটা সমাধান করে? এটি আপনার ব্যবহারের ক্ষেত্রে হতে পারে, কিন্তু একটি সমস্যা আছে: আমাদের সমাধান মানিয়ে নেয় না। এটা প্রতিক্রিয়াশীল নয়. যদি আমার নোঙ্গর করা উপাদান ভিউপোর্ট দ্বারা কেটে যায়?

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

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

এই সমস্যার জন্য একটি জনপ্রিয় প্যাকেজ " floating-ui " ব্যবহার করার জন্য কোডটি দেখতে কেমন হতে পারে তা এখানে:

import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';

const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')

const updatePosition = () => {  
  computePosition(anchor, tooltip, {
    placement: 'top',
    middleware: [offset(10), flip()]
  })
    .then(({x, y}) => {
      Object.assign(tooltip.style, {
        left: `${x}px`,
        top: `${y}px`
      })
  })
};

const clean = autoUpdate(anchor, tooltip, updatePosition);

এই কোড ব্যবহার করে এই ডেমোতে অ্যাঙ্করটিকে পুনরায় অবস্থান করার চেষ্টা করুন৷

"টুলটিপ" আপনার প্রত্যাশা অনুযায়ী আচরণ নাও করতে পারে। এটি y-অক্ষে ভিউপোর্টের বাইরে যাওয়ার প্রতিক্রিয়া দেখায় কিন্তু x-অক্ষে নয়। ডকুমেন্টেশন খনন করুন, এবং আপনি সম্ভবত আপনার জন্য কাজ করে এমন একটি সমাধান খুঁজে পাবেন।

কিন্তু, আপনার প্রকল্পের জন্য কাজ করে এমন একটি প্যাকেজ খুঁজে পেতে অনেক সময় লাগতে পারে। এটি অতিরিক্ত সিদ্ধান্ত এবং হতাশাজনক হতে পারে যদি এটি আপনার পছন্দ মতো কাজ না করে।

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

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

• কোন জাভাস্ক্রিপ্ট প্রয়োজন.
• ব্রাউজারটিকে আপনার নির্দেশিকা থেকে সেরা অবস্থানে কাজ করতে দিন।
• আর কোন তৃতীয় পক্ষের নির্ভরতা নেই
• কোন মোড়ক উপাদান নেই.
• উপরের স্তরে থাকা উপাদানগুলির সাথে কাজ করে।

আসুন আমরা উপরে যে সমস্যাটি সমাধান করার চেষ্টা করছিলাম তা পুনরায় তৈরি এবং মোকাবেলা করি। কিন্তু, পরিবর্তে, একটি নোঙ্গর সঙ্গে একটি নৌকা সাদৃশ্য ব্যবহার করুন. এই নোঙ্গর উপাদান এবং নোঙ্গর প্রতিনিধিত্ব করে. জল ধারণকারী ব্লক প্রতিনিধিত্ব করে.

প্রথমত, আপনাকে কীভাবে অ্যাঙ্কর সংজ্ঞায়িত করতে হবে তা চয়ন করতে হবে। অ্যাঙ্কর এলিমেন্টে anchor-name প্রপার্টি সেট করে আপনি আপনার CSS-এর মধ্যে এটি করতে পারেন। এটি একটি ড্যাশ-পরিচয় মান গ্রহণ করে।

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

বিকল্পভাবে, আপনি anchor অ্যাট্রিবিউট দিয়ে আপনার HTML-এ একটি অ্যাঙ্কর সংজ্ঞায়িত করতে সক্ষম হবেন। অ্যাট্রিবিউট মান হল অ্যাঙ্কর এলিমেন্টের আইডি। এটি একটি অন্তর্নিহিত অ্যাঙ্কর তৈরি করে।

<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>

একবার আপনি একটি অ্যাঙ্কর সংজ্ঞায়িত করেছেন, আপনি anchor ফাংশন ব্যবহার করতে পারেন। anchor ফাংশনটি 3 টি আর্গুমেন্ট নেয়:

• অ্যাঙ্কর উপাদান: অ্যাঙ্করের anchor-name যা ব্যবহার করতে হবে—অথবা, আপনি একটি implicit অ্যাঙ্কর ব্যবহার করার জন্য মান বাদ দিতে পারেন। এটি HTML সম্পর্কের মাধ্যমে বা anchor-name মান সহ anchor-default সম্পত্তির মাধ্যমে সংজ্ঞায়িত করা যেতে পারে।
• অ্যাঙ্কর সাইড: আপনি যে অবস্থানটি ব্যবহার করতে চান তার একটি কীওয়ার্ড। এটি top , right , bottom , left , center , ইত্যাদি হতে পারে বা, আপনি শতাংশ পাস করতে পারেন। উদাহরণস্বরূপ, 50% center সমান হবে।
• ফলব্যাক: এটি একটি ঐচ্ছিক ফলব্যাক মান যা একটি দৈর্ঘ্য বা শতাংশ গ্রহণ করে।

আপনি নোঙ্গর করা উপাদানের ইনসেট বৈশিষ্ট্য ( top , right , bottom , left বা তাদের লজিক্যাল সমতুল্য) জন্য একটি মান হিসাবে anchor ফাংশন ব্যবহার করেন। আপনি calc anchor ফাংশনটিও ব্যবহার করতে পারেন:

.boat {
  bottom: anchor(--my-anchor top);
  left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}

 /* alternative with anchor-default */
.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: calc(anchor(center) - (var(--boat-size) * 0.5));
}

কোন center ইনসেট সম্পত্তি নেই তাই একটি বিকল্প হল calc ব্যবহার করা যদি আপনি আপনার নোঙ্গর করা উপাদানের আকার জানেন। কেন translate ব্যবহার করবেন না? আপনি এটি ব্যবহার করতে পারেন:

.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

কিন্তু, ব্রাউজার নোঙ্গর করা উপাদানগুলির জন্য রূপান্তরিত অবস্থান বিবেচনা করে না। পজিশন ফলব্যাক এবং স্বয়ংক্রিয় অবস্থান বিবেচনা করার সময় কেন এটি গুরুত্বপূর্ণ তা স্পষ্ট হয়ে যাবে।

আপনি উপরে কাস্টম সম্পত্তি --boat-size এর ব্যবহার লক্ষ্য করেছেন। কিন্তু, আপনি যদি নোঙ্গরটির উপর নোঙ্গর করা উপাদানের আকারকে ভিত্তি করতে চান তবে আপনি সেই আকারটিও অ্যাক্সেস করতে পারেন। এটি নিজে গণনা করার পরিবর্তে, আপনি anchor-size ফাংশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আমাদের নৌকাটি আমাদের নোঙ্গরের চারগুণ প্রস্থ করতে:

.boat {
  width: calc(4 * anchor-size(--my-anchor width));
}

anchor-size(--my-anchor height) সহ উচ্চতায়ও আপনার অ্যাক্সেস রয়েছে। এবং আপনি অক্ষ বা উভয়ের আকার সেট করতে এটি ব্যবহার করতে পারেন।

আপনি যদি absolute অবস্থান সহ একটি উপাদান নোঙ্গর করতে চান? নিয়ম হল যে উপাদানগুলি ভাইবোন হতে পারে না। সেক্ষেত্রে, আপনি relative অবস্থান আছে এমন একটি পাত্রে নোঙ্গরটি মুড়ে দিতে পারেন। তারপর আপনি এটি নোঙ্গর করতে পারেন.

<div class="anchor-wrapper">
  <a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>

এই ডেমোটি দেখুন যেখানে আপনি নোঙ্গরটিকে চারপাশে টেনে আনতে পারেন এবং নৌকাটি অনুসরণ করবে।

স্ক্রল অবস্থান ট্র্যাকিং

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

.boat { anchor-scroll: --my-anchor; }

এই ডেমোটি ব্যবহার করে দেখুন যেখানে আপনি কোণে চেকবক্স দিয়ে anchor-scroll চালু এবং বন্ধ করতে পারেন।

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

টুলটিপ আছে অ্যাঙ্কর সহ একটি স্ক্রলিং কন্টেইনার আছে এই ডেমো বিবেচনা করুন. যে টুলটিপ উপাদানগুলি পপওভার সেগুলি অ্যাঙ্করগুলির সাথে সহ-অবস্থিত নাও হতে পারে:

কিন্তু, আপনি লক্ষ্য করবেন কিভাবে পপভারগুলি তাদের নিজ নিজ অ্যাঙ্কর লিঙ্কগুলিকে ট্র্যাক করে৷ আপনি সেই স্ক্রলিং ধারকটির আকার পরিবর্তন করতে পারেন এবং অবস্থানগুলি আপনার জন্য আপডেট হবে৷

পজিশন ফলব্যাক এবং অটো পজিশনিং

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

এখানে সাধারণ ব্যবহারের ক্ষেত্রে একটি টুলটিপ যা একটি অ্যাঙ্করের উপরে বা নীচে দেখানোর মধ্যে ফ্লিপ করা উচিত। এবং এই আচরণটি টুলটিপটি তার ধারক দ্বারা ক্লিপ করা হবে কিনা তার উপর ভিত্তি করে। যে ধারক সাধারণত ভিউপোর্ট হয়.

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

একটি সুস্পষ্ট position-fallback তৈরি করার আগে, অ্যাঙ্কর পজিশনিং স্বয়ংক্রিয় অবস্থানও অফার করবে। আপনি অ্যাঙ্কর ফাংশন এবং বিপরীত ইনসেট সম্পত্তি উভয় ক্ষেত্রেই auto মান ব্যবহার করে বিনামূল্যে সেই ফ্লিপটি পেতে পারেন। উদাহরণস্বরূপ, আপনি যদি bottom জন্য anchor ব্যবহার করেন, তাহলে auto top সেট করুন।

.tooltip {
  position: absolute;
  bottom: anchor(--my-anchor auto);
  top: auto;
}

স্বয়ংক্রিয় অবস্থানের বিকল্প হল একটি স্পষ্ট position-fallback ব্যবহার করা। এর জন্য আপনাকে একটি পজিশন ফলব্যাক সেট নির্ধারণ করতে হবে। ব্রাউজার এটি ব্যবহার করতে পারে এমন একটি খুঁজে না পাওয়া পর্যন্ত এটির মধ্য দিয়ে যাবে এবং তারপর সেই অবস্থানটি প্রয়োগ করবে। যদি এটি কাজ করে এমন একটি খুঁজে না পায় তবে এটি সংজ্ঞায়িত প্রথমটিতে ডিফল্ট হয়।

একটি position-fallback যা উপরের টুলটিপগুলি প্রদর্শন করার চেষ্টা করে তারপর নীচের মত দেখতে পারে:

@position-fallback --top-to-bottom {
  @try {
    bottom: anchor(top);
    left: anchor(center);
  }

  @try {
    top: anchor(bottom);
    left: anchor(center);
  }
}

টুলটিপগুলিতে এটি প্রয়োগ করা এইরকম দেখায়:

.tooltip {
  anchor-default: --my-anchor;
  position-fallback: --top-to-bottom;
}

anchor-default ব্যবহারের অর্থ হল আপনি অন্যান্য উপাদানগুলির জন্য position-fallback পুনরায় ব্যবহার করতে পারেন। anchor-default সেট করতে আপনি একটি স্কোপড কাস্টম সম্পত্তি ব্যবহার করতে পারেন।

আবার নৌকা ব্যবহার করে এই ডেমো বিবেচনা করুন. একটি position-fallback সেট আছে। আপনি নোঙ্গরের অবস্থান পরিবর্তন করার সাথে সাথে নৌকাটি পাত্রের মধ্যে থাকার জন্য সামঞ্জস্য করবে। প্যাডিং মান পরিবর্তন করার চেষ্টা করুন যা বডি প্যাডিং সামঞ্জস্য করে। লক্ষ্য করুন কিভাবে ব্রাউজার পজিশনিং সংশোধন করে। কন্টেইনারের গ্রিড অ্যালাইনমেন্ট পরিবর্তন করে অবস্থান পরিবর্তন করা হচ্ছে।

position-fallback এই সময় ঘড়ির কাঁটার দিকে পজিশনের চেষ্টা করার জন্য আরও ভার্বস।

.boat {
  anchor-default: --my-anchor;
  position-fallback: --compass;
}

@position-fallback --compass {
  @try {
    bottom: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    right: anchor(left);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }
}

উদাহরণ

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

প্রসঙ্গ মেনু

Popover API ব্যবহার করে একটি প্রসঙ্গ মেনু দিয়ে শুরু করা যাক। ধারণাটি হল যে শেভরনের সাথে বোতামটি ক্লিক করা একটি প্রসঙ্গ মেনু প্রকাশ করবে। এবং সেই মেনুতে প্রসারিত করার জন্য নিজস্ব মেনু থাকবে।

মার্কআপ এখানে গুরুত্বপূর্ণ অংশ নয়। কিন্তু, popovertarget ব্যবহার করে আপনার তিনটি বোতাম রয়েছে। তারপরে আপনার কাছে popover অ্যাট্রিবিউট ব্যবহার করে তিনটি উপাদান রয়েছে। এটি আপনাকে কোনো জাভাস্ক্রিপ্ট ছাড়াই প্রসঙ্গ মেনু খোলার ক্ষমতা দেয়। এটি এই মত দেখতে পারে:

<button popovertarget="context">
  Toggle Menu
</button>        
<div popover="auto" id="context">
  <ul>
    <li><button>Save to your Liked Songs</button></li>
    <li>
      <button popovertarget="playlist">
        Add to Playlist
      </button>
    </li>
    <li>
      <button popovertarget="share">
        Share
      </button>
    </li>
  </ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>

এখন, আপনি একটি position-fallback সংজ্ঞায়িত করতে পারেন এবং প্রসঙ্গ মেনুগুলির মধ্যে এটি ভাগ করতে পারেন। আমরা নিশ্চিত করি যে পপওভারের জন্যও কোনো inset শৈলী আনসেট করা যায়।

[popovertarget="share"] {
  anchor-name: --share;
}

[popovertarget="playlist"] {
  anchor-name: --playlist;
}

[popovertarget="context"] {
  anchor-name: --context;
}

#share {
  anchor-default: --share;
  position-fallback: --aligned;
}

#playlist {
  anchor-default: --playlist;
  position-fallback: --aligned;
}

#context {
  anchor-default: --context;
  position-fallback: --flip;
}

@position-fallback --aligned {
  @try {
    top: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }

  @try {
    top: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(bottom);
    left: anchor(right);
  }

  @try {
    right: anchor(left);
    bottom: anchor(bottom);
  }
}

@position-fallback --flip {
  @try {
    bottom: anchor(top);
    left: anchor(left);
  }

  @try {
    right: anchor(right);
    bottom: anchor(top);
  }

  @try {
    top: anchor(bottom);
    left: anchor(left);
  }

  @try {
    top: anchor(bottom);
    right: anchor(right);
  }
}

এটি আপনাকে একটি অভিযোজিত নেস্টেড প্রসঙ্গ মেনু UI দেয়। নির্বাচনের সাথে বিষয়বস্তুর অবস্থান পরিবর্তন করার চেষ্টা করুন। আপনি যে বিকল্পটি চয়ন করেন তা গ্রিড প্রান্তিককরণ আপডেট করে। এবং এটি প্রভাবিত করে কিভাবে অ্যাঙ্কর পজিশনিং পপওভারের অবস্থান করে।

ফোকাস এবং অনুসরণ করুন

এই ডেমোটি :has() এনে CSS আদিমকে একত্রিত করে। ধারণাটি ফোকাস আছে এমন input জন্য একটি ভিজ্যুয়াল সূচককে রূপান্তর করা ।

রানটাইমে একটি নতুন অ্যাঙ্কর সেট করে এটি করুন। এই ডেমোর জন্য, একটি স্কোপড কাস্টম সম্পত্তি ইনপুট ফোকাসে আপডেট করা হয়।

#email {
    anchor-name: --email;
  }
  #name {
    anchor-name: --name;
  }
  #password {
    anchor-name: --password;
  }
:root:has(#email:focus) {
    --active-anchor: --email;
  }
  :root:has(#name:focus) {
    --active-anchor: --name;
  }
  :root:has(#password:focus) {
    --active-anchor: --password;
  }

:root {
    --active-anchor: --name;
    --active-left: anchor(var(--active-anchor) right);
    --active-top: calc(
      anchor(var(--active-anchor) top) +
        (
          (
              anchor(var(--active-anchor) bottom) -
                anchor(var(--active-anchor) top)
            ) * 0.5
        )
    );
  }
.form-indicator {
    left: var(--active-left);
    top: var(--active-top);
    transition: all 0.2s;
}

কিন্তু, কিভাবে আপনি এটি আরও নিতে পারেন? আপনি নির্দেশমূলক ওভারলে কিছু ফর্ম জন্য এটি ব্যবহার করতে পারেন. একটি টুলটিপ আগ্রহের পয়েন্টগুলির মধ্যে স্থানান্তর করতে পারে এবং এর সামগ্রী আপডেট করতে পারে। আপনি বিষয়বস্তু ক্রসফেড করতে পারে. বিচ্ছিন্ন অ্যানিমেশনগুলি আপনাকে display বা রূপান্তর দেখার জন্য অ্যানিমেট করার অনুমতি দেয় এখানে কাজ করতে পারে।

বার চার্ট ক্যালক

আরেকটি মজার জিনিস যা আপনি অ্যাঙ্কর পজিশনিং দিয়ে করতে পারেন তা হল এটি calc সাথে একত্রিত করা। একটি চার্ট কল্পনা করুন যেখানে আপনার কিছু পপোভার রয়েছে যা চার্টটিকে টীকা করে।

আপনি CSS min এবং max ব্যবহার করে সর্বোচ্চ এবং সর্বনিম্ন মান ট্র্যাক করতে পারেন। এর জন্য CSS এইরকম দেখতে পারে:

.chart__tooltip--max {
    left: anchor(--chart right);
    bottom: max(
      anchor(--anchor-1 top),
      anchor(--anchor-2 top),
      anchor(--anchor-3 top)
    );
    translate: 0 50%;
  }

চার্টের মান আপডেট করার জন্য কিছু জাভাস্ক্রিপ্ট এবং চার্ট স্টাইল করার জন্য কিছু CSS আছে। কিন্তু অ্যাঙ্কর পজিশনিং আমাদের জন্য লেআউট আপডেটের যত্ন নেয়।

হ্যান্ডেলের আকার পরিবর্তন করুন

আপনি শুধুমাত্র একটি উপাদান নোঙ্গর করতে হবে না. আপনি একটি উপাদান জন্য অনেক অ্যাঙ্কর ব্যবহার করতে পারে. আপনি বার চার্ট উদাহরণে যে লক্ষ্য করেছেন হতে পারে. টুলটিপগুলি চার্ট এবং তারপর উপযুক্ত বারে নোঙ্গর করা হয়েছিল। আপনি যদি সেই ধারণাটিকে আরও কিছুটা এগিয়ে নেন তবে আপনি উপাদানগুলির আকার পরিবর্তন করতে এটি ব্যবহার করতে পারেন।

আপনি কাস্টম রিসাইজ হ্যান্ডলগুলির মতো অ্যাঙ্কর পয়েন্টগুলিকে ব্যবহার করতে পারেন এবং একটি inset মানের দিকে ঝুঁকতে পারেন৷

.container {
   position: absolute;
   inset:
     anchor(--handle-1 top)
     anchor(--handle-2 right)
     anchor(--handle-2 bottom)
     anchor(--handle-1 left);
 }

এই ডেমোতে, গ্রীনসক ড্র্যাগেবল হ্যান্ডেলগুলিকে টেনে নেওয়া যায়। কিন্তু, <img> উপাদানটি ধারকটি পূরণ করতে পুনরায় আকার দেয় যা হ্যান্ডেলগুলির মধ্যে ফাঁক পূরণ করতে সামঞ্জস্য করে।

একটি নির্বাচন মেনু?

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

<div class="select-menu">
<button popovertarget="listbox">
 Select option
 <svg>...</svg>
</button>
<div popover="auto" id="listbox">
   <option>A</option>
   <option>Styled</option>
   <option>Select</option>
</div>
</div>

একটি অন্তর্নিহিত anchor এটি সহজ করে তুলবে। কিন্তু, একটি প্রাথমিক সূচনা বিন্দুর জন্য CSS এর মতো দেখতে পারে:

[popovertarget] {
 anchor-name: --select-button;
}
[popover] {
  anchor-default: --select-button;
  top: anchor(bottom);
  width: anchor-size(width);
  left: anchor(left);
}

CSS অ্যাঙ্কর পজিশনিং এর সাথে Popover API-এর বৈশিষ্ট্যগুলিকে একত্রিত করুন এবং আপনি কাছাকাছি।

আপনি যখন :has() এর মতো জিনিসগুলি প্রবর্তন শুরু করেন তখন এটি ঝরঝরে। আপনি খোলা অবস্থায় মার্কার ঘোরাতে পারেন:

.select-menu:has(:open) svg {
  rotate: 180deg;
}

আপনি এটি পরবর্তী কোথায় নিতে পারে? আমরা যে একটি কার্যকরী select করতে আর কি প্রয়োজন? আমরা পরবর্তী নিবন্ধের জন্য এটি সংরক্ষণ করব। কিন্তু চিন্তা করবেন না, শৈলীযোগ্য নির্বাচিত উপাদান আসছে। সাথে থাকুন!

এটাই!

ওয়েব প্ল্যাটফর্মটি বিকশিত হচ্ছে। সিএসএস অ্যাঙ্কর পজিশনিং আপনি কীভাবে UI নিয়ন্ত্রণগুলি বিকাশ করেন তা উন্নত করার জন্য একটি গুরুত্বপূর্ণ অংশ। এটি আপনাকে সেই জটিল সিদ্ধান্তগুলির কিছু থেকে দূরে সরিয়ে দেবে। কিন্তু এটি আপনাকে এমন কিছু করার অনুমতি দেবে যা আপনি আগে কখনও করতে পারেননি। যেমন একটি <select> উপাদান স্টাইল করা! আপনি কি ভাবছেন আমাদের জানান.

Unsplash- এ CHUTTERSNAP- এর ছবি