HTML5 कैसे उपयोग करें <विवरण> और <सारांश> टैग
HTML5 में उपलब्ध कई नए टैगों में से, विनिर्देशों (जैसे: आकृति, figcaption, तथा अलग), विस्तार तथा सारांश मेरी राय में टैग, सबसे उपयोगी हैं। इन नए टैगों के साथ आप कुछ लंबी सामग्री छिपा सकते हैं और केवल सारांश प्रदर्शित कर सकते हैं.
हम वास्तव में अक्सर इस प्रभाव को देखते हैं, लेकिन उनमें से ज्यादातर अभी भी जावास्क्रिप्ट या उसके भाई: jQuery पर बनाए गए हैं, जो ज्यादातर लोग नहीं समझते हैं। अब, इन नए तत्वों के साथ - विवरण तथा सारांश - चीजें आसान हो जाएंगी.
तो, आइए देखें कि वास्तविक स्थिति में टैग कैसे काम करते हैं.
इस डेमो में हम एक उत्पाद विवरण को संक्षेप में प्रस्तुत करने जा रहे हैं। पहले एक 'विवरण' टैग बनाते हैं और फिर उसके अंदर 'सारांश' टैग के साथ सभी सामग्री डालते हैं, जैसे नीचे दिए गए उदाहरण में:
मैकबुक प्रो विशिष्टता
- 13.3 इंच एलईडी-बैकलिट चमकदार वाइडस्क्रीन डिस्प्ले एज-टू-एज, निर्बाध ग्लास (1280 x 800-पिक्सेल रिज़ॉल्यूशन) के साथ.
- 2.4 GHz इंटेल कोर i5 डुअल-कोर प्रोसेसर 3 एमबी के साथ उत्कृष्ट मल्टीटास्किंग के लिए L3 कैश साझा किया.
- इंटेल एचडी ग्राफिक्स 3000 DDR3 के 384 MB के साथ SDRAM ने मुख्य मेमोरी के साथ साझा किया.
- 500 जीबी सीरियल एटीए हार्ड ड्राइव (5400 RPM)
- 4 जीबी रैम स्थापित (1333 मेगाहर्ट्ज DDR3; 8 जीबी तक का समर्थन करता है)
उस उदाहरण में, मैंने मैकबुक प्रो विनिर्देशन विवरण जोड़ा है, और अब देखते हैं कि ब्राउज़र उन टैगों को कैसे प्रस्तुत करता है.
मैंने उपर्युक्त डेमो को आपके लिए अधिक समझदार बनाने के लिए विवरण के ऊपर एक शीर्षक और उत्पाद का अधिक विवरण भी जोड़ा है। तो तुम क्या सोचते हो? यह काफी आसान है, सही है?
ब्राउज़र का समर्थन करता है
हालाँकि, इस टैग को अपनी पूरी वेबसाइट पर लागू करने से पहले, यह ध्यान दिया जाना चाहिए कि विवरण और सारांश टैग वर्तमान में केवल 12 या इसके बाद के संस्करण पर समर्थित है.
यहां तक कि नवीनतम फ़ायरफ़ॉक्स अभी तक उनका समर्थन नहीं करता है.
इसलिए, यदि आप इस टैग को लागू करना चाहते हैं, तो आपको असमर्थित ब्राउज़रों के लिए फ़ॉलबैक फ़ंक्शन को शामिल करना होगा। अच्छी खबर यह है, यह सरल है; आप इस विवरण पॉलीफ़िल का उपयोग कर सकते हैं, जो पुराने ब्राउज़रों के लिए टैग कार्यक्षमता को स्वचालित रूप से दोहराएगा.
इस फ़ाइल को डाउनलोड करें और इसे jQuery के साथ HTML डॉक्यूमेंट के साथ लिंक करें (1.7+ न्यूनतम पर) और सुनिश्चित करें कि आप पॉलीफिल को बॉडी टैग से पहले रखें.
और हेड टैग के अंदर, IE5 और उससे पहले के HTML5shiv को शामिल करने के लिए निम्नलिखित सशर्त टैग डालें, अन्यथा इंटरनेट एक्सप्लोरर इन नए टैग को नहीं पहचान सकेगा.
अब देखते हैं कि यह Internet Explorer में कैसे निकलता है:
और यह अब इंटरनेट एक्सप्लोरर पर भी काम करता है.
- डेमो
- स्रोत डाउनलोड करें
निष्कर्ष
जावास्क्रिप्ट या jQuery के साथ इस तरह के छिपाने और दिखाने के प्रभाव वास्तव में अपेक्षाकृत आसान है, लेकिन यह मूल रूप से ब्राउज़र से समर्थित है निश्चित रूप से कई लोगों के लिए एक बहुत आसान समाधान है। आप इसे जावास्क्रिप्ट में करना चाहते हैं या HTML5 में, यह आपका निर्णय है। पढ़ने के लिए धन्यवाद, और मुझे आशा है कि आपने इसका आनंद लिया.
