বিশদ এবং সারাংশ

খুব দরকারী বিবরণ এবং সারাংশ উপাদান কিভাবে কাজ করে, এবং কোথায় ব্যবহার করতে হবে তা আবিষ্কার করুন।

একটি ডিসক্লোজার উইজেট হল একটি ইউজার ইন্টারফেস কন্ট্রোল যা কন্টেন্ট লুকিয়ে রাখে এবং দেখায়। আপনি যদি web.dev-এ এটি পড়ছেন, এবং আপনার ভিউপোর্ট 106 ইএমএসের চেয়ে কম প্রশস্ত হয়, তাহলে এই অনুচ্ছেদের উপরে "এই পৃষ্ঠায়" ক্লিক করলে এই বিভাগের বিষয়বস্তুর সারণী দেখা যাবে। যদি আপনি এটি দেখতে না পান, একটি প্রকাশ উইজেট হিসাবে এই পৃষ্ঠায় বিষয়বস্তু নেভিগেশন টেবিল দেখতে ব্রাউজার সঙ্কুচিত করুন.

অ্যাকর্ডিয়ন গ্রাফিকাল ইউজার ইন্টারফেস হল উল্লম্বভাবে স্ট্যাক করা ডিসক্লোজার উইজেটগুলির একটি সিরিজ। অ্যাকর্ডিয়ন UI-এর একটি সাধারণ ব্যবহার হল অনেক সাইটের প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ) পৃষ্ঠা। একটি অ্যাকর্ডিয়ন FAQ-তে দৃশ্যমান প্রশ্নের একটি তালিকা থাকে; একটি প্রশ্নের উপর ক্লিক করলে প্রসারিত হয়, বা "প্রকাশ করে", সেই প্রশ্নের উত্তর।

jQuery অন্তত 2009 সাল থেকে একটি অ্যাকর্ডিয়ন UI প্যাটার্ন অন্তর্ভুক্ত করেছে। মূল জাভাস্ক্রিপ্ট-মুক্ত অ্যাকর্ডিয়ন সমাধানের মধ্যে অন্তর্ভুক্ত রয়েছে প্রতিটি FAQ প্রশ্নকে একটি <label> এর পরে এটির লেবেলযুক্ত চেকমার্ক তৈরি করা এবং তারপর চেকমার্ক চেক করা হলে <div> উত্তর প্রদর্শন করা। CSS দেখতে এরকম কিছু ছিল:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

ইতিহাস কেন? ডিসক্লোজার উইজেট, যেমন জাভাস্ক্রিপ্ট বা ফর্ম কন্ট্রোল হ্যাক ছাড়া অ্যাকর্ডিয়ান, তুলনামূলকভাবে সাম্প্রতিক সংযোজন; জানুয়ারী 2020 থেকে সমস্ত আধুনিক ব্রাউজারে <details> এবং <summary> উপাদানগুলি সম্পূর্ণরূপে সমর্থিত হয়েছে। আপনি এখন কার্যকারিতা তৈরি করতে পারেন, যদিও আকর্ষণীয়, ডিসক্লোজার উইজেটগুলি শুধুমাত্র শব্দার্থিক HTML ব্যবহার করে। <details> এবং <summary> উপাদানগুলিই আপনার প্রয়োজন: এগুলি প্রসারিত এবং ভেঙে যাওয়া বিষয়বস্তু পরিচালনা করার জন্য একটি অন্তর্নির্মিত উপায়। যখন একজন ব্যবহারকারী একটি <summary> ক্লিক করে বা ট্যাপ করে, অথবা যখন <summary> ফোকাস থাকে তখন এন্টার কী রিলিজ করে, প্যারেন্ট <details> এর বিষয়বস্তু দৃশ্যমান হতে টগল করে!

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

আপনি লক্ষ্য করবেন, এই কোডপেনগুলিতে কোন জাভাস্ক্রিপ্ট নেই।

টগল করা দৃশ্যমানতা: open বৈশিষ্ট্য

<details> উপাদান হল প্রকাশ উইজেট ধারক। <summary> হল সারাংশ বা কিংবদন্তি এর মূল <details> জন্য। সারাংশটি সর্বদা প্রদর্শিত হয়, একটি বোতাম হিসাবে কাজ করে যা পিতামাতার বাকি বিষয়বস্তু প্রদর্শনকে টগল করে। <summary> এর সাথে ইন্টারঅ্যাক্ট করা <details> ' উপাদানের open বৈশিষ্ট্য টগল করে স্ব-লেবেলযুক্ত সারাংশ ভাইবোনের প্রদর্শনকে টগল করে।

open অ্যাট্রিবিউট হল একটি বুলিয়ান অ্যাট্রিবিউট। যদি উপস্থিত থাকে, মান বা অভাব যাই হোক না কেন, এটি নির্দেশ করে যে সমস্ত <details> বিষয়বস্তু ব্যবহারকারীকে দেখানো হয়েছে। open অ্যাট্রিবিউট না থাকলে, শুধুমাত্র <summary> -এর বিষয়বস্তু দেখানো হয়।

যেহেতু ব্যবহারকারী নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করার সাথে সাথে open বৈশিষ্ট্যটি স্বয়ংক্রিয়ভাবে যুক্ত এবং সরানো হয়, তাই এটির অবস্থার উপর ভিত্তি করে উপাদানটিকে আলাদাভাবে স্টাইল করতে এটি CSS-এ ব্যবহার করা যেতে পারে।

আপনি একাধিক <details> উপাদানগুলির একটি তালিকা সহ একটি অ্যাকর্ডিয়ন তৈরি করতে পারেন, প্রতিটিতে একটি <summary> চাইল্ড। আপনার এইচটিএমএল-এ open অ্যাট্রিবিউট বাদ দেওয়ার অর্থ হল <details> পৃষ্ঠাটি লোড হওয়ার সময় শুধুমাত্র সংক্ষিপ্ত শিরোনামগুলি দৃশ্যমান সহ সবগুলি ভেঙে যাবে বা বন্ধ হয়ে যাবে; প্রতিটি শিরোনাম প্যারেন্ট <details> এর বাকি বিষয়বস্তুর জন্য ওপেনার হচ্ছে। আপনি যদি আপনার HTML-এ open অ্যাট্রিবিউটটি অন্তর্ভুক্ত করেন, তাহলে পৃষ্ঠাটি লোড হলে <details> বিষয়বস্তু দৃশ্যমান সহ প্রসারিত হবে।

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

<summary> একটি <details> উপাদানের প্রথম সন্তান হতে হবে, যা প্যারেন্ট <details> উপাদানের বাকি বিষয়বস্তুর জন্য একটি সারাংশ, ক্যাপশন বা কিংবদন্তি প্রতিনিধিত্ব করে যেখানে এটি নেস্ট করা হয়েছে। <summary> উপাদানের বিষয়বস্তু কোনো শিরোনাম বিষয়বস্তু, প্লেইন টেক্সট, বা HTML হতে পারে যা একটি অনুচ্ছেদের মধ্যে ব্যবহার করা যেতে পারে।

সারাংশ চিহ্নিতকারী টগল করা হচ্ছে

আগের দুটি কোডপেনে, আপনি সারাংশের ইনলাইন-স্টার্ট সাইডে তীরটি নোট করবেন। একটি ডিসক্লোজার উইজেট সাধারণত একটি ছোট ত্রিভুজ ব্যবহার করে অন-স্ক্রীনে উপস্থাপিত হয় যা ত্রিভুজের পাশে একটি লেবেল সহ খোলা/বন্ধ অবস্থা নির্দেশ করতে ঘোরে (বা টুইস্ট)। <summary> উপাদানের বিষয়বস্তু ডিসক্লোজার উইজেট লেবেল করে। প্রতিটি বিভাগের শীর্ষে ঘূর্ণায়মান তীরটি হল একটি ::marker <summary> উপাদানে সেট করা। তালিকা আইটেমগুলির মতো, <summary> উপাদানটি list-style শর্টহ্যান্ড বৈশিষ্ট্য এবং list-style-type সহ এর লংহ্যান্ড বৈশিষ্ট্যগুলিকে সমর্থন করে। আপনি CSS-এর সাহায্যে ডিসক্লোজার ত্রিভুজ স্টাইল করতে পারেন, list-style-image সহ একটি চিত্র সহ ত্রিভুজ থেকে অন্য যেকোনো বুলেট টাইপে ব্যবহৃত মার্কার পরিবর্তন করা সহ।

অন্যান্য শৈলী প্রয়োগ করতে, details summary::marker অনুরূপ একটি নির্বাচক ব্যবহার করুন। ::marker সিউডো-এলিমেন্ট শুধুমাত্র সীমিত সংখ্যক শৈলী গ্রহণ করে। ::marker অপসারণ করা এবং সহজ-থেকে-শৈলী ::before এটিকে প্রতিস্থাপন করা একটি সাধারণ অভ্যাস, CSS শৈলীগুলি উন্মুক্ত বৈশিষ্ট্যের উপস্থিতি (বা অনুপস্থিতি) এর উপর ভিত্তি করে তৈরি করা বিষয়বস্তুর স্টাইলকে সামান্য পরিবর্তন করে। আপনি list-style: none বা মার্কারের বিষয়বস্তুকে none সেট করবেন না, তবে সর্বদা দৃষ্টিগ্রাহ্য ব্যবহারকারীদের জানানোর জন্য ভিজ্যুয়াল সূচক অন্তর্ভুক্ত করুন যে সারাংশ বিষয়বস্তু একটি টগল বোতাম যা সক্রিয়করণের পরে বিষয়বস্তু দেখাবে এবং লুকাবে৷

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

এই উদাহরণটি ডিফল্ট মার্কারকে সরিয়ে দেয় এবং একটি + যখন বিশদটি বন্ধ থাকে এবং একটি - যখন বিশদ খোলা থাকে তখন তৈরি করতে তৈরি সামগ্রী যোগ করে।

আপনি যদি ডিফল্টরূপে বিশদ ব্লক খোলা চান, খোলার <details> ট্যাগে open বৈশিষ্ট্য অন্তর্ভুক্ত করুন। আপনি প্রতিটি ডায়ালগের মধ্যে স্থান যোগ করতে পারেন এবং চেহারা উন্নত করতে জেনারেট করা বিষয়বস্তু দিয়ে তৈরি মার্কারটির ঘূর্ণন পরিবর্তন করতে পারেন:

কিভাবে ত্রুটি পরিচালনা করা হয়

আপনি যদি একটি <summary> অন্তর্ভুক্ত না করেন, তাহলে ব্রাউজার আপনার জন্য একটি তৈরি করবে: একটি মার্কার এবং "বিস্তারিত" শব্দ সহ। এই সারাংশটি একটি শ্যাডো রুটের অংশ, এবং তাই লেখক CSS সারাংশ শৈলী প্রয়োগ করা হবে না। দুর্ভাগ্যবশত, Safari কীবোর্ড ফোকাস অর্ডারে বিশদ বিবরণ অন্তর্ভুক্ত করে না।

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

HTMLDetailsElement ইন্টারফেস

সমস্ত HTML উপাদানগুলির মতো, HTMLDetailsElement HTMLElement থেকে সমস্ত বৈশিষ্ট্য, পদ্ধতি এবং ইভেন্টগুলিকে উত্তরাধিকারী করে এবং open ইনস্ট্যান্স প্রপার্টি এবং একটি toggle ইভেন্ট যোগ করে৷ HTMLDetailsElement.open প্রপার্টি হল একটি বুলিয়ান মান যা open HTML অ্যাট্রিবিউটকে প্রতিফলিত করে, যা নির্দেশ করে যে উপাদানের বিষয়বস্তু ( <summary> গণনা না করে) ব্যবহারকারীকে দেখানো হবে কিনা। যখন <details> উপাদান খোলা বা বন্ধ টগল করা হয় তখন টগল ইভেন্টটি চালু হয়। আপনি addEventListener() ব্যবহার করে এই ইভেন্টটি শুনতে পারেন।

ব্যবহারকারী অন্য কোনো বিশদ খোলে খোলা বিশদ বন্ধ করার জন্য যদি আপনি একটি স্ক্রিপ্ট লিখতে চান, তাহলে removeAttribute("open") ব্যবহার করে ওপেন অ্যাট্রিবিউটটি সরিয়ে দিন :

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

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

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

বিশদ এবং সারাংশ সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

<summary> কোন উপাদানের প্রথম সন্তান হতে হবে?

<p>

আবার চেষ্টা কর.

<details>

সঠিক!

<fieldset>

আবার চেষ্টা কর.