प्रगतिशील वृद्धि एक कार्यनीति हो जसले ठोस, कार्यात्मक आधार (सिमान्टिक HTML जो सबै ठाउँमा काम गर्छ) बाट शुरु गरी, त्यसपछि CSS लेयर गरिन्छ प्रस्तुतिकरणको लागि र JavaScript लेयर गरिन्छ अझ समृद्ध व्यवहारको लागि — ताकि मूल अनुभव काम गर्छ यदि माथिल्लो लेयरहरू विफल हुन।
1. HTML → content + functionality (works with no CSS/JS)
2. CSS → presentation/layout (enhances appearance)
3. JS → interactivity (enhances behavior)
<!-- Layer 1: works on its own — submits to the server, full page reload -->
<form action="/search" method="get">
<input name="q" type="search" required />
<button>Search</button>
</form>
// Layer 3: IF JS is available, enhance it into a live AJAX search
form.addEventListener("submit", (e) => {
e.preventDefault(); // upgrade to fetch — no reload
fetchResults(form.q.value);
});
यदि JavaScript लोड हुन असफल हुन्छ (कमजोर नेटवर्क, त्रुटि, अवरुद्ध), फर्म अझैपनि काम गर्छ मूल सबमिट मार्फत — प्रयोगकर्ता अझैपनि खोज गर्न सक्छ। JS केवल वृद्धि गर्छ यो।
प्रगतिशील वृद्धि सामान्यतः अधिक मजबूत हो किनभने आधार काम गर्ने को लागि गारन्टीयुक्त हुन्छ।
यो लचीला, पहुँचयोग्य, कार्यक्षम साइटहरू उत्पादन गर्छ: सामग्री HTML मा हुन्छ (SEO, स्क्रीन पाठकहरू, र ढिलो/पुरानो उपकरणहरूको लागि राम्रो), पृष्ठ JS अघि/बिना प्रयोगयोग्य हुन्छ (द्रुत कथित लोड, यदि स्क्रिप्ट त्रुटि हुन्छ काम गर्छ), र वृद्धिहरू एक बोनस हुन् आवश्यकता भन्दा।
विविध उपकरणहरू, नेटवर्कहरू, र असफलताहरूको संसारमा, काम गर्ने HTML कोरमा निर्माण गरी — JS सधैं चल्छ भनेर मान्न को सट्टा — एक साइट सबैको लागि प्रयोगयोग्य राख्छ।
आधुनिक ढाँचाहरूले यो सर्भर-साइड प्रस्तुतिकरण र "प्ल्याटफर्म पहिलो काम गर्छ, हाइड्रेशन वृद्धि गर्छ" सँग गुञ्जन गर्छन्।