कॉन्टेंट सेक्शन को छोटा करने की सुविधा, यूज़र इंटरफ़ेस (यूआई) का एक सामान्य पैटर्न है. इसे कभी-कभी अकॉर्डियन भी कहा जाता है. हालांकि, पेज में खोजने की सुविधा का इस्तेमाल करके, छोटा किए गए सेक्शन में मौजूद कॉन्टेंट को खोजना मुश्किल हो जाता है. साथ ही, छोटा किए गए क्षेत्रों में टेक्स्ट फ़्रैगमेंट से लिंक नहीं किया जा सकता.
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 है.