वेब वर्शन में नया क्या है

Rachel Andrew

पब्लिश होने की तारीख: 20 मई, 2025

Google I/O 2025 में, वेब में नया क्या है की मुख्य बातें बताने वाले कीनोट में, सभी बेसलाइन के बारे में एलान किए गए. साथ ही, इस साल बेसलाइन का हिस्सा बनी कुछ सुविधाओं के बारे में भी बताया गया. यह साल वेब के लिए बहुत अच्छा रहा. साथ ही, Baseline के लिए भी यह साल शानदार रहा. इस पोस्ट में, इस साल के सभी अपडेट के बारे में बताया गया है. साथ ही, ज़्यादा जानकारी पाने के लिए लिंक भी दिए गए हैं.

वेब प्लैटफ़ॉर्म डैशबोर्ड और वेब की सुविधाएं

हमने 2024 में वेब प्लैटफ़ॉर्म डैशबोर्ड को लॉन्च किया था. यह वेब-फ़ీचर के डेटा सेट का इस्तेमाल करता है. इससे आपको उन सभी सुविधाओं के बारे में पता चलता है जो Baseline में शामिल हैं.

वेब-फ़ीचर का डेटा अब पूरा हो गया है. इसमें प्लैटफ़ॉर्म की सभी सुविधाओं को मैप किया गया है. हर महीने नई सुविधाएं, Baseline में शामिल होती हैं. इसलिए, डेटा अपडेट किया जाता है. यह सारा डेटा, डैशबोर्ड पर दिखता है.

अपने बेसलाइन टारगेट का पता लगाने में मदद करने वाले टूल

ब्राउज़र के साथ काम करने की नीति को, Baseline Widely available के बदलते टारगेट के आधार पर तय किया जा सकता है. जैसे, यूके की एजेंसी Clearleft. हालांकि, किसी Baseline साल के आधार पर, एक तय टारगेट भी अपनाया जा सकता है. अब अपने उपयोगकर्ता डेटा के साथ-साथ, वेब-फ़ीचर के डेटा का इस्तेमाल करके, अपने लिए सबसे सही टारगेट तय किया जा सकता है.

हमने पिछले साल I/O में एलान किया था कि RUMvision, अपने प्रॉडक्ट में Baseline को लागू करेगा. अब यह इंटिग्रेशन लाइव हो गया है.

यह आपके RUM डेटा का इस्तेमाल करता है. इससे आपको यह तय करने में मदद मिलती है कि आपको किस साल के डेटा को बेसलाइन के तौर पर इस्तेमाल करना है. यह फ़ैसला, ग्लोबल औसत के बजाय आपके डेटा के आधार पर लिया जाता है. इससे यह भी पता चल सकता है कि आपके लिए, Baseline Widely available का इस्तेमाल करना सही है या नहीं.

Google Analytics के बेसलाइन की जांच करने वाले नए टूल का इस्तेमाल करके, Google Analytics के डेटा से यह भी देखा जा सकता है कि कितने प्रतिशत उपयोगकर्ता, हर बेसलाइन टारगेट को सपोर्ट करते हैं.

ये ऐसे टूल के बढ़ते कलेक्शन में से सिर्फ़ दो टूल हैं जो आपको अपने असली उपयोगकर्ता के डेटा को बेसलाइन पर मैप करने में मदद करते हैं.

Web DX Community Group ने हाल ही में Netlify के लिए एक एक्सटेंशन लॉन्च किया है. यह एक्सटेंशन, अलग-अलग बेसलाइन वर्शन के साथ काम करता है. साथ ही, यह आपकी साइटों पर बड़े पैमाने पर उपलब्ध है. इससे आपको यह तय करने में मदद मिलती है कि आपको अपने बिल्ड टूल में किस वर्शन को टारगेट करना है. Cloudflare के Observatory RUM प्रॉडक्ट और Contentsquare के साथ इंटिग्रेशन जल्द ही उपलब्ध होंगे.

डेटा को अपने टूल के साथ इंटिग्रेट करना

वेब सुविधाओं का डेटा ओपन सोर्स है और आपके इंटिग्रेशन के लिए उपलब्ध है. हम इस प्रोसेस को आसान बनाने की कोशिश कर रहे हैं.

Web Platform Dashboard API का इस्तेमाल करें या npm पैकेज से सीधे तौर पर वेब-फ़ीचर का डेटा इस्तेमाल करें.

अब W3C WebDX कम्यूनिटी ग्रुप के baseline-browser-mapping मॉड्यूल का इस्तेमाल करके, ब्राउज़र के वर्शन को बेसलाइन टारगेट पर मैप किया जा सकता है. इस मॉड्यूल का इस्तेमाल, सर्वर-साइड JavaScript एनवायरमेंट में किया जा सकता है. इसके अलावा, इसे JSON या CSV फ़ाइलें डाउनलोड करके भी इस्तेमाल किया जा सकता है. ये फ़ाइलें, हर दिन रिपॉज़िटरी से रीफ़्रेश होती हैं.

इस डेटा में, सिर्फ़ मुख्य Baseline ब्राउज़र सेट के लिए मैपिंग शामिल नहीं हैं. इसमें Samsung Internet, Opera, UC Browser, और Android Webview जैसे डाउनस्ट्रीम ब्राउज़र के लिए भी मैपिंग शामिल हैं.

जानें कि आपके बेसलाइन टारगेट के लिए, सुविधाएं काम करती हैं या नहीं

अब MDN और Can I Use के ज़्यादातर पेजों पर, बेसलाइन की जानकारी उपलब्ध है. यह जानकारी, Web Platform Dashboard पर भी देखी जा सकती है. साथ ही, web.dev और CSS Tricks पर मौजूद लेखों में भी इसे देखा जा सकता है. हालांकि, इन सभी के लिए आपको सहायता से जुड़ी जानकारी देखनी होगी. अगर आपको कोडिंग करते समय, अपने आईडीई में बेसलाइन की जानकारी दिखे, तो यह आपके लिए ज़्यादा फ़ायदेमंद होगा. साथ ही, यह जानकारी आपके इस्तेमाल किए जाने वाले अन्य सभी टूल में भी दिखनी चाहिए.

हमें यह बताते हुए खुशी हो रही है कि अब कई अहम टूल में, Baseline की सुविधा पहले से मौजूद है या इसे आसानी से इंटिग्रेट किया जा सकता है.

browserslist-config-baseline

Babel और PostCSS जैसे कई टूल, यह तय करने के लिए browserslist का इस्तेमाल करते हैं कि किन ब्राउज़र के साथ काम करना है.

Chrome टीम ने WebDX CG और कम्यूनिटी के सदस्यों के साथ मिलकर, browserslist-config-baseline नाम का एक नया टूल लॉन्च किया है. इससे, ब्राउज़रलिस्ट के टारगेट को बेसलाइन शर्तों के हिसाब से कॉन्फ़िगर किया जा सकता है. जैसे, ज़्यादातर उपलब्ध या बेसलाइन साल.

इसकी मदद से, browserslist टारगेट का इस्तेमाल करने वाले किसी भी टूल को अब बेसलाइन के हिसाब से इस्तेमाल किया जा सकता है.

ज़्यादा जानकारी के लिए, ब्राउज़रलिस्ट के साथ Baseline का इस्तेमाल करना लेख पढ़ें.

लिंटर में बेसलाइन—ESLint और Stylelint

हाल ही में, कुछ नए टूल की मदद से, लिंटर के साथ बेसलाइन का इस्तेमाल किया जा सकता है. इसकी शुरुआत सीएसएस के लिए ESLint से हुई है.

बेसलाइन ESLint में use-baseline नियम लागू है. इसे अपने पसंदीदा बेसलाइन टारगेट पर सेट किया जा सकता है. साथ ही, यह आपको उन सुविधाओं का इस्तेमाल करते समय चेतावनी देगा जो आपके टारगेट से नई हैं. आपके पास इन चेतावनियों को हल करने का विकल्प होता है. इसके लिए, उस सुविधा को प्रिमिटिव से बदला जा सकता है या लिंटर की चेतावनी को दबाया जा सकता है. अगर आपको पता है कि किसी नई सुविधा का इस्तेमाल सुरक्षित तरीके से किया जा रहा है, तो यह एक सही समाधान है. उदाहरण के लिए, अगर यह एक प्रोग्रेसिव एन्हांसमेंट है.

डिफ़ॉल्ट रूप से, ESLint @supports ब्लॉक में नई सुविधाओं का इस्तेमाल करने पर चेतावनी नहीं देगा. ऐसा इसलिए, क्योंकि जिन ब्राउज़र पर ये सुविधाएं काम नहीं करती हैं वे इनका आकलन नहीं करेंगे.

एचटीएमएल की गड़बड़ियां ठीक करने के लिए, html-eslint नाम का एक कम्यूनिटी प्लगिन भी उपलब्ध है.

Stylelint, आधिकारिक तौर पर stylelint-plugin-use-baseline नाम के प्लगिन को सपोर्ट करता है. यह नियम, सीएसएस के लिए ESLint नियम की तरह ही काम करता है. हालांकि, यह Stylelint पर चलता है.

कई लिंटर में IDE प्लगिन भी होते हैं. इसलिए, कोडिंग करते समय आपको स्क्विगली अंडरलाइन के ज़रिए, बेसलाइन की स्थिति के बारे में तुरंत सुझाव मिल सकते हैं.

VS Code और JetBrains WebStorm में बेसलाइन

कई आईडीई में, एडिटर में किसी सुविधा पर कर्सर घुमाने और उसके साथ काम करने वाले ब्राउज़र वर्शन की सूची देखने की सुविधा पहले से मौजूद है.

हालांकि, यह समझना मुश्किल हो सकता है कि उस सुविधा का इस्तेमाल करना सुरक्षित है या नहीं. आपको यह देखना होगा कि क्या उस सूची में कोई मुख्य ब्राउज़र मौजूद नहीं है और ब्राउज़र का वर्शन कितना नया है.

इस समस्या को हल करने के लिए, हमने VS Code के साथ साझेदारी की है. VS Code, वेब डेवलपर के बीच सबसे लोकप्रिय आईडीई है और इसका इस्तेमाल लाखों लोग करते हैं. इससे, हम सीधे तौर पर इन होवरकार्ड में बेसलाइन डेटा को इंटिग्रेट कर सकते हैं.

अब किसी सुविधा पर कर्सर घुमाने से, आपको यह पता चल जाएगा कि वह सुविधा बेसलाइन में शामिल है या नहीं. अगर शामिल है, तो कब से शामिल है. इसके अलावा, यह भी पता चलेगा कि क्या कोई ऐसा मुख्य ब्राउज़र है जिसने अब तक इस सुविधा को पूरी तरह से लागू नहीं किया है.

इन सुविधाओं में सीएसएस प्रॉपर्टी, एचटीएमएल एलिमेंट, और एचटीएमएल एट्रिब्यूट शामिल हैं. इस बारे में ज़्यादा जानने के लिए, Visual Studio Code में अब Baseline का इस्तेमाल किया जा सकता है लेख पढ़ें.

इस इंटिग्रेशन का मतलब है कि VS Code पर आधारित कोई भी आईडीई, इन होवरकार्ड का फ़ायदा उठा पाएगा.

इसके अलावा, हमें यह बताते हुए भी खुशी हो रही है कि JetBrains, अपने WebStorm JavaScript और TypeScript IDE में होवरकार्ड लागू कर रहा है.

वेब पहले से ज़्यादा तेज़ी से बेहतर हो रहा है

हमें उम्मीद है कि बेसलाइन की मदद से, आपको इस बात का फ़ायदा मिलेगा कि इंटरऑपरेबल वेब पहले से ज़्यादा तेज़ी से बेहतर हो रहा है.

वेब प्लैटफ़ॉर्म डैशबोर्ड का इस्तेमाल करके, उन सभी सुविधाओं को देखा जा सकता है जो पिछले बारह महीनों में, Google I/O 2024 के बाद से, नई सुविधाओं के तौर पर उपलब्ध हुई हैं.

इसके अलावा, कई ऐसी सुविधाएँ भी हैं जो जल्द ही Baseline Newly available के तौर पर उपलब्ध होंगी. ऐसा इसलिए, क्योंकि उन्हें Interop 2025 प्रोजेक्ट में शामिल किया गया है. शामिल की गई सभी सुविधाओं के बारे में, Interop2025: वेब प्लैटफ़ॉर्म में एक और साल के सुधार लेख में पढ़ा जा सकता है.

साइडवेज़ लिखने के मोड

हम पहले ही देख चुके हैं कि सीएसएस writing-mode प्रॉपर्टी के लिए, sideways-rl और sideways-lr वैल्यू के साथ एक सुविधा, नई सुविधा के तौर पर उपलब्ध हो गई है. अगर लेआउट के लिए वर्टिकल राइटिंग मोड का इस्तेमाल किया जा रहा है, तो साइडवेज़ वैल्यू का इस्तेमाल करें.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

ऐंकर की पोज़िशन

ऐंकर की पोज़िशन तय करने की सुविधा Chrome 125 में उपलब्ध है. इसकी मदद से, किसी एलिमेंट की पोज़िशन को ऐंकर से जोड़ा जा सकता है. उदाहरण के लिए, बटन के साथ टूलटिप खोलते समय.

अब इसे Interop 2025 में शामिल कर लिया गया है. इसलिए, हमें इस साल इसे Baseline में शामिल होते हुए देखना चाहिए.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी: एलसीपी और आईएनपी

LCP API

इवेंट टाइमिंग एपीआई (आईएनपी के लिए)

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

Interop 2025 में, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) और पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) मेट्रिक शामिल हैं. इसके लिए, सभी ब्राउज़र में LargestContentfulPaint एपीआई और इवेंट टाइमिंग एपीआई लागू किया गया है.

<details> एलिमेंट में किए गए सुधार

<details> एलिमेंट, पहले से ही Baseline Widely available है. इसे Interop 2025 में शामिल किया गया है, क्योंकि इसमें कई ऐसी सुविधाएं हैं जो <details> के साथ डिसक्लोज़र विजेट को ज़्यादा काम का बनाती हैं.

<details> एलिमेंट में <summary> एलिमेंट होता है. जब <details> एलिमेंट को छोटा किया जाता है, तब पेज पर <summary> एलिमेंट दिखता है. <summary> के बाहर, <details> एलिमेंट का कॉन्टेंट होता है. यह तब तक छिपा रहता है, जब तक उपयोगकर्ता खास जानकारी पर क्लिक नहीं करता.

Interop 2025 के दौरान, इंटरऑपरेबिलिटी के लिए कई बदलाव किए जा रहे हैं. इनमें से एक बदलाव यह है कि कॉन्टेंट को छिपाने के लिए display के बजाय content-visibility का इस्तेमाल किया जाएगा. इसका मतलब है कि अगर कॉन्टेंट को बड़ा नहीं किया जाता है, तो उसे रेंडर नहीं किया जाएगा.

Interop 2025 के तहत, ::marker स्यूडो-एलिमेंट पर भी काम किया जा रहा है. ::marker छद्म-एलिमेंट की मदद से, <summary> एलिमेंट के डिसक्लोज़र ट्रायंगल को स्टाइल किया जा सकता है.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

इसके बाद, एक और स्यूडो-एलिमेंट—::details-content.

::details-content कॉन्टेंट को दिखाता है. यह जानकारी वाले एलिमेंट का वह हिस्सा होता है जो बड़ा और छोटा होता है. साथ ही, इससे आपको कॉन्टेंट को स्टाइल करने की सुविधा मिलती है.

[open]::details-content {
  border: 5px dashed hotpink;
}

इसमें कुछ और सुधार भी किए गए हैं. जैसे, पेज पर मौजूद मिलते-जुलते कॉन्टेंट के साथ <details> एलिमेंट अपने-आप बड़ा हो जाता है. साथ ही, एचटीएमएल hidden एट्रिब्यूट की until-found वैल्यू को नई सुविधा के तौर पर उपलब्ध बेसलाइन पर ले जाया जाता है. यह एलिमेंट को तब तक छिपाता है, जब तक कि उसे ब्राउज़र की 'पेज में ढूंढें' सुविधा का इस्तेमाल करके न ढूंढ लिया जाए या यूआरएल फ़्रैगमेंट का इस्तेमाल करके सीधे उस पर न जाया जाए.

सीएसएस @scope

सीएसएस @scope नियम की मदद से, अपने सिलेक्टर की पहुंच को सीमित किया जा सकता है. @scope की मदद से स्कोपिंग रूट सेट करने पर, ऐट-रूल में नेस्ट किए गए स्टाइल के सभी नियम सिर्फ़ उस डीओएम ट्री पर लागू होते हैं.

उदाहरण के लिए, अगर आपको सिर्फ़ .card क्लास वाले एलिमेंट के अंदर मौजूद <img> एलिमेंट को टारगेट करना है, तो .card स्कोपिंग रूट बन जाएगा.

@scope (.card) {
    img {
        border-color: green;
    }
}

सीएसएस @scope at-rule की मदद से, अपने सिलेक्टर की पहुंच को सीमित करें लेख में इसके बारे में ज़्यादा जानें.

scrollend

scrollend एक ऐसी सुविधा है जो स्क्रोलिंग इंटरफ़ेस को बेहतर बनाती है और इस्तेमाल करने में आसान होती है. scrollend इवेंट के बिना, यह पता लगाने का कोई भरोसेमंद तरीका नहीं है कि स्क्रोल पूरा हो गया है.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend इवेंट की मदद से, ब्राउज़र आपके लिए यह मुश्किल काम करता है.

document.onscrollend = event => {…}

Scrollend, a new JavaScript event में ज़्यादा उदाहरण देखें.

एक ही दस्तावेज़ में व्यू ट्रांज़िशन

आखिरी लेकिन सबसे ज़रूरी बात यह है कि व्यू ट्रांज़िशन, Interop 2025 का हिस्सा हैं. इस काम में, एक ही दस्तावेज़ में व्यू ट्रांज़िशन शामिल हैं. इसलिए, सिंगल-पेज ऐप्लिकेशन और व्यू ट्रांज़िशन क्लास के लिए भी ऐसा ही किया जाता है.

साल के आखिर तक, इस प्रोजेक्ट में क्या-क्या बदलाव हुए हैं, यह देखने के लिए Interop 2025 के डैशबोर्ड पर जाएं.

Interop 2025 में शामिल की गई सुविधाएं, इस साल बेसलाइन का हिस्सा बनने वाली इकलौती सुविधाएं नहीं होंगी. हालांकि, इन सुविधाओं को प्रोजेक्ट में शामिल करने से हमें यह पता चलता है कि इन्हें प्राथमिकता दी गई है और ये जल्द ही उपलब्ध होंगी.

हम बस अभी शुरुआत कर रहे हैं

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

web.dev पर नज़र रखें. हम नए टूल के बारे में सूचनाएं पब्लिश करते रहेंगे. साथ ही, ट्यूटोरियल भी पब्लिश करते रहेंगे, ताकि आपको वेब पर उपलब्ध सभी सुविधाओं का फ़ायदा मिल सके.