🤪 🌼 💲 स्पॉयलर सीएसएस ... 🔉 🤚🏾 🍐

पूर्व छुट्टियों पर, एक मिनट बाहर खड़ा था, मैं बचना चाहता था - मनोरंजक विचारों की दुनिया में उतरने के लिए, छुट्टी की चिंताओं से दूर जा रहा था। नतीजतन, - विचार: एचटीएमएल 5 के आगमन की प्रतीक्षा किए बिना, - सीएसएस और एचटीएमएल का उपयोग करके "क्लिक" करके एक स्पॉइलर बनाने के लिए।

इससे पहले इंटरनेट पर, छद्म वर्गों के माध्यम से इसे लागू करने का प्रयास किया गया था, मुख्य रूप से: फोकस के माध्यम से, जो कंटेनर के आत्म-छिपने के कारण, ध्यान के नुकसान के मामले में।
इस निर्माण का आधार है : जाँच की गई

न्यूनतम विचार इस प्रकार है:

/* CSS */ .spoiler > input + .box { display: none; } .spoiler > input:checked + .box { display: block; }

 <!--// HTML //--> <div class="spoiler"> <input type="checkbox" > <div class="box">    . </div> </div>

जैसा कि आप देख सकते हैं, हमें IE9 से शुरू होने वाला क्रॉस-ब्राउज़र कोड मिला, जहां पहले से ही एक "चेक किया हुआ" छद्म वर्ग है और अन्य ब्राउज़रों के वास्तविक संस्करणों के साथ समाप्त होता है। डिजाइन के अनुसार, यह एक "शुद्ध" html-css कार्यान्वयन है।

IE6-8 के दायरे का विस्तार करने की कोशिश करते समय, (यहाँ, IE के लिए हमेशा की तरह, "कार्यान्वयन की शुद्धता" खो जाती है), और हम IE के लिए छद्म वर्गों की Google लाइब्रेरी को जोड़ते हैं:

 <!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->

कट के तहत, "क्रॉस-ब्राउज़र संगतता के साथ नृत्य" के लिए अंतिम कोड XP, Win7-8 * में परीक्षण किया गया था

 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>C  css</title> <style> .spoiler > input + .box > blockquote{ display: none; } .spoiler > input:checked + .box > blockquote { display: block; } .spoiler > input[type="checkbox"] { cursor: pointer; border-color:transparent!important; border-style:none!important; background:transparent none!important; position:relative;z-index:1; margin:-10px 0 -30px -230px; } .spoiler > input[type="checkbox"]:focus { outline:none; /*    8  "" */ } .spoiler span.close, .spoiler span.open{ padding-left:22px; color: #00f!important; text-decoration: underline; } .spoiler > input + .box > span.close { display: none; } .spoiler > input:checked + .box > span.close { background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat; display: inline; } .spoiler > input:checked + .box > span.open { display: none; } .spoiler > input + .box > span.open { background: url(http://st0.bbcorp.ru/img/plus.png) 4px 60% no-repeat; display: inline; } .spoiler blockquote, .spoiler{ padding:1em; border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; } .spoiler { overflow-x:hidden; box-shadow: 0px 3px 8px #808080; border:#E5E5E5 solid 2px; -webkit-box-shadow:0px 3px 8px #808080; -khtml-box-shadow:0px 3px 8px #808080; -moz-box-shadow:0px 3px 8px #808080; -ms-box-shadow:0px 3px 8px #808080; } .spoiler blockquote { margin-top:12px; min-height: 23px; border:#CDCDCD 2px dashed; } </style> <!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]--> </head> <body> <div id="wrap" style="padding:200px 40px;width:70%;margin:0 auto;background-color:#fff;height:100%"> <div class="spoiler"> <!--*  tabindex="-1"       "tab" --> <input style="width:360px;height:45px;" type="checkbox" tabindex="-1" > <div class="box"> <span class=close></span><span class=open></span> <blockquote class="Untext"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </blockquote> </div> </div> </div> </body> </html>

विपक्ष:

IE8 में - ~~फ़ोकस के साथ चेक-बॉक्स का धराशायी स्ट्रोक है;~~ // फिक्स्ड (संकेत से संकेतित )
IE6-7 में - पैनल "विंटेज" को बिगाड़ने वाले के बाईं ओर बढ़ाया जाता है; (लेकिन हमने मूल योजनाओं में IE के डेटा का समर्थन करने का कार्य स्वयं निर्धारित नहीं किया है।

डेमो

पुनश्च: कोड आपको स्पॉइलर कंटेंट को देखने की अनुमति देता है जब जावा-स्क्रिप्ट को अक्षम किया जाता है, जो कि पुराने मोबाइल फोन, एनामाइज़र या हार्ड-ट्यून फायरवॉल से सर्फिंग करते समय मांग में होता है।

मैं ऑक्टेव को javascript.ru फोरम और धन्यवाद से धन्यवाद देना चाहता हूं, जिसके बिना इस विचार को साकार नहीं किया जा सकता था।

स्पॉयलर सीएसएस ...

न्यूनतम विचार इस प्रकार है:

विपक्ष:

डेमो

More articles: