পপওভার API প্রবর্তন করা হচ্ছে

উনা ক্রেভেটস

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

এটি সমাধান করার জন্য, পপওভার তৈরির জন্য ঘোষণামূলক HTML API-এর একটি নতুন সেট ব্রাউজারে আসছে, Chromium 114-এ popover API দিয়ে শুরু।

পপওভার অ্যাট্রিবিউট

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

  • ক্রোম: 114।
  • প্রান্ত: 114।
  • ফায়ারফক্স: 125।
  • সাফারি: 17।

উৎস

সমস্ত জটিলতা নিজেই পরিচালনা করার পরিবর্তে, আপনি ব্রাউজারটিকে popover বৈশিষ্ট্য এবং পরবর্তী বৈশিষ্ট্যগুলির সাথে এটি পরিচালনা করতে দিতে পারেন। HTML popovers সমর্থন:

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

আপনি এখন জাভাস্ক্রিপ্ট ব্যবহার না করেই এই সমস্ত বৈশিষ্ট্যগুলির সাথে পপওভার তৈরি করতে পারেন৷ একটি মৌলিক পপওভারের জন্য তিনটি জিনিস প্রয়োজন:

  • পপওভার ধারণকারী উপাদানের একটি popover বৈশিষ্ট্য।
  • পপওভার ধারণকারী উপাদানের একটি id ।
  • পপওভার খোলে এমন উপাদানে পপওভারের id মান সহ একটি popovertarget ৷
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

এখন আপনার কাছে একটি সম্পূর্ণ-কার্যকর মৌলিক পপওভার রয়েছে।

এই পপওভারটি অতিরিক্ত তথ্য জানাতে বা ডিসক্লোজার উইজেট হিসাবে ব্যবহার করা যেতে পারে।

ডিফল্ট এবং ওভাররাইড

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

popovertargetaction="show" : পপওভার দেখায়। popovertargetaction="hide" : পপওভার লুকায়।

popovertargetaction="hide" ব্যবহার করে, আপনি একটি পপওভারের মধ্যে একটি "বন্ধ" বোতাম তৈরি করতে পারেন, যেমনটি নিম্নলিখিত স্নিপেটে রয়েছে: 

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

অটো বনাম ম্যানুয়াল popovers

popover অ্যাট্রিবিউট নিজেই ব্যবহার করা আসলে popover="auto" এর জন্য একটি শর্টকাট। খোলা হলে, পূর্ববর্তী পপওভার ব্যতীত ডিফল্ট popover অন্যান্য স্বয়ংক্রিয় পপওভার বন্ধ করতে বাধ্য করবে। এটি হালকা-খারিজ বা একটি বন্ধ বোতামের মাধ্যমে বরখাস্ত করা যেতে পারে।

অন্যদিকে, popover=manual সেট করলে অন্য ধরনের পপওভার তৈরি হয়: একটি ম্যানুয়াল পপওভার। এগুলি অন্য কোনও উপাদানের ধরণকে জোর করে বন্ধ করে না এবং হালকা-খারিজ মাধ্যমে বন্ধ হয় না। আপনাকে অবশ্যই একটি টাইমার বা সুস্পষ্ট ক্লোজ অ্যাকশনের মাধ্যমে সেগুলি বন্ধ করতে হবে। popover=manual এর জন্য উপযুক্ত পপোভারের প্রকারগুলি হল উপাদান যা প্রদর্শিত এবং অদৃশ্য হয়ে যায়, কিন্তু পৃষ্ঠার বাকি অংশগুলিকে প্রভাবিত করা উচিত নয়, যেমন একটি টোস্ট বিজ্ঞপ্তি৷

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

পার্থক্য পর্যালোচনা করতে:

পপওভার সহ popover=auto :

  • খোলা হলে, অন্যান্য পপোভার জোর করে বন্ধ করুন।
  • হালকা-খারিজ করতে পারেন।

পপওভার সহ popover=manual :

  • অন্য কোনো এলিমেন্ট টাইপ বন্ধ করতে বাধ্য করবেন না।
  • হালকা-বরখাস্ত করবেন না। একটি টগল বা বন্ধ কর্ম ব্যবহার করে তাদের বন্ধ করুন.

স্টাইলিং popovers

এ পর্যন্ত আপনি এইচটিএমএল-এ বেসিক পপোভার সম্পর্কে শিখেছেন। কিন্তু popover সাথে আসা কিছু চমৎকার স্টাইলিং বৈশিষ্ট্যও রয়েছে। এর মধ্যে একটি হল স্টাইল করার ক্ষমতা ::backdrop ।

auto পপভারে, এটি সরাসরি উপরের স্তরের (যেখানে পপওভার থাকে) নীচের একটি স্তর, যা বাকি পৃষ্ঠার উপরে থাকে। নিম্নলিখিত উদাহরণে, ::backdrop একটি আধা-স্বচ্ছ রঙ দেওয়া হয়েছে: 

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

একটি popover এবং একটি dialog মধ্যে পার্থক্য৷

এটা মনে রাখা গুরুত্বপূর্ণ যে popover অ্যাট্রিবিউটটি নিজে থেকে শব্দার্থবিদ্যা প্রদান করে না। এবং যখন আপনি এখন popover="auto" ব্যবহার করে মডেল ডায়ালগের মতো অভিজ্ঞতা তৈরি করতে পারেন, তখন দুটির মধ্যে কয়েকটি মূল পার্থক্য রয়েছে:

dialog.showModal (একটি মোডাল ডায়ালগ) দিয়ে খোলা একটি dialog উপাদান হল এমন একটি অভিজ্ঞতা যার জন্য মোডালটি বন্ধ করার জন্য ব্যবহারকারীর স্পষ্ট মিথস্ক্রিয়া প্রয়োজন। একটি popover হালকা-খারিজ সমর্থন করে। একটি মডেল dialog না. একটি মোডাল ডায়ালগ পৃষ্ঠার বাকি অংশকে জড় করে দেয় । একটি popover না.

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

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

শীঘ্রই আসছে

ইন্টারেক্টিভ এন্ট্রি এবং প্রস্থান

display: none এবং উপরের স্তরে এবং থেকে অ্যানিমেটিং এখনও ব্রাউজারগুলিতে উপলব্ধ নেই৷ যাইহোক, তারা ক্রোমিয়ামের একটি আসন্ন সংস্করণের জন্য পরিকল্পনা করা হয়েছে, এই প্রকাশকে ঘনিষ্ঠভাবে অনুসরণ করে৷

বিচ্ছিন্ন বৈশিষ্ট্যগুলি অ্যানিমেট করার ক্ষমতা সহ, এবং :popover-open এবং @starting-style ব্যবহার করে, আপনি পপওভার খোলার এবং বন্ধ করার সময় মসৃণ রূপান্তর সক্ষম করতে পরিবর্তনের আগে এবং পরিবর্তনের পরে শৈলী সেট আপ করতে সক্ষম হবেন৷ আগের উদাহরণ নিন। এটিকে ভিতরে এবং বাইরে অ্যানিমেট করা অনেক মসৃণ দেখায় এবং আরও তরল ব্যবহারকারীর অভিজ্ঞতা সমর্থন করে:

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

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

পপওভার #menu-items সর্বদা তার টগল ট্রিগার, #menu-toggle বোতামে নোঙ্গর করা হয় তা নিশ্চিত করতে নিম্নলিখিত রেডিয়াল মেনু ডেমো সিএসএস অ্যাঙ্কর পজিশনিং সহ পপওভার API ব্যবহার করে।

অ্যাঙ্কর সেট আপ করা পপোভার সেট আপ করার অনুরূপ:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

আপনি একটি id দিয়ে একটি অ্যাঙ্কর সেট আপ করুন (এই উদাহরণে, #menu-toggle ), এবং তারপর দুটি উপাদান সংযোগ করতে anchor="menu-toggle" ব্যবহার করুন৷ এখন, আপনি পপওভার স্টাইল করতে anchor() ব্যবহার করতে পারেন। একটি কেন্দ্রীভূত পপওভার মেনু যা অ্যাঙ্কর টগলের বেসলাইনে নোঙ্গর করা হয় তা নিম্নরূপ স্টাইল করা যেতে পারে: 

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

এখন আপনার কাছে একটি সম্পূর্ণ-কার্যকর পপওভার মেনু রয়েছে যা টগল বোতামে অ্যাঙ্কর করা হয়েছে এবং এতে পপওভারের সমস্ত অন্তর্নির্মিত বৈশিষ্ট্য রয়েছে, কোন জাভাস্ক্রিপ্টের প্রয়োজন নেই!

উপসংহার

পপওভার API হল ওয়েব অ্যাপ্লিকেশনগুলিকে পরিচালনা করা সহজ এবং ডিফল্টরূপে আরও অ্যাক্সেসযোগ্য করার জন্য নতুন ক্ষমতাগুলির একটি সিরিজের প্রথম ধাপ৷ আপনি popovers ব্যবহার কিভাবে দেখতে আমি উত্তেজিত!

অতিরিক্ত পড়া