তবুও আরেকটি অ্যাঙ্কর পজিশনিং কুয়ার্ক

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

সূচনা

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

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

সিএসএস অ্যাঙ্কর পজিশনিং এবং anchor-scope সম্পত্তি

আমাদের সম্পূর্ণ দেখুন CSS অ্যাঙ্কর পজিশনিং গাইড একটি ব্যাপক গভীর ডুব জন্য.

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

একটি নোঙ্গর এবং একটি লক্ষ্য প্রায় প্রতিটি উপাদান হতে পারে, তাই আপনি তাদের শুধুমাত্র দুটি হিসাবে ভাবতে পারেন div একে অপরের পাশে বসা:

<div class="anchor">anchor</div>
<div class="target">target</div>

শুরু করার জন্য, আমাদের প্রথমে সিএসএস ব্যবহার করে অ্যাঙ্কর উপাদান নিবন্ধন করতে হবে anchor-name সম্পত্তি:

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

এবং position-anchor একটি একেবারে-অবস্থানযুক্ত উপাদানের সম্পত্তি একই নামের একটি অ্যাঙ্করের সাথে সংযুক্ত করে। যাইহোক, টার্গেটের চারপাশে সরানোর জন্য আমাদের প্রয়োজন নোঙ্গর position-area সম্পত্তি

.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}

এটি দুর্দান্ত কাজ করে, তবে জিনিসগুলি জটিল হয়ে যায় যদি আমরা আরও অ্যাঙ্কর এবং লক্ষ্যগুলি অন্তর্ভুক্ত করতে আমাদের মার্কআপ পরিবর্তন করি:

<ul>
  <li>
    <div class="anchor">anchor 1</div>
    <div class="target">target 1</div>
  </li>
  <li>
    <div class="anchor">anchor 2</div>
    <div class="target">target 2</div>
  </li>
  <li>
    <div class="anchor">anchor 3</div>
    <div class="target">target 3</div>
  </li>
</ul>

প্রতিটি লক্ষ্য তার নিকটতম নোঙ্গরের সাথে সংযুক্ত করার পরিবর্তে, তারা সকলেই DOM-এর সর্বশেষ নিবন্ধিত অ্যাঙ্করে জমা হয়।

দ anchor-scope এই সমস্যার উত্তর হিসাবে Chrome 131 এ সম্পত্তি চালু করা হয়েছিল। এটি নোঙ্গরগুলির সুযোগকে একটি সাবট্রিতে সীমাবদ্ধ করে যাতে প্রতিটি লক্ষ্য সঠিকভাবে সংযুক্ত হয়। যাইহোক, আমি এই সম্পত্তিতে ফোকাস করতে চাই না, কারণ প্রাথমিকভাবে যা আমার দৃষ্টি আকর্ষণ করেছিল তা ছিল তেমানি এটি ব্যবহার করেননি. কিছু কারণে, তারা সব সঠিকভাবে সংযুক্ত, আবার, জাদু মত.

কি হচ্ছে?

লক্ষ্যগুলি সাধারণত তাদের নিকটতম অ্যাঙ্করের পরিবর্তে DOM-এর শেষ অ্যাঙ্করের সাথে সংযুক্ত থাকে, কিন্তু আমাদের প্রথম উদাহরণে, আমরা একই সাথে দুটি অ্যাঙ্কর দেখেছি anchor-name এবং তাদের সংশ্লিষ্ট লক্ষ্য সংযুক্ত. এই সব ছাড়া anchor-scope সম্পত্তি কি হচ্ছে?

দুটি শব্দ: ব্লক ধারণকারী.

অ্যাঙ্কর পজিশনিং সম্পর্কে কিছু জানার বিষয় হল যে এটি একটি উপাদান সম্বলিত ব্লক কীভাবে তৈরি হয় তার উপর অনেকটাই নির্ভর করে। এটি অ্যাঙ্কর পজিশনিং থেকে সহজাত কিছু নয় কিন্তু পরম অবস্থান থেকে। পরম উপাদান তাদের ধারণকারী ব্লক আপেক্ষিক অবস্থান করা হয়, এবং ইনসেট বৈশিষ্ট্য মত top: 0px, left: 30px বা inset: 1rem কেবলমাত্র একটি উপাদানকে এর ব্লক সীমানার চারপাশে ঘুরিয়ে দিচ্ছে, যাকে বলা হয় তৈরি করছে ইনসেট-সংশোধিত ব্লক ধারণকারী.

একটি নোঙ্গর সংযুক্ত একটি লক্ষ্য কোন ভিন্ন নয়, এবং কি position-area টেবিলের নিচে প্রপার্টি হল টার্গেটের ইনসেট-পরিবর্তিত ব্লককে পরিবর্তন করা যাতে এটি অ্যাঙ্করের ঠিক পাশে থাকে।

সাধারণত, একটি সম্পূর্ণ-অবস্থানযুক্ত উপাদানের ধারণকৃত ব্লকটি পুরো ভিউপোর্ট, তবে এটি অন্য কোনো অবস্থানের সাথে পূর্বপুরুষ দ্বারা পরিবর্তন করা যেতে পারে static (সাধারণত relative) টেমানি এই সত্যটির সুবিধা নেয় এবং প্রতিটি স্লাইডারের জন্য একটি নতুন ধারণকারী ব্লক তৈরি করে, যাতে সেগুলি শুধুমাত্র তাদের সংশ্লিষ্ট অ্যাঙ্করগুলির সাথে সংযুক্ত করা যায়। আপনি যদি কোডের চারপাশে স্নুপ করেন তবে আপনি এটি শুরুতে খুঁজে পেতে পারেন:

label {
  position: relative;
  /* No, It's not useless so don't remove it (or remove it and see what happens) */
}

যদি আমরা আমাদের পূর্ববর্তী উদাহরণগুলিতে এই কৌশলটি ব্যবহার করি, তবে হঠাৎ করে সেগুলি সঠিকভাবে সংযুক্ত!

এখনও অন্য quirk

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

আমি যখন পরীক্ষা করছিলাম তখন এটি আমার কাছে ঘটেছে স্ক্রোল-চালিত অ্যানিমেশন এবং অ্যাঙ্কর পজিশনিং এবং একটি পোস্টের পাশে টেক্সট-বুদবুদ পাদটীকা সংযুক্ত করার চেষ্টা করছে, যেমন:

যৌক্তিকভাবে, প্রতিটি পাদটীকা একটি লক্ষ্য হবে, কিন্তু একটি নোঙ্গর পছন্দ একটু বেশি চতুর। আমি প্রথমে ভেবেছিলাম যে প্রতিটি অনুচ্ছেদ একটি অ্যাঙ্কর হিসাবে কাজ করবে, তবে এর অর্থ একই সাথে একাধিক অ্যাঙ্কর থাকবে anchor-name. ফলাফল: সমস্ত লক্ষ্য শেষ অ্যাঙ্করে জমা হবে:

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

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

মূল পোস্টে এটি কীভাবে করা হয়েছিল তা আপনি আরও ভালভাবে পরীক্ষা করতে পারেন!

উপসংহার

দ anchor-scope ব্রাউজারে পাঠানোর জন্য সবচেয়ে সাম্প্রতিক CSS সম্পত্তি হতে পারে (এখন পর্যন্ত, শুধু Chrome 131+ এ), তাই আমরা আশা করতে পারি না যে এটির সমর্থন এই বিশ্বের বাইরে কিছু হবে। এবং যখন আমি এটি প্রতিবার এবং সেখানে ব্যবহার করতে চাই, এটি কিছু সময়ের জন্য ছোট ডেমোতে আবদ্ধ থাকবে। এটি অন্যান্য অ্যাঙ্কর পজিশনিং বৈশিষ্ট্যগুলির ব্যবহার সীমিত করার কারণ নয়, যা Chrome 125 এর পরে সমর্থিত (এবং আসুন অদূর ভবিষ্যতে অন্যান্য ব্রাউজারগুলিতে আশা করি), তাই আমি আশা করি এই ছোট ব্যঙ্গগুলি আপনাকে অ্যাঙ্কর পজিশনিং ব্যবহার চালিয়ে যেতে সাহায্য করবে কোনো ভয় ছাড়াই।