সিএসএস পপওভার এপিআই: নেটিভ মোডাল এবং সুবিন্যস্ত ওভারলে পজিশনিং

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

সিএসএস পপওভার এপিআই কী?

সিএসএস পপওভার এপিআই নতুন কিছু এইচটিএমএল অ্যাট্রিবিউট এবং সিএসএস প্রপার্টি উপস্থাপন করে যা পপওভারের মতো এলিমেন্ট তৈরি এবং পরিচালনা সহজ করার জন্য ডিজাইন করা হয়েছে। এটি এমন এলিমেন্ট তৈরি করার জন্য একটি স্ট্যান্ডার্ড পদ্ধতি প্রদান করে যা:

• পেজের অন্যান্য কন্টেন্টের উপরে প্রদর্শিত হয়।
• একটি মাত্র ক্লিক বা ট্যাপের মাধ্যমে খোলা এবং বন্ধ করা যায়।
• অ্যাক্সেসিবিলিটির জন্য স্বয়ংক্রিয়ভাবে ফোকাস ম্যানেজমেন্ট পরিচালনা করে।
• সিএসএস ব্যবহার করে সহজেই স্টাইল করা যায়।

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

মূল ধারণা এবং অ্যাট্রিবিউটসমূহ

পপওভার এপিআই কার্যকরভাবে ব্যবহার করার জন্য এই মূল উপাদানগুলি বোঝা অত্যন্ত গুরুত্বপূর্ণ:

১. popover অ্যাট্রিবিউট

এই অ্যাট্রিবিউটটি পপওভার এপিআই-এর ভিত্তি। এটিকে কোনো এইচটিএমএল এলিমেন্টে প্রয়োগ করলে সেই এলিমেন্টটি একটি পপওভারে রূপান্তরিত হয়। popover অ্যাট্রিবিউট তিনটি ভ্যালু গ্রহণ করে:

• auto: (ডিফল্ট) এটি একটি "অটো" পপওভার বোঝায়। একই সময়ে একাধিক অটো পপওভার খোলা থাকতে পারে। পপওভারের বাইরে ক্লিক করলে বা Escape কী চাপলে এটি বন্ধ হয়ে যাবে ("লাইট ডিসমিস")।
• manual: এটি একটি "ম্যানুয়াল" পপওভার তৈরি করে। এই পপওভারগুলি সাধারণত মেনু বা টুলটিপের মতো স্থায়ী UI এলিমেন্টের জন্য ব্যবহৃত হয়, যেগুলির দৃশ্যমানতার উপর আরও নিয়ন্ত্রণের প্রয়োজন। ম্যানুয়াল পপওভার বাইরে ক্লিক করলে বা Escape চাপলে বন্ধ হয় না; এগুলিকে অবশ্যই জাভাস্ক্রিপ্ট বা অন্য কোনো বোতাম/লিঙ্ক ব্যবহার করে স্পষ্টভাবে বন্ধ করতে হবে।
• (কোনো ভ্যালু নেই): (অন্তর্নিহিতভাবে `auto`): কোনো ভ্যালু ছাড়াই `popover` অ্যাট্রিবিউট ব্যবহার করলে এটি অন্তর্নিহিতভাবে `auto` তে সেট হয়ে যায়।

উদাহরণ:

            <button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
  <p>This is a simple popover!</p>
</div>
            

              
                Copy
              
            
          

২. popovertarget অ্যাট্রিবিউট

এই অ্যাট্রিবিউটটি একটি বোতাম বা লিঙ্ককে একটি নির্দিষ্ট পপওভার এলিমেন্টের সাথে সংযুক্ত করে। যখন বোতাম বা লিঙ্কটি ক্লিক করা হয়, তখন popovertarget-এ উল্লিখিত আইডি-র সাথে যুক্ত পপওভারটি তার দৃশ্যমানতা টগল করবে (বন্ধ থাকলে খুলবে, খোলা থাকলে বন্ধ হবে)। আপনি একটি নির্দিষ্ট অ্যাকশন জোরদার করতে `popovertargetaction="show"` বা `popovertargetaction="hide"` উল্লেখ করতে পারেন।

উদাহরণ:

            <button popovertarget="my-popover">Open Popover</button>
<button popovertarget="my-popover" popovertargetaction="hide">Close Popover</button>
<div id="my-popover" popover>
  <p>This is a controllable popover!</p>
</div>
            

              
                Copy
              
            
          

৩. :popover-open সিএসএস সিউডো-ক্লাস

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

উদাহরণ:

            #my-popover:popover-open {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
            

              
                Copy
              
            
          

৪. togglePopover(), showPopover(), এবং hidePopover() জাভাস্ক্রিপ্ট মেথড

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

উদাহরণ:

            const popoverElement = document.getElementById('my-popover');

// To show the popover
popoverElement.showPopover();

// To hide the popover
popoverElement.hidePopover();

// To toggle the popover
popoverElement.togglePopover();
            

              
                Copy
              
            
          

একটি বেসিক পপওভার তৈরি করা

চলুন পপওভার এপিআই ব্যবহার করে একটি সাধারণ পপওভার তৈরি করি:

            <button popovertarget="my-popover">Show Details</button>

<div popover id="my-popover">
  <h3>Product Information</h3>
  <p>This is a high-quality product designed for optimal performance.</p>
</div>
            

              
                Copy
              
            
          

পপওভারটি স্টাইল করার জন্য কিছু বেসিক সিএসএস যোগ করুন:

            #my-popover {
  display: none; /* Initially hidden */
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Ensure it's above other elements */
}

#my-popover:popover-open {
  display: block; /* Show the popover when open */
}
            

              
                Copy
              
            
          

এই কোডটি একটি বোতাম তৈরি করে যা ক্লিক করলে পণ্যের তথ্য সহ পপওভারটি প্রদর্শন করবে। :popover-open সিউডো-ক্লাস নিশ্চিত করে যে পপওভারটি কেবল খোলা অবস্থায় দৃশ্যমান থাকবে।

উন্নত ব্যবহার এবং উদাহরণ

পপওভার এপিআই আরও জটিল UI এলিমেন্ট তৈরি করতে ব্যবহার করা যেতে পারে। এখানে কয়েকটি উদাহরণ দেওয়া হলো:

১. একটি মোডাল ডায়ালগ তৈরি করা

যদিও <dialog> এলিমেন্ট বিদ্যমান, পপওভার এপিআই এটিকে পরিপূরক করতে পারে বা এমন পরিস্থিতিতে ব্যবহার করা যেতে পারে যেখানে <dialog> এলিমেন্টটি আদর্শ নয়। `popover="manual"` ব্যবহার করে আপনি মোডালিটি আরও সঠিকভাবে নিয়ন্ত্রণ করতে পারেন। এখানে একটি মোডাল-এর মতো অভিজ্ঞতা তৈরি করার পদ্ধতি দেখানো হলো:

            <button popovertarget="my-modal">Open Modal</button>

<div id="my-modal" popover="manual" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid black; padding: 20px; z-index: 1000;">
  <h2>Confirmation Required</h2>
  <p>Are you sure you want to proceed?</p>
  <button onclick="document.getElementById('my-modal').hidePopover()">Cancel</button>
  <button onclick="alert('Proceeding!'); document.getElementById('my-modal').hidePopover()">OK</button>
</div>
<script>
  const modalButton = document.querySelector('[popovertarget="my-modal"]');
  modalButton.addEventListener('click', () => {
    const modal = document.getElementById('my-modal');
    modal.style.display = 'block'; //Make the styling take effect *before* showing.
    modal.showPopover();
  });
</script>
            

              
                Copy
              
            
          

এই উদাহরণে, মোডালটি প্রাথমিকভাবে লুকানো থাকে এবং সিএসএস ব্যবহার করে স্ক্রিনের কেন্দ্রে অবস্থান করে। জাভাস্ক্রিপ্ট নিশ্চিত করে যে মোডালটি দেখানোর *আগে* সঠিক স্টাইলিং প্রয়োগ করা হয় এবং `showPopover()` মেথড কল প্রদান করে। গুরুত্বপূর্ণভাবে, `popover="manual"` অ্যাট্রিবিউটের জন্য মোডালটি স্পষ্টভাবে লুকানোর জন্য জাভাস্ক্রিপ্ট প্রয়োজন। "Cancel" এবং "OK" বোতামগুলি মোডালটি বন্ধ করতে `hidePopover()` কল করার জন্য ইনলাইন জাভাস্ক্রিপ্ট ব্যবহার করে।

২. একটি টুলটিপ তৈরি করা

টুলটিপ হলো ছোট পপওভার যা একটি এলিমেন্টের উপর হোভার করলে অতিরিক্ত তথ্য প্রদান করে। এখানে পপওভার এপিআই ব্যবহার করে একটি টুলটিপ তৈরির পদ্ধতি দেখানো হলো:

            <span popovertarget="my-tooltip">Hover over me</span>
<div popover id="my-tooltip">This is a helpful tooltip!</div>
<style>
  #my-tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    z-index: 1000;
  }

  #my-tooltip:popover-open {
    display: block;
  }
  span[popovertarget] {
   position: relative; /* Required for proper tooltip positioning */
  }
</style>
            

              
                Copy
              
            
          

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

৩. একটি মেনু তৈরি করা

মেনু একটি সাধারণ UI এলিমেন্ট যা পপওভার এপিআই ব্যবহার করে সহজেই বাস্তবায়ন করা যায়।

            <button popovertarget="my-menu">Open Menu</button>

<div id="my-menu" popover>
  <ul>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>
            

              
                Copy
              
            
          

এবং সংশ্লিষ্ট সিএসএস:

            #my-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#my-menu:popover-open {
  display: block;
}

#my-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#my-menu li {
  margin-bottom: 5px;
}

#my-menu a {
  text-decoration: none;
  color: #333;
}
            

              
                Copy
              
            
          

অ্যাক্সেসিবিলিটি বিবেচনা

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

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

পপওভার এপিআই ব্যবহারের সুবিধা

পপওভার তৈরির প্রচলিত পদ্ধতির তুলনায় পপওভার এপিআই বেশ কিছু সুবিধা প্রদান করে:

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

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

২০২৪ সালের শেষের দিকে, সিএসএস পপওভার এপিআই ক্রোম, ফায়ারফক্স, সাফারি এবং এজের মতো প্রধান আধুনিক ব্রাউজারগুলিতে solide ব্রাউজার সমর্থন উপভোগ করে। তবে, প্রোডাকশনে এটি বাস্তবায়ন করার আগে Can I use... এর মতো ওয়েবসাইটে সর্বশেষ ব্রাউজার সামঞ্জস্যতার টেবিলগুলি পরীক্ষা করা অত্যন্ত গুরুত্বপূর্ণ। আপনার পুরানো ব্রাউজার বা পরিবেশের জন্য একটি পলিফিল সরবরাহ করতে হতে পারে যেখানে এপিআই এখনও উপলব্ধ নয়।

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

যদি আপনার এমন ব্রাউজারগুলিকে সমর্থন করতে হয় যা এখনও পপওভার এপিআই সমর্থন করে না, আপনি একটি পলিফিল ব্যবহার করতে পারেন। একটি পলিফিল হলো একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা একটি অনুপস্থিত এপিআই-এর কার্যকারিতা প্রদান করে। অনলাইনে বেশ কয়েকটি পপওভার এপিআই পলিফিল উপলব্ধ আছে। আপনার প্রিয় সার্চ ইঞ্জিনে "CSS Popover API polyfill" অনুসন্ধান করুন।

বিকল্পভাবে, আপনি পপওভার এপিআই সমর্থিত কিনা তা নির্ধারণ করতে ফিচার ডিটেকশন ব্যবহার করতে পারেন এবং যদি না থাকে তবে একটি ফলব্যাক বাস্তবায়ন প্রদান করতে পারেন:

            if ('popover' in HTMLElement.prototype) {
  // Use the Popover API
  console.log('Popover API is supported!');
} else {
  // Use a fallback implementation (e.g., a JavaScript library)
  console.log('Popover API is not supported. Using fallback.');
  // Add your fallback implementation here
}
            

              
                Copy
              
            
          

বিশ্বব্যাপী বিবেচনা

বিশ্বব্যাপী দর্শকদের জন্য পপওভার এপিআই বাস্তবায়ন করার সময়, নিম্নলিখিত বিষয়গুলি মনে রাখবেন:

• স্থানীয়করণ: নিশ্চিত করুন যে আপনার পপওভারের পাঠ্য বিভিন্ন ভাষা এবং অঞ্চলের জন্য সঠিকভাবে স্থানীয়করণ করা হয়েছে। উপযুক্ত ভাষার অ্যাট্রিবিউট এবং অনুবাদ প্রক্রিয়া ব্যবহার করুন। স্থানীয়করণ প্রক্রিয়াটিকে সুগম করতে একটি অনুবাদ ব্যবস্থাপনা সিস্টেম (TMS) ব্যবহার করার কথা বিবেচনা করুন।
• ডান-থেকে-বামে (RTL) সমর্থন: যদি আপনার ওয়েবসাইট RTL ভাষা (যেমন, আরবি, হিব্রু) সমর্থন করে, তবে নিশ্চিত করুন যে আপনার পপওভারগুলি RTL লেআউটে সঠিকভাবে মিরর এবং পজিশন করা হয়েছে। সঠিক লেআউট অভিযোজন নিশ্চিত করতে সিএসএস লজিক্যাল প্রপার্টি (যেমন, `margin-left`-এর পরিবর্তে `margin-inline-start`) ব্যবহার করুন।
• অ্যাক্সেসিবিলিটি: বিশ্বব্যাপী দর্শকদের জন্য অ্যাক্সেসিবিলিটি আরও বেশি গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার পপওভারগুলি WCAG নির্দেশিকা পূরণ করে এবং বিভিন্ন সাংস্কৃতিক পটভূমির প্রতিবন্ধী ব্যবহারকারীদের কাছে অ্যাক্সেসিবল।
• সাংস্কৃতিক সংবেদনশীলতা: আপনার পপওভারের বিষয়বস্তু ডিজাইন করার সময় সাংস্কৃতিক পার্থক্যের প্রতি সচেতন থাকুন। এমন ছবি বা পাঠ্য ব্যবহার করা থেকে বিরত থাকুন যা নির্দিষ্ট সংস্কৃতিতে আপত্তিকর বা অনুপযুক্ত হতে পারে।
• সময় অঞ্চল: যদি আপনার পপওভারগুলি সময়-সংবেদনশীল তথ্য প্রদর্শন করে, তবে নিশ্চিত করুন যে সময়টি ব্যবহারকারীর স্থানীয় সময় অঞ্চলে প্রদর্শিত হয়। সময় অঞ্চল রূপান্তর পরিচালনা করতে Moment.js বা Luxon-এর মতো জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন।

সেরা অনুশীলন

পপওভার এপিআই ব্যবহার করার সময় অনুসরণ করার জন্য এখানে কিছু সেরা অনুশীলন রয়েছে:

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

উপসংহার

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