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

Rachel Andrew

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

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

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

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

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

इस बारे में ज़्यादा जानने के लिए, 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, वेब डेवलपर के बीच सबसे लोकप्रिय IDE है. हम Baseline के डेटा को सीधे तौर पर इन होवरकार्ड में इंटिग्रेट करेंगे.

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

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

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

इसके अलावा, हमें यह बताते हुए भी खुशी हो रही है कि 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> के बाहर, <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 ऐट-रूल की मदद से, अपने सिलेक्टर की पहुंच सीमित करें में ज़्यादा जानें.

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 के डैशबोर्ड पर जाकर देखें कि साल के आखिर तक यह प्रोजेक्ट कैसा दिखता है.

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

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

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

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