💊 📧 👊🏾 Selectivizr, IE8 और मौत की सफेद स्क्रीन ⛵️ 👄 ♾

Internet Explorer 8, इस नाम में एक साधारण वेब डेवलपर के लिए कितना कुछ है :-) एक ब्राउज़र, जो एक तरफ, अभी भी बाजार का एक महत्वपूर्ण हिस्सा रखता है (और इसलिए इसे अनदेखा नहीं किया जा सकता है), और दूसरी तरफ, भारी IE6 विरासत है व्यवहार की "सुविधाओं" के एक बड़े पैमाने के रूप में और कई नई और स्वादिष्ट तकनीकों के लिए समर्थन की कमी है जो आप वास्तव में उपयोग करना चाहते हैं। इस द्वंद्व ने कई तथाकथित लोगों को जन्म दिया है पॉलीफ़िल्स - जेएस स्क्रिप्ट जो कम से कम थोड़े से IE6-8 को आधुनिक ब्राउज़रों के स्तर तक खींचने के लिए डिज़ाइन की गई हैं। उनमें से एक पर इस लेख में चर्चा की जाएगी।

Selectivizr एक अद्भुत स्क्रिप्ट है जो जादुई रूप से (केवल एक पृष्ठ से कनेक्ट करके) IE6-8 में कई CSS3 चयनकर्ताओं के लिए समर्थन जोड़ता है, जो डेवलपर को CSS3 चयनकर्ताओं के उपयोग को बाहर करने के लिए कोड और साइट शैलियों में "बैसाखी" का एक गुच्छा जोड़ने से बचाता है। अपने काम के लिए, इसे एक कनेक्टेड जेएस फ्रेमवर्क (jQuery, Mootools, प्रोटोटाइप, Dojo और कई अन्य समर्थित हैं) की उपस्थिति की आवश्यकता होती है, लेकिन इनमें से एक फ्रेमवर्क आमतौर पर लगभग किसी भी आधुनिक साइट में मौजूद होता है।

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

परियोजनाओं में से एक शुरू करने से पहले, मुझे IE8 में साइट के अजीब व्यवहार के बारे में परीक्षक से एक बग्रेपोर्ट प्राप्त हुआ: जब मैंने URL दर्ज किया और साइट को लोड करने का प्रयास किया, तो ब्राउज़र ने एक रिक्त पृष्ठ प्रदर्शित किया, लेकिन पता बार में फिर से दर्ज करने के बाद, साइट सामान्य रूप से लोड, प्रदर्शित और काम की गई। इस मामले में, समस्या केवल IE8 (वास्तव में IE7, भी संबंधित है, लेकिन यह उस परियोजना में समर्थित नहीं थी), और IE9 का व्यवहार IE8 ऑपरेटिंग मोड में होना चाहिए। इसके अलावा, समस्या के आगे के अध्ययन से पता चला है कि:

ब्राउज़र ने सामान्य रूप से पृष्ठ को स्वयं और उससे जुड़ी सभी फाइलों को लोड किया
DOM को सामान्य रूप से बनाया और शुरू किया गया था
पृष्ठ तत्व अपनी जगह पर थे, इनपुट फ़ील्ड में डेटा को लिंक पर क्लिक करना, खोजना और दर्ज करना संभव था

... लेकिन पेज खुद पूरी तरह से खाली दिख रहा था। डेवलपर टूल में, यह स्पष्ट था कि <BODY> की शून्य ऊंचाई थी, लेकिन ऊंचाई को सेट और / या बदलने के प्रयास से कुछ भी नहीं हुआ।

इंटरनेट पर एक उत्तर की खोज से पता चला कि समस्या ज्ञात है ( 1 , 2 , 3 ), लेकिन प्रस्तावित समाधान काम नहीं करते हैं।

अतिरिक्त प्रयोगों से पता चला है कि समस्या सीएसएस में फोंट-फेस फोंट के सिलेविज़्र और कस्टम घोषणाओं के बीच संघर्ष में है। एक ही समय में, एक बारीकियों की खोज की गई थी जो अंततः हमें समस्या को कम करने की अनुमति देती है: एक संघर्ष केवल तब होता है यदि @ फ़ॉन्ट-चेहरा घोषणा बाहरी .css फ़ाइल में स्थित होती है। जब आप @ फॉन्ट-फेस डिक्लेरेशन को <style> टैग में रखते हैं, तो कोई संघर्ष नहीं होता है, कस्टम फोंट ठीक काम करते हैं और WSOD गायब हो जाता है।

मुझे उम्मीद है कि यह जानकारी उपयोगी है और WSOD के कारण की खोज करने और इसे हल करने के तरीके के लिए किसी को समय बचाता है।

Selectivizr, IE8 और मौत की सफेद स्क्रीन

More articles: