पब्लिश होने की तारीख: 12 नवंबर, 2026
एआई कोडिंग एजेंट से टूलटिप या मॉडल डायलॉग बनाने के लिए कहें. इसके बाद, उसके लिखे गए कोड को ध्यान से देखें. ज़्यादातर मामलों में, एजेंट JavaScript का इस्तेमाल करके, ब्राउज़र में पहले से मौजूद सुविधाओं को फिर से बनाता है. अगर आपने एजेंट को नई सीएसएस या एचटीएमएल सुविधाओं का इस्तेमाल करने के लिए कहा, तो वह अक्सर सुविधा की पहचान और फ़ॉलबैक को छोड़ देता है. इस वजह से, जिन ब्राउज़र पर यह सुविधा काम नहीं करती है उन पर उपयोगकर्ताओं को गड़बड़ी वाला पेज दिखता है.
मॉडर्न वेब गाइडेंस, हर सुझाव में ब्राउज़र के साथ काम करने की सुविधा को शामिल करता है. हर गाइड में, आधुनिक वेब सुविधाओं को Baseline के साथ काम करने वाले डेटा और पुष्टि किए गए फ़ॉलबैक पैटर्न के साथ जोड़ा जाता है. इस पोस्ट में बताया गया है कि आपका एजेंट, उस डेटा का इस्तेमाल करके मॉडर्न और क्रॉस-ब्राउज़र कोड कैसे लिखता है.
बिना गाइडेंस के, कोडिंग एजेंट ब्राउज़र के साथ काम करने की सुविधा को गलत तरीके से क्यों लागू करते हैं
बिना किसी निर्देश के, कोडिंग एजेंट कोड लिखने से पहले शायद ही कभी यह जांच करते हैं कि आपके प्रोजेक्ट को किन ब्राउज़र के साथ काम करना चाहिए. इसके बजाय, वे इन दो में से किसी एक कैटगरी में आते हैं:
- डिफ़ॉल्ट रूप से लेगसी कोड का इस्तेमाल करना: मॉडल के ट्रेनिंग डेटा में लेगसी पैटर्न काफ़ी ज़्यादा होते हैं. मॉडर्न वेब गाइडेंस के आकलन से पता चलता है कि मॉडल अब भी इनमें से कई पैटर्न का सुझाव देते हैं. एजेंट अक्सर मुश्किल JavaScript लिखते हैं या बाहरी लाइब्रेरी जोड़ते हैं. हालांकि, यह काम पहले से मौजूद एचटीएमएल या सीएसएस की सुविधा से भी किया जा सकता है.
- सुरक्षा के बिना नई सुविधाओं का इस्तेमाल करना: जब किसी एजेंट से नई वेब सुविधा का इस्तेमाल करने के लिए कहा जाता है, तो वह आम तौर पर, काम करने वाले ब्राउज़र के लिए कोड लिखता है और वहीं रुक जाता है. यह सुविधा की पहचान नहीं करता और फ़ॉलबैक को छोड़ देता है. इससे उन ब्राउज़र पर पेज काम नहीं करता जो इस सुविधा के साथ काम नहीं करते.
मॉडर्न वेब गाइडेंस इवैलुएशन सुइट के डेटा से पता चलता है कि यह अंतर कितना आम है. जिन सुविधाओं के लिए सभी मुख्य ब्राउज़र पर काम करने की सुविधा अब तक उपलब्ध नहीं है उनके लिए, इवैलुएशन सुइट सुविधा की पहचान, @supports नियमों, फ़ॉलबैक या शर्त के साथ polyfill की जांच करता है. बिना गाइडेंस वाले मॉडल, इन जांचों को सिर्फ़ 43% बार पास कर पाते हैं. मॉडर्न वेब गाइडेंस की सुविधा चालू होने पर, पास रेट 87% तक बढ़ जाता है.
Baseline डेटा, हर सुझाव को कैसे गाइड करता है
मॉडर्न वेब गाइडेंस, Baseline का इस्तेमाल करके यह तय करता है कि किसी वेब सुविधा के लिए फ़ॉलबैक की ज़रूरत कब होती है. Baseline, मुख्य ब्राउज़र सेट (डेस्कटॉप और मोबाइल पर Chrome, Edge, Firefox, और Safari) पर सुविधाओं के समर्थन को ट्रैक करती है. इसके लिए, वह तीन स्टेटस का इस्तेमाल करती है:
- Baseline बड़े पैमाने पर उपलब्ध: यह सुविधा, सभी मुख्य ब्राउज़र पर कम से कम 30 महीनों से काम कर रही है.
- Baseline Newly available: यह सुविधा सभी मुख्य ब्राउज़र पर काम करती है. यह सुविधा उस तारीख से काम करना शुरू करती है जिस दिन आखिरी ब्राउज़र ने इसे जोड़ा था.
- सीमित उपलब्धता: फ़िलहाल, यह सुविधा सभी मुख्य ब्राउज़र पर काम नहीं करती.
मॉडर्न वेब गाइडेंस की हर गाइड में, web-features पैकेज से लिया गया Baseline स्टेटस और ब्राउज़र वर्शन का डेटा पहले से मौजूद होता है. जब आपका कोडिंग एजेंट कोई गाइड लोड करता है, तो उसे सुविधा के लागू होने के निर्देशों के साथ-साथ, सुविधा के काम करने की सटीक स्थिति, रिलीज़ की तारीखें, और ब्राउज़र के वर्शन की जानकारी मिलती है. उदाहरण के लिए:
Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.
डिफ़ॉल्ट रूप से, मॉडर्न वेब गाइडेंस उस डेटा के आधार पर दो नियमों का पालन करता है:
- आम तौर पर उपलब्ध बेसलाइन सुविधाएं: आपका एजेंट इन सुविधाओं का इस्तेमाल सीधे तौर पर करता है. इसके लिए, उसे अतिरिक्त सुविधा की पहचान करने या फ़ॉलबैक कोड की ज़रूरत नहीं होती. इस नियम से आपका कोड बेस छोटा रहता है और आपको बेवजह के समाधानों से बचने में मदद मिलती है.
- Baseline में नई उपलब्ध और सीमित उपलब्धता वाली सुविधाएं: इन सुविधाओं की गाइड में, पुष्टि की गई फ़ॉलबैक रणनीति शामिल होती है. आपका एजेंट, आधुनिक सुविधाओं का इस्तेमाल करता है. साथ ही, अन्य ब्राउज़र के लिए एक आसान फ़ॉलबैक उपलब्ध कराता है.
मॉडर्न वेब गाइडेंस में इस्तेमाल किए जाने वाले चार फ़ॉलबैक पैटर्न
हर वेब सुविधा के लिए, एक ही तरह के फ़ॉलबैक की ज़रूरत नहीं होती. मॉडर्न वेब गाइडेंस, हर सुविधा को चार फ़ॉलबैक तरीकों में से किसी एक से मैच करता है. यह इस बात पर निर्भर करता है कि वह सुविधा, काम न करने वाले ब्राउज़र में कैसा व्यवहार करती है:
| फ़ॉलबैक पैटर्न | मॉडर्न वेब गाइडेंस इसका इस्तेमाल कब करता है |
|---|---|
| बिना फ़ॉलबैक कोड के परतदार वृद्धि | सजावट या अतिरिक्त सुविधाएं, जिन्हें काम न करने वाले ब्राउज़र, लेआउट या व्यवहार को तोड़े बिना सुरक्षित रूप से अनदेखा कर देते हैं. |
@supports नियम की मदद से, सीएसएस की सुविधा का पता लगाना |
विज़ुअल या लेआउट स्टाइल, जो नई सीएसएस सुविधा पर निर्भर करती हैं और कुछ हद तक लागू होने पर खराब दिख सकती हैं. |
| हल्का कस्टम JavaScript | इंटरैक्टिव एचटीएमएल एट्रिब्यूट या एपीआई, जिन्हें पुराने ब्राउज़र में काम करने के लिए, एक छोटी और बिना किसी डिपेंडेंसी वाली स्क्रिप्ट की ज़रूरत होती है. |
| शर्तों के हिसाब से लोड किए गए पॉलीफ़िल | बड़ी सीएसएस या JavaScript सुविधाएं, जिनके लिए जांचे गए polyfill की ज़रूरत होती है. यह polyfill, डाइनैमिक तौर पर सिर्फ़ तब लोड होता है, जब नेटिव सपोर्ट मौजूद न हो. |
बिना फ़ॉलबैक कोड के परतदार वृद्धि
कुछ आधुनिक सुविधाएं, पेज के काम करने के तरीके में बदलाव किए बिना, टाइपोग्राफ़ी, ऐनिमेशन या पेज लोड होने की स्पीड को बेहतर बनाती हैं. अगर कोई ब्राउज़र इन सुविधाओं को नहीं पहचानता है, तो वह इन्हें अनदेखा कर देता है और पेज के बाकी हिस्से को सामान्य तरीके से रेंडर करता है.
उदाहरण के लिए, text-wrap: balance सीएसएस डिक्लेरेशन (Baseline Newly available) से हेडिंग में लाइनों की लंबाई बराबर हो जाती है.
.balanced {
text-wrap: balance;
}
Speculation Rules API (सीमित उपलब्धता) आने वाले पेजों को प्रीफ़ेच या प्रीरेंडर करता है. जिन ब्राउज़र पर यह सुविधा काम नहीं करती वे <script type="speculationrules"> ब्लॉक और सीएसएस के ऐसे डिक्लेरेशन को अनदेखा कर देते हैं जिनकी पहचान नहीं की जा सकती.
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
इस वजह से, आपका एजेंट इन सुविधाओं को सीधे जोड़ सकता है. इसके लिए, उसे कोई अतिरिक्त फ़ॉलबैक कोड जोड़ने की ज़रूरत नहीं होती.
@supports नियम की मदद से, सीएसएस की सुविधा का पता लगाना
सीएसएस की अन्य सुविधाएं, स्क्रीन पर किसी एलिमेंट की पोज़िशन या स्टाइल को बदलती हैं. अगर स्टाइल का कुछ हिस्सा बिना किसी शर्त के लागू किया जाता है, तो हो सकता है कि काम न करने वाले ब्राउज़र, एलिमेंट को गलत जगह पर रेंडर करें.
उदाहरण के लिए, पोज़िशन किए गए टूलटिप पर ऐंकर की गई कंटेनर क्वेरी (container-type: anchored, सीमित उपलब्धता) की मदद से, टूलटिप के ऐरो को फ़्लिप किया जा सकता है. ऐसा तब किया जा सकता है, जब वह व्यूपोर्ट के किनारे के पास फ़्लिप हो. ऐंकर की गई कंटेनर क्वेरी के साथ काम न करने वाले ब्राउज़र में, ऐरो फ़्लिप का पता नहीं लगा सकता. साथ ही, हो सकता है कि वह गलत दिशा दिखाए. मॉडर्न वेब गाइडेंस, आपके एजेंट को ऐरो स्टाइल को @supports (container-type: anchored) नियम में रैप करने का निर्देश देता है. इससे डिफ़ॉल्ट ऐरो सिर्फ़ उन ब्राउज़र में दिखता है जो @container anchored() फ़्लिप नियम के साथ भी काम करते हैं.
@supports (container-type: anchored) {
.tooltip-content::before {
content: "▼";
position: absolute;
inset-block-end: 0;
}
}
@container anchored(fallback: flip-block) {
.tooltip-content::before {
content: "▲";
inset-block-start: 0;
inset-block-end: auto;
}
}
हल्का कस्टम JavaScript
जब कोई इंटरैक्टिव एचटीएमएल सुविधा सभी मुख्य ब्राउज़र पर काम नहीं करती, तो तीसरे पक्ष की लाइब्रेरी को शामिल करना ज़रूरी नहीं होता. मॉडर्न वेब गाइडेंस, अपने-आप होने वाले इंटरैक्शन के लिए, सुविधा की जांच के बाद, छोटा और बिना किसी डिपेंडेंसी वाला JavaScript फ़ॉलबैक उपलब्ध कराता है.
उदाहरण के लिए, <dialog> एलिमेंट (सीमित उपलब्धता) पर closedby="any" एट्रिब्यूट की मदद से, उपयोगकर्ता बैकड्रॉप पर क्लिक करके मॉडल डायलॉग को बंद कर सकते हैं. closedby एट्रिब्यूट के साथ काम न करने वाले ब्राउज़र के लिए, गाइड में एक छोटा क्लिक लिसनर शामिल होता है. यह सबसे पहले HTMLDialogElement.prototype ऑब्जेक्ट की जांच करता है:
const dialog = document.querySelector('dialog');
if (!('closedBy' in HTMLDialogElement.prototype)) {
dialog.addEventListener('click', (event) => {
if (event.target !== dialog) return;
const rect = dialog.getBoundingClientRect();
const clickedInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!clickedInDialog) {
dialog.close();
}
});
}
शर्तों के हिसाब से लोड किए गए पॉलीफ़िल
सीएसएस ऐंकर पोज़िशनिंग (सीमित उपलब्धता) या Temporal एपीआई (सीमित उपलब्धता) जैसी बड़ी प्लैटफ़ॉर्म सुविधाओं के लिए, मैन्युअल तरीके से कस्टम फ़ॉलबैक लिखना व्यावहारिक नहीं है. वहीं, हर उपयोगकर्ता के लिए पॉलीफ़िल को बंडल करने से, उन ब्राउज़र के लिए डाउनलोड करने की अतिरिक्त लागत बढ़ जाती है जो पहले से ही इस सुविधा के साथ काम करते हैं.
ऐसे मामलों में, मॉडर्न वेब गाइडेंस आपके एजेंट को सबसे पहले यह जांच करने का निर्देश देता है कि ब्राउज़र में यह सुविधा काम करती है या नहीं. इसके बाद, आपके बंडलर या सीडीएन से import() एक्सप्रेशन का इस्तेमाल करके, डाइनैमिक तौर पर जांचा गया पॉलीफ़िल लोड करने का निर्देश देता है. इस सुविधा के साथ काम करने वाले ब्राउज़र, कोई अतिरिक्त कोड डाउनलोड नहीं करते. वहीं, पुराने ब्राउज़र ज़रूरत पड़ने पर polyfill फ़ेच करते हैं.
if (!CSS.supports('anchor-name: --a')) {
await import('@oddbird/css-anchor-positioning');
}
अपने प्रोजेक्ट के लिए, ब्राउज़र के साथ काम करने वाले टारगेट को पसंद के मुताबिक बनाना
डिफ़ॉल्ट रूप से, मॉडर्न वेब गाइडेंस, Baseline की सभी के लिए उपलब्ध सुविधाओं को इस्तेमाल करने के लिए सुरक्षित मानता है. इसके लिए, फ़ॉलबैक की ज़रूरत नहीं होती. इसके लिए, Baseline Newly available और सीमित उपलब्धता वाली सुविधाओं के लिए फ़ॉलबैक की ज़रूरत होती है.
आपके प्रोजेक्ट के लिए, ब्राउज़र की ज़रूरी शर्तें अलग हो सकती हैं. उदाहरण के लिए, हो सकता है कि आपको किसी खास Baseline साल को टारगेट करना हो, Electron ऐप्लिकेशन के लिए बिल्ड करना हो या बंडल को छोटा रखने के लिए पॉलीफ़िल को बाहर रखना हो.
अपने प्रोजेक्ट की AGENTS.md या CLAUDE.md फ़ाइल में, कस्टम ब्राउज़र सहायता नीति तय की जा सकती है:
## Browser support policy
- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.
हर गाइड में, Baseline स्टेटस, रिलीज़ की तारीख, और हर सुविधा के लिए ब्राउज़र के कम से कम वर्शन की जानकारी शामिल होती है. आपका एजेंट, कोड लिखने से पहले आपकी नीति की तुलना, साथ काम करने वाले इस डेटा से करता है. जब कोई सुविधा आपके टारगेट को पहले से पूरा कर रही हो, तब एजेंट मॉडर्न कोड लिखता है और फ़ॉलबैक कोड को स्किप कर देता है.
मॉडर्न पाथ और फ़ॉलबैक पाथ, दोनों को टेस्ट करें
क्रॉस-ब्राउज़र कोड लिखना, काम का सिर्फ़ आधा हिस्सा है. आपको असली ब्राउज़र में, मॉडर्न कोड पाथ और फ़ॉलबैक पाथ, दोनों की जांच करनी होगी.
सिर्फ़ एक ब्राउज़र में टेस्ट करने पर, आपके कोड की सिर्फ़ एक ब्रांच की पुष्टि होती है. उदाहरण के लिए, Chrome और Firefox, <dialog> एलिमेंट पर नेटिव closedby="any" एट्रिब्यूट को चलाते हैं. वहीं, Safari, JavaScript के क्लिक-आउटसाइड फ़ॉलबैक को चलाता है. अगर सिर्फ़ Chrome में डायलॉग की जांच की जाती है, तो आपके टेस्ट के दौरान फ़ॉलबैक लिसनर कभी नहीं चलता.
कोड के दोनों पाथ की पुष्टि करने के लिए, अपने कोडिंग एजेंट को एक साथ कई ब्राउज़र इंजन से कनेक्ट करें:
- एजेंट के लिए Chrome DevTools: अपने एजेंट को Chrome से कनेक्ट करें, ताकि लेआउट, कंसोल लॉग, और रनटाइम के दौरान होने वाली गड़बड़ियों की जांच की जा सके.
- Firefox DevTools MCP: WebDriver BiDi का इस्तेमाल करके, अपने एजेंट को लाइव Firefox इंस्टेंस से कनेक्ट करें.
- Safari एमसीपी सर्वर: पहले से मौजूद
safaridriver --mcpकमांड का इस्तेमाल करके, अपने एजेंट को Safari से कनेक्ट करें.
इन तीनों टूल के कनेक्ट होने पर, आपका एजेंट एक ही वर्कफ़्लो में Chrome, Firefox, और Safari पर आपका पेज खोल सकता है. इसके बाद, यह पुष्टि की जा सकती है कि नेटिव सुविधा और फ़ॉलबैक अनुभव, दोनों उम्मीद के मुताबिक काम कर रहे हैं.
मॉडर्न वेब गाइडेंस का इस्तेमाल शुरू करना
अपने प्रोजेक्ट में मॉडर्न वेब गाइडेंस जोड़ने के लिए, अपनी प्रोजेक्ट डायरेक्ट्री से इंटरैक्टिव इंस्टॉलर चलाएं:
npx modern-web-guidance@latest install
अगर आपके पास पहले का कोई वर्शन इंस्टॉल है, तो वर्शन 1.0 पर अपग्रेड करने के लिए, अपडेट कमांड चलाएं:
npx modern-web-guidance@latest update
मॉडर्न वेब गाइडेंस को Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code, और Grok के लिए प्लगिन मार्केटप्लेस से भी इंस्टॉल किया जा सकता है.
ज़्यादा जानने के लिए, ये संसाधन देखें: