वेब ब्राऊजर जो पर्यंत वेबसाइट्सच्या रूपात असतात खरं तर, ब्राऊझर आपल्या साइटला पाहत असलेल्या अनुभवातील किंवा लोकसंख्येतील आवश्यक घटक आहेत - परंतु सर्वच ब्राऊझर्स तितकेच तयार नाहीत हे बर्याचदा अत्यंत जुन्या आणि अधिक आधुनिक ब्राऊझरमध्ये आढळलेल्या वैशिष्ट्यांमध्ये ग्राहक गहाळ आहेत अशा वेबसाइट्सवर आपले वेबपृष्ठ पहायला संपूर्णपणे (आणि प्रत्यक्षात बर्यापैकी शक्यतो) शक्य आहे. आपण वेबसाईट डिझाइन आणि विकासातील नवीनतम प्रगतींचा लाभ घेणार्या वेबसाइट्सचा विकास करण्यासाठी प्रयत्नांची पराकाष्ठा केल्याने हे महत्त्वपूर्ण समस्या उद्भवू शकतात. कोणीतरी आपल्या जुन्या ब्राउजरच्या सहाय्याने आपल्या साइटवर येतात आणि आपल्या नवीनतम प्रगत तंत्राने त्यांच्यासाठी कार्य करत नसल्यास, आपण संपूर्णपणे एक खराब अनुभव वितरित करू शकता. प्रोग्रेसिव्ह एन्हांसमेंट म्हणजे वेगवेगळ्या ब्राऊझर्ससाठी वेब पेज डिझाईन हाताळण्याचे एक धोरण आहे, ज्या आधुनिक स्वरुपात नसलेल्या जुन्या ब्राऊजर आहेत.
प्रगतिशील वाढ वेब पृष्ठे डिझाइन करण्याचा एक मार्ग आहे जेणेकरून अधिक उपयोगकर्ता युजर एजंटने समर्थन दिले असेल तर वेब पृष्ठाची अधिक वैशिष्ट्ये असतील. हे डॅशल डिग्रेडेशन म्हणून ओळखले जाणाऱ्या डिझाइनच्या धोरणांच्या विरूद्ध आहे. हे धोरण सर्वात आधी आधुनिक ब्राउझरसाठी पृष्ठे बनविते आणि नंतर ते कमी फंक्शनल ब्राउझरसह देखील योग्यरित्या कार्य करत असल्याचे सुनिश्चित करते - हा अनुभव "सुखावह नाही". प्रगतिशील वाढ प्रथम कमी सक्षम ब्राउझरसह प्रारंभ होते आणि तेथेून एक अनुभव तयार करते.
प्रोग्रेसिव्ह एन्हांसमेंट कसे वापरावे
प्रगतिशील वाढ वापरून आपण वेब डिझाइन तयार करता तेव्हा, आपण असे सर्वप्रथम डिझाइन तयार करणे आहे जे वेब ब्राउझरच्या सर्वात कमी सामान्य भागासाठी कार्य करते. त्याच्या कोर मध्ये, प्रगतिशील वृद्धी म्हणते की आपली सामग्री सर्व उपयोजकांसाठी उपलब्ध असली पाहिजे, केवळ उप-सेट न करता. म्हणूनच आपण या जुने, जुने आणि कमी सक्षम ब्राउझरचे समर्थन करून सुरुवात केली पाहिजे. आपण जर अशी साइट तयार केली जे चांगले कार्य करते त्यांच्यासाठी, आपण एक आधाररेखा तयार केली आहे ज्यास सर्व अभ्यागतांना कमीत कमी एक वापरण्यायोग्य अनुभव दिला पाहिजे
प्रथम कमीत कमी सक्षम ब्राउझरसह प्रारंभ करताना, आपण हे सुनिश्चित करू इच्छित असाल की आपले सर्व HTML वैध आणि शब्दार्थाने योग्य असावे. हे सुनिश्चित करेल की वापरकर्ता एजंटची सर्वाधिक विविधता पृष्ठ पहा आणि अचूकपणे प्रदर्शित करू शकेल.
लक्षात ठेवा की व्हिज्युअल डिझाईन शैली आणि एकूण पृष्ठ लेआउट बाह्य शैली पत्रके वापरून जोडली जाते. हे खरोखरीच आहे जेथे प्रगतीशील वाढ होते. आपण साइट अभ्यागता तयार करण्यासाठी शैली पत्रक वापरता जे सर्व अभ्यागतांसाठी काम करते. वापरकर्ता एजंट कार्यक्षमता वाढू म्हणून आपण पृष्ठ वाढविण्यासाठी अतिरिक्त शैली जोडू शकता. प्रत्येकजण बेसेलिन शैली प्राप्त करतो, परंतु अधिक आधुनिक आणि अधिक आधुनिक शैलीस समर्थन देणार्या कोणत्याही वृत्त ब्राउझरसाठी, त्यांना काही अतिरिक्त मिळते. आपण त्या शैलीचे समर्थन करणार्या ब्राउझरसाठी पृष्ठ "प्रगतिशील वाढवा"
आपण प्रगतीशील वाढ लागू करू शकता की काही मार्ग आहेत. जर तो CSS ची एक ओळ समजत नाही तर प्रथमच, आपण ब्राउझर काय करतो ते विचार करावा - हे त्याकडे दुर्लक्ष करते! हे प्रत्यक्षात आपल्या पक्षात कार्य करते आपण सर्व ब्राउझरला समजणार्या शैलींचा आधाररेखा संच तयार केल्यास, आपण नंतर नवीन ब्राउझरसाठी अतिरिक्त शैली जोडू शकता. ते शैली समर्थित असल्यास, ते त्यांना लागू होईल. नसल्यास, ते त्यांच्याकडे दुर्लक्ष करतील आणि त्या मूलभूत शैलीचा वापर करतील. प्रगतिशील वाढीचे एक सोपे उदाहरण या CSS मध्ये पाहिले जाऊ शकते:
.main-content {
पार्श्वभूमी: # 999;
पार्श्वभूमी: rgba (153,153,153, .75);
}
या शैलीने प्रथम पार्श्वभूमीला किंचीत रंग लावले आहे. पारदर्शकता स्तर सेट करण्यासाठी दुसरा नियम आरजीबीए रंग मुल्यांचा वापर करतो. एखादे ब्राउझर RGBA चे समर्थन करत असल्यास, ते प्रथम शैलीने दुसर्यासह अधिलिखित करेल. तसे न केल्यास, केवळ प्रथम वापर केला जाईल. आपण एक आधाररेखा रंग सेट केला आहे आणि नंतर अधिक आधुनिक ब्राउझरसाठी अतिरिक्त शैली जोडली आहेत.
वैशिष्ट्य क्वेरी वापरणे
आपण प्रगतिशील वाढीस लागू करू शकता अशा आणखी एक मार्ग म्हणजे "वैशिष्ट्य क्वेरी" म्हणून ओळखले जाणारे हे वापरणे. हे मीडिया प्रश्नांप्रमाणेच आहेत , जे प्रतिसाद वेबसाइट डिझाइनचे अत्यावश्यक भाग आहेत. विशिष्ट स्क्रीन आकारांसाठी मीडिया क्वेरी मजकूर असताना, विशिष्ट क्वेरी विशिष्ट फीचर्स समर्थित आहे किंवा नाही हे पाहण्यासाठी वैशिष्ट्य क्वेरी तपासेल. आपण वापरत असलेले सिंटॅक्स हे आहे:
@ समर्थन (प्रदर्शन: फ्लेक्स) {}आपण या नियमात जोडलेली कोणतीही शैली कार्य करेल जर त्या ब्राउझरने "flex" समर्थित केले, जे फ्लेक्सबॉक्ससाठी शैली आहे. आपण प्रत्येकासाठी एक नियम सेट करा आणि नंतर फक्त निवडक ब्राउझरसाठी अतिरिक्त जोडण्यासाठी वैशिष्ट्य क्वेरींचा वापर करू शकता
जेनिफर क्रिनिन द्वारे मूळ लेख. 12/13/16 रोजी जेरेमी गिरर्ड द्वारा संपादित.