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