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

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

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

प्रगतिशील वृद्धि कसरी प्रयोग गर्ने

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

जब कम्तिमा सक्षम सक्षम ब्राउजरहरू सुरू गर्दा, तपाइँ यो सुनिश्चित गर्न चाहानुहुन्छ कि तपाईको सबै HTML मान्य र सैद्धान्तिक रूपमा सही हुनुपर्छ। यसले यो सुनिश्चित गर्न मद्दत गर्नेछ कि प्रयोगकर्ता एजेन्टरहरूको व्यापक विविधता पृष्ठ हेर्न र यसलाई सही रूपमा प्रदर्शन गर्न सक्दछ।

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

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

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

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

सुविधा प्रश्नहरू प्रयोग गर्दै

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

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

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

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