इंटरनेट एक्सप्लोरर 7-9: अधिकतम CSS3, HTML5 समर्थन के लिए उपकरण चुनना

आपने शायद पहले से ही CSS3 पाई, Selectivizr, HTML5 Boilerplate, CSS3 मीडिया प्रश्नों आदि के बारे में सुना है। यह इन सभी उपकरणों को एक साथ उपयोग करने के तरीके के बारे में होगा: तथ्य यह है कि उनके बीच संघर्षों को बार-बार देखा गया है। ठीक है, अगर आपको यह समझ में नहीं आता है कि आपको HTML 5 और CSS 3 की आवश्यकता क्यों है, तो मैं इन तकनीकों को लागू नहीं करूंगा; मैं सिर्फ इतना कहूंगा कि वे लेआउट समय को कम कर सकते हैं (हालांकि यह एकमात्र प्लस नहीं है)।

हमें क्या चाहिए:

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

- मॉर्डनिज़्र - आपको IE के लिए अर्थ HTML 5 टैग का उपयोग करने की अनुमति देता है, और टैग के लिए सुविधाजनक कक्षाएं भी जोड़ता है; उदाहरण के लिए, इंटरनेट एक्सप्लोरर 7 के लिए .ie7 वर्ग को html में जोड़ा जाएगा, जिसे हम तब केवल इस ब्राउज़र में html तत्व के प्रदर्शन को कॉन्फ़िगर करने के लिए उपयोग कर सकते हैं (आखिरकार, केवल IE के एक विशिष्ट संस्करण के लिए कुछ तत्वों को ट्वीक करना आवश्यक है)।

CSS3 के चयनकर्ताओं के लिए Selectivizr और IE9.js - कुछ मामलों में एचटीएमएल तत्वों का चयन करने के लिए HTML तत्वों का चयन करना अधिक सुविधाजनक और तेज़ है जैसे: nth-child (2) या: nth-last-of-type-1 (1) रजिस्टर कक्षाओं की तुलना में html, और उसके वर्ग द्वारा एक तत्व का चयन करें।

- CSS3 के मीडिया प्रश्न - उत्तरदायी डिजाइन के लिए (एक सुविधाजनक तकनीक जो आपको स्क्रीन रिज़ॉल्यूशन के आधार पर तत्वों के प्रदर्शन को बदलने की अनुमति देती है, और इस प्रकार हम मोबाइल उपकरणों के लिए साइट बना सकते हैं)

- CSS3 पाई छाया, गोल कोनों, ढाल, आदि बनाने के लिए एक शानदार चीज है।

- boxsizing.htc - IE7 में 'बॉर्डर-बॉक्स' का समर्थन करने के लिए उपयोग करें। यह क्यों है? जब हम तत्वों के लिए पैडिंग सेट करते हैं, तो सामान्य स्थिति में एक तत्व की चौड़ाई (ऊंचाई) भी बढ़ जाती है, अर्थात, गद्दी के अलावा, आपको तत्व की चौड़ाई (ऊंचाई) की निगरानी भी करनी होगी। इस टूल से, हम हर बार चौड़ाई (ऊंचाई) की गणना किए बिना सुरक्षित रूप से पैडिंग का संकेत दे सकते हैं। एक सरल उदाहरण: एक इनपुट तत्व बनाएं और इसके लिए पैडिंग सेट करें - चौड़ाई (या ऊंचाई) बढ़ जाएगी, जो अक्सर अतिरिक्त काम को जोड़ती है।

इसलिए, यदि आप IE 7-9 ब्राउज़रों में CSS 3 और HTML 5 का समर्थन करने के लिए एक साथ इन उपकरणों का उपयोग करने की योजना बना रहे हैं, तो यहां कुछ समस्याएं हैं जो आप उम्मीद कर सकते हैं:

• Selectivizr
  
  • स्थानीय निर्देशिका में काम नहीं करता है, लेकिन सर्वर पर काम करता है
  • jQuery के साथ काम नहीं कर रहा है, लेकिन MooTools के साथ काम कर रहा है
  • फार्म का निर्माण: पिछले बच्चे: IE9.js के बिना काम नहीं करते
• IE9.js
  • फार्म का निर्माण: अंतिम बच्चे: Selectivizr के बिना काम नहीं करते
• CSS3 पाई
  • PIE.htc Selectivizr के साथ काम नहीं करता है
  • PIE.htc IE9.js के साथ काम नहीं करता है
  • PIE.htc उन तत्वों के लिए काम नहीं करता है जो boxsizing.htc का उपयोग करते हैं

सिरदर्द से छुटकारा पाने के लिए, पहले से ही सिद्ध किए गए टेम्प्लेट का उपयोग करें, जिसे यहां और जीथूब पर डाउनलोड किया जा सकता है। इस टेम्पलेट का मूल HTML5 बॉयलरप्लेट है।
स्पष्टीकरण :

• jQuery को कम से कम और plugins.js में स्थित है सर्वर अनुरोधों की संख्या को कम करने के लिए (और इस तरह पेज लोडिंग में तेजी लाने के लिए)
• उपरोक्त समस्याओं से बचने के लिए PIE.htc के बजाय PIE.js का उपयोग किया जाता है
• PIE.js का उपयोग IE के 9 वें संस्करण के लिए किया जाता है, ताकि आप ढाल को लागू कर सकें (शायद केवल इतना ही नहीं)
• Selectivizr केवल सर्वर पर काम करता है (मेरे लिए यह एक रहस्य है), इसलिए, पूरी तरह से काम करने के लिए, अपने स्थानीय सर्वर को चालू करने की सिफारिश की जाती है (यदि आप स्थानीय निर्देशिका में टाइप कर रहे हैं)
• PIE.js में, सीमा-त्रिज्या, बॉक्स-छाया और -पाइप-बैकग्राउंड के साथ काम करने के लिए jQuery का उपयोग करते हुए कुछ छोरों को जोड़ा जाता है
• एचटीएमएल 5 बॉयलरप्लेट के निर्माता अपने सभी जावास्क्रिप्ट कोड को 1 फ़ाइल में कॉपी करने की सलाह देते हैं - script.js (यदि हम कई स्क्रिप्ट फ़ाइलों का उपयोग करते हैं तो हम सर्वर अनुरोधों की संख्या कम कर देते हैं)

उपयोगी संसाधन:

• एचटीएमएल 5 क्रॉस ब्राउज़र पॉलीफिल्स - विभिन्न प्रयोजनों के लिए कई अलग-अलग डिज़ाइन, जिनमें एक चीज समान है: वे आपको कल ही HTML 5 और सीएसएस 3 के साथ काम करने की अनुमति देते हैं!, भले ही ब्राउज़र उनका समर्थन न करें।
• caniuse.com - यहां आप देख सकते हैं कि वेब प्रौद्योगिकियाँ ब्राउज़रों द्वारा समर्थित हैं