कॉन्टेंट के सेक्शन को छोटा करना, एक आम यूज़र इंटरफ़ेस (यूआई) पैटर्न है. इसे कभी-कभी अकॉर्डियन भी कहा जाता है. हालांकि, छोटे किए गए सेक्शन में छिपे कॉन्टेंट को, 'पेज में ढूंढें' सुविधा की मदद से नहीं खोजा जा सकता. साथ ही, छोटे किए गए क्षेत्रों में टेक्स्ट फ़्रैगमेंट को लिंक नहीं किया जा सकता.
hidden=until-found एचटीएमएल एट्रिब्यूट और 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, उस display:none प्रॉपर्टी के बजाय content-visibility:hidden सीएसएस प्रॉपर्टी लागू करता है जिस पर सामान्य तौर पर न दिखने वाला एट्रिब्यूट लागू होता है. कॉन्टेंट बंद होने पर उसे खोजना ज़रूरी होता है, लेकिन इसके खराब असर भी होते हैं:
- कुछ लेआउट एपीआई जैसे
getBoundingClientRect, यह रिपोर्ट करेंगे किhidden=until-foundएलिमेंट में छिपा हुआ कॉन्टेंट, जगह लेता है और पेज में उस कॉन्टेंट की पोज़िशन होता है. hidden=until-foundएलिमेंट के चाइल्ड नोड रेंडर नहीं किए जाएंगे. हालांकि,hidden=until-foundएलिमेंट में अब भी एक बॉक्स होगा. इसका मतलब है कि बॉर्डर और साफ़ साइज़ जैसी सीएसएस प्रॉपर्टी अब भी रेंडरिंग पर असर डालेंगे.
उदाहरण के लिए, नीचे दिया गया डेमो उस एलिमेंट में मार्जिन, बॉर्डर, और पैडिंग जोड़ देता है जिस पर hidden=until-found लागू किया गया है. छिपा हुआ कॉन्टेंट दिखने की जगह पर एक बॉक्स होता है, जिसमें स्लेटी रंग का बॉर्डर होता है. इसके बाद, छिपा हुआ कॉन्टेंट सार्वजनिक करने पर, यह अपने-आप भर जाता है. यह छिपे हुए एलिमेंट का बॉक्स है.
इस समस्या से बचने के लिए, बॉर्डर को hidden=until-found वाले कंटेनर के अंदर नेस्ट किए गए एलिमेंट में जोड़ें.
हीरो इमेज, थॉमस बोरमैन्स की.