प्रगतिशील वृद्धि

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

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

प्रोग्रेसिव एन्हांसमेंट का उपयोग कैसे करें

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

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

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

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

।मुख्य सामग्री {
पृष्ठभूमि: # 999;
पृष्ठभूमि: आरजीबीए (153,153,153, .75);
}

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

फ़ीचर क्वेरीज़ का उपयोग करना

प्रगतिशील वृद्धि लागू करने का एक और तरीका यह है कि "फीचर क्वेरीज" के रूप में जाना जाता है। ये मीडिया प्रश्नों के समान हैं, जो उत्तरदायी वेबसाइट डिज़ाइनों का एक आवश्यक टुकड़ा हैं । जबकि मीडिया कुछ निश्चित स्क्रीन आकारों के लिए पाठ पूछताछ करता है, फीचर क्वेरी यह देखने के लिए जांच करेगी कि कोई निश्चित सुविधा समर्थित है या नहीं। आप जिस वाक्यविन्यास का उपयोग करेंगे, वह है:

@supports (प्रदर्शन: फ्लेक्स) {}

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

जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 12/13/16 को संपादित किया गया।