सब कुछ विस्तार से

आपका दिन शुभ हो!

परिचय

अपनी शर्म के लिए, मैं हाल ही में विवरण तत्व के साथ मिला, जो अनिवार्य रूप से किसी चीज़ के बारे में जानकारी प्रस्तुत करने के लिए एक विजेट है। मेरे पास जो जानकारी है, उसके अनुसार इसका समर्थन कम है, क्योंकि यह वर्तमान में केवल Google Chrome में समर्थित है, जो 12.0 से शुरू होता है, और Android ब्राउज़र में भी, 4.0 संस्करण से शुरू होता है। खैर, आइए देखें कि यह किस तरह का जानवर है।

सरलतम प्रतिनिधित्व

इस तत्व का उपयोग करने वाली जानकारी का सबसे सरल प्रतिनिधित्व इस प्रकार होगा:

<details> <summary>  HTML5?</summary> </details> 

और ब्राउज़र में ऐसा दिखता है:

चल रहा है

चूंकि हमारे पास एक प्रश्न है, तो इसका उत्तर दें और एचटीएमएल 5 लोगो संलग्न करें। कुछ भी सरल नहीं है, क्योंकि यह उसी तरह से किया जाता है जैसे कि नियमित टाइपसेटिंग - यानी। हम एक div बनाते हैं, और हम उसमें शीर्षासन और पैराग्राफ जोड़ते हैं। इस तरह:

 <details> <summary>  HTML5?</summary> <img src="./html5.jpg" alt="HTML5" /> <div> <h3>HTML5 - ...</h3> <p>        ,    ,   .    HTML- (   1990       HTML4,   1997 )          2011 .      ,      ,                (-,    ..). HTML5      HTML 4,   XHTML 1,   DOM2HTML ( JavaScript).</p> </div> </details> 

हम अपना उदाहरण खोलते हैं, तीर पर क्लिक करें और ... वोइला!

और अभी तक

लेकिन किसी तरह यह सब पेशेवर नहीं है। हमने शैलियों को लागू नहीं किया। और एक सुंदर प्रदर्शन के लिए, यह काफी आसान है। आइये इसे आजमाते हैं।

 body { font-family: sans-serif, arial; } details { overflow: hidden; background: #e3e3e3; margin-bottom: 10px; display: block; } details summary { cursor: pointer; padding: 10px; } details div { float: left; width: 65%; } details div h3 { margin-top: 0px; } details img { float: left; width: 200px; padding: 0px 30px 10px 10px; } 

साधारण से बाहर कुछ भी नहीं। हम इंडेंटेशन सेट करते हैं, पृष्ठभूमि को थोड़ा पेंट करते हैं, कर्सर को बदलते हैं - सब कुछ, हमेशा की तरह। हालांकि, ईमानदार होने के लिए, मुझे शायद ही कभी कर्सर के साथ काम करना पड़ा।
खैर, यह परिणाम को देखने का समय है। यहाँ यह है:

अंत में

मैं यह नोट करना चाहूंगा कि हम अपने तीर की शैली भी बदल सकते हैं। चलो उसे लाल करो। यह कैसे करना है? बहुत सरल है। हमें केवल -webkit-details-मार्कर छद्म वर्ग का उपयोग करने की आवश्यकता है। इस प्रकार है:

 details summary::-webkit-details-marker { color: red; font-size: 20px; } 

अब यह इस तरह दिखता है:

निष्कर्ष

यह वास्तव में वह सब है जो मैं आपको आज के बारे में बताना चाहता था। इस तथ्य के बावजूद कि विवरण तत्व का समर्थन वर्तमान में खराब है, मुझे लगता है कि ब्राउज़र जल्द ही पकड़ लेंगे और पूरी तरह से इसका समर्थन करेंगे।

जल्द मिलते हैं!