🗾 💅🏿 🔊 क्रॉस-ब्राउज़र छद्म श्रेणी की समस्याएं: सक्रिय 🤘 🌵 🤷🏾

वेब पेज लेआउट प्रौद्योगिकियों में कई नवाचारों के आगमन के साथ, डेवलपर्स के पास आंशिक रूप से जावास्क्रिप्ट को बदलने का अवसर है, अधिक उत्पादकता और अपने पोर्टल्स के इंटरफ़ेस की एक्स्टेंसिबिलिटी के लिए HTML / CSS का उपयोग करते हुए।
क्रॉस-ब्राउज़र संगतता और नई सीएसएस संपत्तियों के अलग-अलग कार्यान्वयन के साथ समस्याओं के अलावा, एक अक्सर उन जगहों पर अन्य समस्याओं का सामना करता है जहां ऐसा लगेगा कि सब कुछ लंबे समय तक बस गया है और हर जगह समान काम करता है। यह ठीक उसी तरह की समस्या है जिसका सामना मुझे तब करना पड़ा जब सीएसएस संक्रमणों को लागू करने के साथ: सक्रिय छद्म वर्ग। इस तथ्य के कारण कि प्रलेखन राज्य में एक तत्व के माता-पिता के व्यवहार का वर्णन नहीं करता है: सक्रिय, यह व्यवहार अलग-अलग ब्राउज़र इंजनों में अलग-अलग तरीके से लागू किया जाता है।

कार्य

सक्रिय तत्व (माता-पिता) के वंश को क्रॉस-डेकोरेट करें, किसी भी वंश पर क्लिक करके माता-पिता को सक्रिय करने की क्षमता ( मेरा उदाहरण jsfiddle पर है , और dabblet पर )।

प्रोटोटाइप

विभिन्न ब्राउज़र में व्यवहार की संभावित कठिनाइयों और विसंगतियों को देखते हुए, हम क्रॉस-ब्राउज़र सत्यापन के लिए एक कार्यशील प्रोटोटाइप बनाते हैं।

span { display: block; position: relative; width: 60px; height: 60px; background: red; } b { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; background: blue; } i { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: green; }

 <span><b><i></i></b></span>

एक गोलाकार वैक्यूम में

विनिर्देश बताता है कि सक्रिय तत्व (लगभग। Div: सक्रिय) वह है जिस पर क्लिक किया जाता है, लेकिन सक्रिय राज्य को विरासत में कैसे मिला, इसके बारे में कुछ नहीं कहा जाता है। हम एक प्रयोग करते हैं, और देखते हैं कि वास्तविक दुनिया में सक्रिय तत्व कैसे व्यवहार करते हैं, Jsfiddle ( डब्बल पर) पर एक प्रयोग के साथ एक पृष्ठ का लिंक।

पहली समस्याएं

पहले मामले में, वेबकिट, एफएफ 3.6+ और ओपेरा में, हम देखते हैं कि सक्रिय राज्य को सभी माता-पिता द्वारा विरासत में मिला है, <html> तक, लेकिन जब 1 से अधिक सक्रिय तत्व को ट्रैक करना आवश्यक हो, तो ओपेरा को अब सामना नहीं करना पड़ता है, और केवल पहला माता-पिता ही सक्रिय स्थिति को विरासत में प्राप्त करता है। डोम छद्म वर्ग से सजाया गया: सक्रिय (अवधि: सक्रिय)

 html:active { background: #ededed; } /* Light gray */ .test1-2 span:active { background: yellow; }

 <div class="test1-2"><span><b><i></i></b></span></div>

इंटर्न एक्सप्लोरर में, सक्रिय राज्य को विरासत में नहीं मिला है, और केवल तब काम करता है जब आप इसके साथ सजाए गए तत्व पर क्लिक करते हैं: छद्म वर्ग (प्रयोग में यह <span>) है, और 7 वें से पहले के संस्करणों में, समावेशी: सक्रिय केवल लिंक के लिए काम करता है।

वह सब नहीं है

दूसरे मामले में, मैंने सक्रिय तत्व (स्पैन: सक्रिय बी) से कैस्केड का उपयोग किया, जैसा कि हम उदाहरण में देखते हैं, वेबकिट और एफएफ, सब कुछ उम्मीद के मुताबिक काम करता है, छद्म वर्ग शैली से डोम के नीचे किसी भी तत्व पर क्लिक करके, वांछित तत्व को उजागर किया जाता है, कैस्केड के माध्यम से परिभाषित किया जाता है। । ओपेरा इस मामले में IE की तरह व्यवहार करना शुरू कर देता है, सक्रिय राज्य को विरासत में लेना बंद कर देता है और केवल उस तत्व के साथ काम करता है जो सीधे क्लिक किया जाता है।

 html:active { background: #ededed; } /* Light gray */ .test2 span:active b { background: yellow; }

 <div class="test2"><span><b><i></i></b></span></div>

युद्ध के लिए हथियार

तीसरे उदाहरण में, ओपेरा को सक्रिय स्थिति में ले जाने के लिए मूल तत्व के आधार पर सक्रिय अवस्था में ले जाया जाता है, जो कि एक पूर्णतया तैनात तत्व (<em class = "pseudo">) का उपयोग करके, सक्रिय छद्म वर्ग के आधार पर सजाया गया है। एफएफ और वेबकिट अभी भी यहां अनुमानित रूप से काम करते हैं, लेकिन IE8 + अभी भी व्यापार से बाहर है।

 html:active { background: #ededed; } /* Light gray */ .test3 span:active b { background: yellow; } em.pseudo { content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

 <div class="test3"><span><b><i></i></b><em class="pseudo"></em></span></div>

IE को आवश्यक रूप से काम करने के लिए, और कोड को थोड़ा सुधारना, निरपेक्ष तत्व को छद्म तत्व से बदलना। जैसा कि यह निकला, IE में सक्रिय अवस्था अभी भी विरासत में मिली है, लेकिन केवल छद्म तत्वों पर :: पहले, :: बाद में। दुर्भाग्य से, IE8 में, छद्म तत्व जेड-इंडेक्स को अनदेखा करते हैं, जो कि ज्यादातर मामलों में काम नहीं कर सकते हैं (जैसा कि मेरा), लेकिन IE9 + में सब कुछ ठीक है।

 html:active { background: #ededed; } /* Light gray */ .test4 span:active b { background: yellow; } .test4 span:after { content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

 <div class="test4"><span><b><i></i></b></span></div>

मिशन पूरा हो गया है, हम घर लौट आए

नतीजतन, हमने सक्रिय राज्य क्रॉस-ब्राउज़र (IE9 +, FF 3.6+, ओपेरा 9.64+, क्रोम, सफारी और अन्य वेबकिट्स) के सभी तत्वों को एक ही बनाया और अब हम आसानी से पोर्टल पर कार्यक्षमता को लागू कर सकते हैं।
चूंकि कार्यक्षमता में एक विशुद्ध रूप से सजावटी भूमिका है, इसलिए हमने IE6-8 को छोड़ने का फैसला किया, उन्हें नरम कमबैक के साथ छोड़ दिया, और शेष सीएसएस में करें।

उपसंहार।

बिना कैस्केड के

IE8 और ओपेरा में समस्या को हल करना आसान है कैस्केड को छोड़ कर, जो मेरे मामले में फिट नहीं था, और कार्यक्षमता की संवेदनशीलता को कम कर दिया, इसलिए मैंने IE8 में वास्तविक दुनिया की सुंदरता को छोड़ने का फैसला किया।

कार्य का स्पष्टीकरण

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

टचपैड

जब आप टचपैड पर क्लिक करते हैं, तो सक्रिय रूप से सक्रिय स्थिति में माउस क्लिक के विपरीत तत्व कम होता है।

क्रॉस-ब्राउज़र छद्म श्रेणी की समस्याएं: सक्रिय