কন্টেন্ট বিভাগগুলিকে ভেঙে ফেলা, কখনও কখনও অ্যাকর্ডিয়ন হিসাবে বর্ণনা করা হয়, এটি একটি সাধারণ UI প্যাটার্ন৷ যাইহোক, সঙ্কুচিত বিভাগে লুকানো বিষয়বস্তু একটি অনুসন্ধান-ইন-পৃষ্ঠা অনুসন্ধান ব্যবহার করে অনুসন্ধান করা অসম্ভব হয়ে পড়ে। এছাড়াও, ধসে পড়া অঞ্চলের মধ্যে পাঠ্য খণ্ডের সাথে লিঙ্ক করা সম্ভব নয়।
hidden=until-found HTML এট্রিবিউট এবং beforematch ইভেন্ট এই সমস্যার সমাধান করতে পারে। আপনার লুকানো বিষয়বস্তুর জন্য কন্টেইনারে hidden=until-found যোগ করে, আপনি ব্রাউজারের পক্ষে সেই লুকানো অঞ্চলে পাঠ্য অনুসন্ধান করা সম্ভব করে তোলেন এবং যদি একটি মিল পাওয়া যায় তবে বিভাগটি প্রকাশ করুন৷
এই বৈশিষ্ট্যগুলি Chrome 102 থেকে পাওয়া যায়, তাই আসুন সেগুলি কীভাবে কাজ করে তা দেখে নেওয়া যাক৷
কিভাবে এটি ব্যবহার করতে হবে
যদি আপনার ওয়েবসাইটে ইতিমধ্যেই সংকোচনযোগ্য বিভাগ থাকে যা আপনি অনুসন্ধানযোগ্য করতে চান, hidden=until-found বৈশিষ্ট্য দিয়ে বিভাগটিকে লুকানো স্টাইলগুলি প্রতিস্থাপন করুন। যদি আপনার পৃষ্ঠায় অন্য একটি অবস্থা থাকে যা আপনার বিভাগটি প্রকাশ করা হয় কিনা তার সাথে সিঙ্কে রাখা দরকার, তাহলে একটি beforematch ইভেন্ট লিসেনার যোগ করুন যা ব্রাউজার দ্বারা উপাদানটি প্রকাশ করার ঠিক আগে hidden=until-found এলিমেন্টে ফায়ার করা হবে। .
সতর্কতা
একটি সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতার জন্য, hidden=until-found বিষয়বস্তু ফাইন্ড-ইন-পৃষ্ঠা ব্যবহার না করেই প্রকাশযোগ্য হওয়া উচিত। সমস্ত ব্যবহারকারী ফাইন্ড-ইন-পৃষ্ঠা ব্যবহার করবেন না এবং যে ব্রাউজারগুলি hidden=until-found সমর্থন করে না তারা ফাইন্ড-ইন-পেজ প্রকাশ না করেই লুকানো বিষয়বস্তুর আসল অভিজ্ঞতা পাবে।
আপনি যদি নিশ্চিত করতে চান যে আপনার লুকানো বিষয়বস্তু এমন ব্রাউজারগুলিতে অনুসন্ধানযোগ্য যা hidden=until-found সমর্থন করে না, আপনি সর্বদা সেই ব্রাউজারগুলিতে লুকানো সামগ্রী প্রসারিত করতে পারেন৷ beforematch ইভেন্ট হ্যান্ডলারের উপস্থিতি পরীক্ষা করে বৈশিষ্ট্য সনাক্তকরণ করা যেতে পারে:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found প্রযোজ্য content-visibility:hidden CSS বৈশিষ্ট্য display:none যা নিয়মিত লুকানো বৈশিষ্ট্য প্রযোজ্য। এটি বন্ধ থাকা অবস্থায় বিষয়বস্তু অনুসন্ধান করার জন্য এটি প্রয়োজন, তবে এর পার্শ্বপ্রতিক্রিয়াও রয়েছে:
- কিছু লেআউট API যেমন
getBoundingClientRectরিপোর্ট করবে যেhidden=until-foundএলিমেন্টের ভিতরে লুকানো বিষয়বস্তু স্থান নেয় এবং পৃষ্ঠায় অবস্থান করে। -
hidden=until-foundএলিমেন্টের চাইল্ড নোড রেন্ডার করা হবে না, কিন্তুhidden=until-foundএলিমেন্টের নিজেই একটি বক্স থাকবে। এর মানে হল যে CSS বৈশিষ্ট্য যেমন সীমানা এবং স্পষ্ট আকার এখনও রেন্ডারিংকে প্রভাবিত করবে।
এর উদাহরণ হিসাবে, নিম্নলিখিত ডেমোটি hidden=until-found প্রয়োগ করা উপাদানটিতে মার্জিন, সীমানা এবং প্যাডিং যোগ করে। যে জায়গায় লুকানো বিষয়বস্তু প্রদর্শিত হবে সেখানে একটি ধূসর সীমানা সহ একটি বাক্স রয়েছে, যা প্রকাশের পরে লুকানো সামগ্রী দিয়ে পূর্ণ হয়। এটি লুকানো উপাদানের বাক্স।
এই সমস্যাটি এড়াতে, পাত্রের ভিতরে থাকা একটি উপাদানের সাথে সীমানা যোগ করুন যা hidden=until-found আছে।