🖐🏾 👨🏽‍💻 👩🏻‍🤝‍👨🏾 IE10 और विंडोज 8 के लिए तैयार होने के लिए 7 कदम 👩🏼‍🤝‍👨🏽 👩🏾‍🍳 🤡

जैसा कि आप शायद पहले से ही जानते हैं, 29 फरवरी को, विंडोज 8 उपभोक्ता पूर्वावलोकन जारी किया गया था , और इसके साथ इंटरनेट एक्सप्लोरर 10 का 5 वां मंच पूर्वावलोकन संस्करण । इस लेख में मैं आईई के नए संस्करण की तैयारी के बारे में बात करूंगा। और यद्यपि वर्णन मुख्य रूप से IE10 के आसपास आयोजित किया जाएगा, इनमें से कई युक्तियां अन्य ब्राउज़रों सहित अन्य ब्राउज़रों पर लागू होती हैं।

1. <! Doctype html> का उपयोग करें

पहली, बहुत, बहुत, बहुत पहली चीज जिसे आपको शुरू करने की आवश्यकता है, यह सुनिश्चित करने के लिए कि आप सभी पृष्ठों को सही सिद्धांत के साथ देते हैं। Html5 दुनिया में, यह एक छोटी और बहुत ही सरल रेखा है:

<!doctype html>

यह आपके द्वारा लिखी गई पहली पहली पंक्ति होनी चाहिए। यदि आपका पेज टेम्प्लेट स्वचालित रूप से विकास टूल द्वारा उत्पन्न होता है और यह लाइन नहीं है, तो टेम्प्लेट को सही करें। यदि आपका सीएमएस डॉक्टाइप के बिना पृष्ठों को प्रस्तुत करता है, तो उपयोग किए गए टेम्प्लेट को अपडेट करें।

मैं दोहराता हूं, यह एक बहुत ही सरल कदम है, हालांकि, अत्यंत महत्वपूर्ण है। सही सिद्धांत ब्राउज़र को बताता है कि पृष्ठ की सामग्री को कैसे संभालना है। IE9 और IE10 quirks मोड के लिए सिद्धांत स्विच के अभाव में।

IE9 में , कैनवास, ऑडियो, वीडियो और CSS3 सहित कई नई सुविधाएँ, संगतता मोड में काम नहीं करती हैं । IE10 संगतता मोड में एचटीएमएल 5 विनिर्देश में वर्णित तंत्र का उपयोग करता है: यह एक ही मानक मोड है, लेकिन विनिर्देश में वर्णित लागू संगतता फिक्स के साथ, जो अन्य ब्राउज़रों के व्यवहार से भी मेल खाती है।

(मुझे याद दिलाएं कि HTML5 विनिर्देश, अन्य बातों के अलावा, संगतता मोड में ब्राउज़रों द्वारा पृष्ठों को संसाधित करने के नियम भी शामिल हैं। उदाहरण: मामले की संवेदनशीलता , रूप , सामग्री की छवि स्थान।)

ओपेरा सॉफ्टवेयर: डॉकटाइप से वादिम मेकवे द्वारा एक प्रस्तुति भी देखें । बिंदु ( वीडियो )।

मेरा पेज किस मोड में काम करता है?

आप यह देख सकते हैं कि आपकी साइट DevTools (F12) के माध्यम से किस मोड में प्रदर्शित होती है:
चाल मोड

मानकों और Quirks HTML5 विनिर्देश के अनुसार हैं ।

IE10 संगतता दृश्य में काम कर रहे सिद्धांतों के बिना साइटों के लिए IE5 से quirks मोड का समर्थन करता है, और साइटें जो एक्स-यूए-संगत के साथ मेटा टैग के माध्यम से इस तरह के मोड की आवश्यकता को स्पष्ट रूप से इंगित करती हैं:

 <meta http-equiv="X-UA-Compatible" content="IE=5">

2. संगतता मुद्दों को हल करें

गलत सिद्धांत के अलावा, अन्य कारण भी हो सकते हैं कि कोई विशेष साइट डिफ़ॉल्ट रूप से मानक मोड में क्यों प्रदर्शित नहीं होती है:

साइट IE द्वारा उपयोग की जाने वाली संगतता सूची में सूचीबद्ध है। इस सूची में आज लगभग 7 रूसी साइटें हैं। एक नियम के रूप में, ये लोकप्रिय साइटें हैं जिनके लिए डेवलपर्स ने संगतता मोड सेट किया है, या उपयोगकर्ता अक्सर प्रदर्शन में सुधार करने के लिए मैन्युअल रूप से ऐसा करते हैं। MSDN पर संसाधन स्वामियों के लिए डी-लिस्टिंग प्रक्रिया का वर्णन किया गया है ।
गलत सिद्धांत का इस्तेमाल किया जा रहा है।
यह या वह मोड पृष्ठ पर X-UA- संगत मेटा टैग के माध्यम से पंजीकृत है।

और यहां तक कि अगर सब कुछ सिद्धांत और संगतता मोड के साथ है, तो इसका मतलब यह नहीं है कि साइट IE10 में सही ढंग से काम करेगी। उदाहरण के लिए, एक साइट तथाकथित ब्राउज़र को सूँघने, उपयोगकर्ता एजेंट लाइन या अन्य संकेतों द्वारा ब्राउज़र का निर्धारण करने और विभिन्न ब्राउज़रों को अलग-अलग कोड देने के लिए उपयोग कर सकती है।

या, कहें, एक साइट एक पुराने पुस्तकालय का उपयोग कर सकती है जो IE के पुराने संस्करणों में बग या विशेष हैक का उपयोग करती है, लेकिन बग फिक्स के साथ नए संस्करण में सही ढंग से काम करना बंद कर दिया।

इस तरह के कई कारण हो सकते हैं, और त्रुटियों के संभावित स्रोतों की पहचान करने के लिए यह आसान था, हमारे पास एक विशेष उपकरण है - कॉम्पिटिटर इंस्पेक्टर।

अनुकूलता निरीक्षक

इंस्पेक्टर एक जावास्क्रिप्ट लाइब्रेरी है जिसे आप आसानी से अपने पेज में जोड़ सकते हैं:

 <script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>

उसके बाद, डाउनलोड करने योग्य स्क्रिप्ट संभावित समस्याओं के लिए पृष्ठ का विश्लेषण करता है और इस तरह के काउंटर के रूप में परिणामों का सारांश देता है:

हमर पर सब इंस्पेक्टर

काउंटर पर क्लिक करके, आप विशिष्ट समस्याओं को देख सकते हैं और उन्हें ठीक करने के लिए सिफारिशें देख सकते हैं:

हंब पर इंस्पेक्टर इंस्पेक्टर का परिणाम है

उदाहरण के लिए, हैबर पर उपयोगकर्ता प्रोफाइल में, संगतता निरीक्षक का कहना है कि, DOM स्तर 3 कोर मानक के अनुसार, createElement विधि कोण कोष्ठक के साथ पाठ तर्क का समर्थन नहीं करती है। इस सुविधा का उपयोग MooTools के पुराने संस्करणों में किया गया था, क्योंकि निरीक्षक भी सुझाव देता है और नवीनतम संस्करण में अपग्रेड करने की सलाह देता है। एक सरल जांच से पता चलता है कि म्यूटूल का पुराना संस्करण वास्तव में हब पर उपयोग किया जाता है

या, उदाहरण के लिए, विंडोज 8 उपभोक्ता पूर्वावलोकन के कई उपयोगकर्ता शिकायत करते हैं कि IE10 में Yandex.Maps काम नहीं करता है। इंस्पेक्टर आपको बताता है कि साइट संभवतः उपयोगकर्ता एजेंट की जाँच कर रही है और साइट को किसी अन्य उपयोगकर्ता एजेंट को देकर इसकी जाँच करने की पेशकश करती है, एक अलग ब्राउज़र होने का नाटक करते हुए (यह चेकबॉक्स सत्यापन में एक चेकमार्क सेट करके किया जाता है)। उसके बाद, कार्ड काम करना शुरू करते हैं।

मुझे उम्मीद है कि ऐसी सभी समस्याएं जल्द ही ठीक हो जाएंगी।

किसी अन्य व्यक्ति की साइट पर अनुकूलता निरीक्षक कैसे जोड़ें?

यदि आप किसी अन्य की साइट पर अनुकूलता निरीक्षक की कोशिश करना चाहते हैं, जैसा कि मैंने हैबर और यांडेक्स के लिए किया था, या अपने दम पर, साइट के कोड में परिवर्तन किए बिना, यह भी संभव है।

ऐसा करने के लिए, आपको फ़िडलर को स्थापित करना होगा और इसमें एक स्निपेट जोड़ना होगा (नियम के माध्यम से प्रसंस्करण नियमों में बदलाव करें -> नियम बनाएं ...)। उसके बाद, फिडलर आपके कंप्यूटर पर स्थानीय रूप से पृष्ठों के शरीर में इंस्पेक्टर कोड डालने में सक्षम होगा।

फिर से संदर्भ : संगतता निरीक्षक और निर्देश ।

3. पहचानें सुविधाएँ, ब्राउज़र नहीं

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

सुविधा का पता लगाना महिला का पता लगाना

हाँ:

सुविधा की जाँच करें । जाँच करें कि क्या ब्राउज़र उपयोग करने से पहले आवश्यक तरीकों और गुणों का समर्थन करता है।
व्यवहार का सत्यापन । वर्कअराउंड्स लागू करने से पहले ज्ञात मुद्दों के लिए परीक्षण करें।

नहीं:

विशिष्ट ब्राउज़रों की जाँच करना । ब्राउजर आइडेंटिफ़ायर (उदाहरण के लिए, यूज़र एजेंट स्ट्रिंग) का उपयोग फाइन-ट्यून व्यवहार के लिए न करें।
असमर्थित मान्यताएँ। यदि आपने संभावनाओं में से एक की जांच की, तो इसका मतलब यह नहीं है कि अन्य काम करेंगे।

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

आधुनिकीकरण का उपयोग करना एक अच्छा प्रारंभिक बिंदु है।

समान मार्कअप लेख भी देखें : क्रॉस-ब्राउज़र कोड और ब्राउज़र और फ़ीचर डिटेक्शन लिखना ।

सशर्त टिप्पणियाँ

आप में से कई शायद IE के लिए सशर्त टिप्पणियों से परिचित हैं, जिससे आपको IE के विभिन्न संस्करणों के लिए किसी प्रकार के कोड को एम्बेड करने की अनुमति मिलती है। मुझे लगता है कि कई लोगों को ऐसी स्थितियों का भी सामना करना पड़ा जब सशर्त टिप्पणियों को गलत तरीके से डाला गया था, जिसके परिणामस्वरूप, उदाहरण के लिए, साइट केवल IE7 और 8 के बारे में जानती थी, IE6 के लिए IE के सभी अन्य संस्करणों (नए वाले सहित) को मार्कअप दे रही थी।

क्या वह परिचित है? मेरे पास आपके लिए खबर है:

 <!--[if IE]> <br/>     IE10   .<br/>    IE     . <br/> <![endif]-->

यह सही है: IE10 सशर्त टिप्पणियों की उपेक्षा करता है। आप उन्हें IE के पिछले संस्करणों के लिए उपयोग करना जारी रख सकते हैं, हालांकि, अधिक आधुनिक ब्राउज़रों के लिए, आपको सुविधा पहचान सुविधा का उपयोग करना चाहिए।

4. प्लगइन्स के बिना एक मोड प्रदान करें

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

यदि आपने iOS उपकरणों के लिए साइटें विकसित की हैं, तो यह स्थिति आपको परिचित होनी चाहिए। विंडोज 8 में, IE10 को दो मोड में प्रस्तुत किया गया है: सभी उपयोगकर्ता-स्थापित एक्सटेंशन के साथ डेस्कटॉप के लिए और मेट्रो मोड में एक्सटेंशन के साथ अक्षम।

ie10 मेट्रो YouTube

मेट्रो मोड से, उपयोगकर्ता आसानी से डेस्कटॉप मोड में जा सकता है, हालांकि, यह "फ्लैश प्लेयर प्लगइन स्थापित करें" जैसे संदेश प्रदर्शित करने के लिए कोई मतलब नहीं है - यह उसकी मदद नहीं करेगा।

यानी 10 मीटर रुटेबिलिटी

क्या करने की सिफारिश की गई है:

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

IE10 में प्लग-इन के बिना ब्राउज़िंग और मानक-आधारित वेब ग्राफिक्स पर जाने वाले लेख भी देखें।

5. जहां आवश्यक हो उपसर्ग जोड़ें, और मानकों की सावधानीपूर्वक निगरानी करें

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

यदि आप IE10 में नई सुविधाओं का उपयोग करना चाहते हैं, तो सभी मुख्य इंजनों के लिए आवश्यक उपसर्गों (उदाहरण के लिए, -ms- IE में css- संपत्तियों के लिए) और अधिक या कम स्थिर सुविधाओं के लिए भविष्य के लिए कोई पूर्व-उपसर्ग विकल्प के साथ गुणों और विधियों को जोड़कर अपने कोड को अपडेट करना न भूलें। ।

आपको याद दिला दूं कि IE9 में बहुत सारे नए फीचर्स पहले से ही जोड़े गए थे, और IE10 में उनमें से भी ज्यादा:

उपसर्गों का उपयोग करके विकसित करने के लिए, देखें, उदाहरण के लिए, लेख वेंडर उपसर्गों के साथ प्रोग्रामिंग के लिए एक सर्वोत्तम अभ्यास और ली वेरो से थेपरिफ़िक्स-मुक्त पुस्तकालय।

6. विभिन्न स्क्रीन के लिए डिजाइन

मेरे लेख " एचटीएमएल 5 पालों में। नई तकनीकें आधुनिक वेब को कैसे बदल रही हैं ", मैंने पहले ही कहा है कि कई, कई वेब डेवलपर्स का सपना है कि स्क्रीन का आकार और रिज़ॉल्यूशन केवल टुकड़ों में टूट जाएगा जब मोबाइल का सामना करना पड़ता है और टैबलेट परिदृश्य, जिनमें से लोकप्रियता पहले से ही वेबसाइटों और वेब अनुप्रयोगों के विकास के लिए कई दृष्टिकोणों का एक संशोधन है।

उत्तरदायी डिजाइन दो पोषित शब्द हैं जिन्हें आपको विभिन्न प्रस्तावों और स्क्रीन आकारों के संबंध में लचीलेपन को प्राप्त करने के लिए सीखने के लिए देखने की आवश्यकता है।

win8 सी.पी.

विंडोज 8 के संबंध में, आपको दो मुख्य बिंदुओं के लिए तैयार रहना होगा:

पूरी तरह से अलग-अलग रूप कारकों के उपकरणों की एक विस्तृत विविधता: अपेक्षाकृत छोटे टैबलेट से लेकर मॉनिटर और पैनल की बड़ी स्क्रीन तक।
IE10 सहित स्नोप्ड-मोड मेट्रो-शैली अनुप्रयोग।

स्क्रीन की विविधता

विंडोज 8 के लिए अनुशंसित न्यूनतम स्क्रीन का आकार 1366x768 है, जिस स्थिति में स्नैप फ़ंक्शन काम करेगा, जो नीचे वर्णित है। मेट्रो स्टाइल ऐप्स के लिए, न्यूनतम आवश्यकता 1024x768 है। IE10 में साइट, मेट्रो मोड में काम कर रही है, पूरी स्क्रीन पर है।

हालाँकि, यह देखते हुए कि डेस्कटॉप ब्राउज़र कम रिज़ॉल्यूशन (उदाहरण के लिए, 800x600 या 1024x600) पर काम कर सकता है, छोटे रिज़ॉल्यूशन को ध्यान में रखने की आवश्यकता अभी भी बनी हुई है।

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

एक समान कहानी ग्राफिक्स के आकार और बड़ी स्क्रीन पर उन्हें स्केल करने की आवश्यकता के साथ है (रास्टर ग्राफिक्स के विभिन्न सेट का उपयोग करके, या एसवीएफ का उपयोग करके)।

उत्तरदायी डिजाइन। CSS3 मीडिया क्वेरी। बिंग।

सीएसएस कॉर्नर: सीएसएस 3 मीडिया क्वेरी और सीएसएस 3 मीडिया क्वेरी के साथ विभिन्न उपकरणों पर प्रतिक्रिया लेख भी देखें।

तड़कना ("पार्किंग")

यह कहानी तकनीकी रूप से कुछ हद तक डेस्कटॉप और मोबाइल परिदृश्यों के लिए एक सामान्य समाधान विकसित करने के कार्य के समान है। विंडोज 8 में स्नैप फ़ंक्शन आपको मेट्रो-शैली एप्लिकेशन को साइड (दाएं या बाएं) पर पिन करने की अनुमति देता है ताकि यह हमेशा स्क्रीन पर हो:

ie10 मेट्रो तड़क गई

इस स्थिति में, साइट के लिए आरक्षित स्थान की चौड़ाई 320px है, जो मोबाइल स्क्रिप्ट के समान है और CSS3 मीडिया क्वेरी का उपयोग करते हुए प्रदर्शन को ठीक करने के लिए भी उपलब्ध है।

लेख भी देखें डिवाइस अनुकूलन ।

7. अपनी उंगलियों, माउस और कीबोर्ड के तहत डिज़ाइन करें

अंत में, यह मत भूलो कि उपयोगकर्ता आपकी साइट के साथ कैसे बातचीत करेगा (वैसे, चाहे वह इंटरनेट एक्सप्लोरर के डेस्कटॉप या मेट्रो मोड का उपयोग करता हो)। वह माउस और कीबोर्ड को नियंत्रित कर सकता है, और शायद अपनी उंगलियों से।

स्पर्श इनपुट

उत्तरार्द्ध का मतलब है कि यह सोचने का समय है कि क्या प्राकृतिक इनपुट का उपयोग करके आपकी साइट या वेब एप्लिकेशन के साथ काम करना सुविधाजनक है?

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

तकनीकी दृष्टिकोण से, मैं इन दो लेखों पर ध्यान देने की सलाह देता हूं: IE10 के लिए टच इनपुट और मेट्रो स्टाइल ऐप्स और सभी ब्राउज़रों में मल्टी-टच और माउस इनपुट को हैंडल करना ।

सारांश

मैं एक बार फिर से सही समय पर पूरी तरह से सशस्त्र होने के लिए आवश्यक सनक को दोहराता हूं:

सही सिद्धांत का उपयोग करें
संगतता निरीक्षक के साथ रेंडरिंग मोड और संभावित समस्याओं की जांच करें
सुविधा का पता लगाने के दृष्टिकोण पर स्विच करें
प्लगइन्स की अनुपस्थिति में उपयोगकर्ता क्या देखेगा इस पर सोचें
प्रयोगात्मक सुविधाओं के लिए एमएस उपसर्ग जोड़ें और भविष्य के लिए गैर-उपसर्ग विकल्प
अलग-अलग स्क्रीन आकार और प्रदर्शन मोड के लिए तैयार हो जाओ
उपयोगकर्ता को अपनी वेबसाइट या वेब एप्लिकेशन पर आसानी से अपनी उंगलियों का उपयोग करने की अनुमति दें।

IE10 और विंडोज 8 के लिए तैयार होने के लिए 7 कदम