😞 📏 🛀🏿 रेगेक्स क्रॉसवर्ड: इंटरएक्टिव संस्करण 🤰🏽 💫 🍥

एक हालिया पोस्ट और उस पर टिप्पणी से प्रेरित होकर, मैंने एक समान इंटरैक्टिव संस्करण बनाने का फैसला किया।
कीबोर्ड नेविगेशन है, सक्रिय लाइनों को उजागर करता है, साथ ही एक लाइन के पत्राचार को एक नियमित अभिव्यक्ति के लिए एक संकेत है। सुविधा के लिए, चयनित सेल की युक्तियां क्षैतिज रूप से घूमती हैं।
मार्कअप - शुद्ध HTML + CSS3।
लगभग लोकप्रिय ब्राउज़रों के नवीनतम संस्करणों में काम करता है। IE9 में, माउस नेविगेशन छोटी गाड़ी है, FF और ओपेरा में प्रदर्शन समस्याएं हैं। और केवल क्रोम 100% ठीक है।
मैं अनुकूलन सुझावों के लिए आभारी रहूंगा।
लिंक - यहाँ । कार्यान्वयन विवरण - कटौती के तहत।

कार्यान्वयन

शायद कार्यान्वयन के बारे में सबसे दिलचस्प बात क्रॉसवर्ड पहेली ग्रिड है। सेल "ईमानदार लैंडफिल" के विचार को विकसित करके बनाया गया है। संक्षेप में, कई कंटेनरों को visibility:hidden के साथ बनाया जाता है visibility:hidden और overflow:hidden , जो अतिरिक्त सामग्री की कतरन प्रदान करता है। अंदर, visibility:visible के साथ सामग्री बनाई गई है visibility:visible । कंटेनरों के रोटेशन के साथ मिलकर इसका उपयोग करने से आप लगभग किसी भी उत्तल बहुभुज के आकार को अंतिम तत्व पर सेट कर सकते हैं।
कई पिक्सल की सीमाओं वाले इस बहुभुज को बनाने के लिए, समान घुमाव के साथ अतिरिक्त बाहरी कंटेनरों और आवश्यक सीमाओं को सामग्री में जोड़ा गया था। चित्र में सार दिखाया गया है। यहां, लाल बिंदीदार रेखा बाहरी "अदृश्य कंटेनरों" को इंगित करती है, और काली बिंदीदार रेखा आंतरिक कंटेनरों को सीमाओं के साथ इंगित करती है।

पहले एक लाल बॉर्डर के साथ 3 नेस्टेड तत्व होते हैं, उनके अंदर काले बॉर्डर के साथ नेस्टेड दृश्यमान कंटेनर भी होते हैं।

कोड

एचटीएमएल

 <span class="hexcell"> <span> <span> <span> <span> <span class="input"></span> </span> </span> </span> </span> </span>

सीएसएस

 .hexcell { display: inline-block; vertical-align: middle; text-align: center; width: 50px; height: 70px; overflow:hidden; visibility:hidden; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); } .hexcell span { position:relative; width:100%; height:100%; display:inline-block; overflow:hidden; visibility:hidden; vertical-align: middle; text-align: center; } .hexcell > span { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .hexcell > span > span { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .hexcell > span > span > span{ /* */ border: 1px solid #000000; height:68px; width:48px; visibility:visible; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); } .hexcell > span > span > span > span{ /* */ border: 1px solid #000000; height:68px; width:48px; top:-1px; left:-1px; visibility:visible; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .hexcell > span > span > span > span > span.input{ /*   */ border: 1px solid #000000; height:68px; width:48px; top:-1px; left:-1px; position:relative; visibility:visible; font-size:34px; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }

एक ग्रिड में कोशिकाओं को सही ढंग से विलय करने के लिए, निम्नलिखित किया जाता है:

कोशिकाओं को एक कंटेनर में लपेटा जाता है जिसकी सामग्री केंद्रित होती है
छद्म सीमा-पतन का उपयोग किया जाता है: अंतिम को छोड़कर सभी कोशिकाएं छोटी चौड़ाई में सेट होती हैं और अंतिम तत्व (सामग्री कंटेनर) को सही सीमा से हटा दिया जाता है
टांके को मिलाने के लिए नेगेटिव margin-top जोड़ा जाता है

इस संयोजन में, वांछित शैलियों के साथ कई आसन्न कोशिकाओं को एक सामान्य ग्रिड में व्यवस्थित किया जाता है।
सीएसएस के साथ हेडर की व्यवस्था करने के लिए, उन्हें संबंधित सेल के सामने एक पूर्ण स्थिति और सही औचित्य के साथ कंटेनर में जोड़ा जाता है। इस प्रकार, स्ट्रिंग के आकार के लिए बंधन गायब हो जाता है और यह सीएसएस transform माध्यम से कंटेनर को सही ढंग से स्थिति देने के लिए पर्याप्त है।
बाकी सब कुछ अलौकिक नहीं है, इसलिए मैं एक पोस्ट में इसका वर्णन नहीं करूंगा। जो लोग चाहते हैं वे स्रोत में सब कुछ पा सकते हैं।

संचालनीयता

अलग सवाल कामकाज का कारण बनते हैं। क्रॉसवर्ड केवल वेबकिट के तहत काम करने की गारंटी है (विकास नवीनतम क्रोम संस्करण के तहत किया गया था)। यह फ़ायरफ़ॉक्स और ओपेरा में भी काम करता है, लेकिन ध्यान देने योग्य ब्रेक के साथ किसी कारण के लिए, विशेष रूप से ओपेरा में। जैसा कि एक ही ओपेरा में प्रोफाइलर ने दिखाया है, ज्यादातर समय रेडरिंग पर खर्च किया जाता है, यहां तक कि विकलांगों के साथ भी। IE10 के तहत परीक्षण नहीं किया गया।
युपीडी। यह IE10 में ठीक काम करता है, धन्यवाद alexxxst ।
9 वीं के तहत हेडर्स की स्थिति के साथ एक बग था (क्षैतिज वाले बाईं ओर चले गए)। जैसा कि मैं इसे समझता हूं, यह इसकी कुछ बारीकियां हैं। position:absolute साथ लाइन में पहला तत्व position:absolute स्पष्ट संकेत की अनुपस्थिति के बावजूद, बाएं किनारे पर position:absolute चलता है। display:inline-block माध्यम से फिक्स्ड display:inline-block पंक्ति कंटेनर पर display:inline-block ।
इसके अलावा, मुड़ने के साथ, पाठ टेढ़ा है। सामान्य तौर पर, अनुभव से पता चला है कि ट्रांसफ़ॉर्मिंग ग्राफिक्स के साथ-साथ ट्रांसफ़ॉर्म पत्तियों को वांछित होना चाहिए।
UPD2। स्रोत कोड

रेगेक्स क्रॉसवर्ड: इंटरएक्टिव संस्करण

कार्यान्वयन

संचालनीयता

More articles: